/* ============ title.css: タイトル画面・設定・製作者より・オープニング動画 ============ */
  /* 演出のタイミング制御はすべてJS(title.js)のelement.animate()で行う。CSSの@keyframes+
     classList付け外しでの「再生し直し」は、このプロジェクトで過去に複数回(HPバーの被弾トレイル、
     ログ行の登場演出、宿泊のクロスフェード等)信頼性の低さが判明している手法のため、
     タイトル画面でも同じ理由で採用しない。CSS側は「JSが確実に初期状態/最終状態を書き込む前提」の
     最終的な見た目(完全に表示された状態)だけを既定値として持たせ、万一JSが動かない場合でも
     要素が消えたままにはならないようにしてある */

  /* フォントはGoogle Fonts導入(2026-07-11)によりゲーム全体でZen Kaku Gothic Newに統一。
     以前はタイトル/設定/製作者よりだけ明朝体にしていたが、var(--font-main)はbodyから継承されるため
     ここで個別のfont-family指定は不要になった(統一の一環として明朝体指定は削除) */
  #screen-title { position: relative; overflow: hidden; }

  .title-bg-base, .title-logo-reveal {
    position: fixed; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
  }
  /* ロゴ部分だけを他の位置と全く同じ画像・同じcover/center基準で切り抜いて重ねる。
     背景本体(title_bg_base.jpg)はロゴの位置だけぼかし処理済みのため、
     2枚が同じ座標系で重なることで「ロゴだけくっきり浮かび上がる」効果になる。
     パーセンテージは元画像1844px中、ロゴ帯がy=195〜575の範囲であることから算出 */
  .title-logo-reveal { clip-path: inset(10.575% 0 68.818% 0); transform-origin: 50% 20.6%; }

  /* 淡い夕焼けのゆらぎ(太陽の位置あたりに、非常にゆっくり明滅する光暈) */
  #screen-title::after {
    content: ''; position: fixed; z-index: 1; pointer-events: none;
    left: 50%; top: 34%; width: 46%; padding-bottom: 46%; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,214,140,0.22) 0%, rgba(255,180,110,0.08) 45%, transparent 70%);
    animation: titleShimmer 8s ease-in-out infinite;
  }
  @keyframes titleShimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }

  .title-fx-layer { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }

  .title-petal {
    position: absolute; top: -5%;
    background: radial-gradient(circle at 30% 30%, #ffd9e6, #f6a8c4 70%);
    border-radius: 60% 40% 65% 35% / 55% 45% 55% 45%;
    animation-name: titlePetalFall; animation-timing-function: linear; animation-iteration-count: infinite;
  }
  @keyframes titlePetalFall {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(28px, 118vh) rotate(340deg); }
  }

  .title-steam {
    position: absolute; bottom: 18%; width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%);
    filter: blur(2px);
    animation-name: titleSteamRise; animation-timing-function: ease-out; animation-iteration-count: infinite;
    animation-duration: 6.5s;
  }
  @keyframes titleSteamRise {
    0% { transform: translateY(0) scale(0.7); opacity: 0; }
    20% { opacity: 0.55; }
    100% { transform: translateY(-90px) scale(1.5); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    #screen-title::after, .title-petal, .title-steam { animation: none; display: none; }
  }

  /* ============ メニュー ============ */
  .title-menu {
    position: fixed; z-index: 3; left: 50%; transform: translateX(-50%);
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    width: 100%; max-width: 480px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 0 24px;
  }
  .title-menu-btn {
    width: min(280px, 100%); height: 64px; border-radius: 18px;
    border: 1px solid rgba(215,182,111,0.55);
    background: linear-gradient(180deg, #2a2420 0%, #1c1712 55%, #120d0a 100%);
    color: #fff; font-size: 22px; font-weight: var(--fw-button); letter-spacing: 0.1em;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 0.1s ease-out, filter 0.1s ease-out, box-shadow 0.4s ease-out;
    cursor: pointer;
  }
  .title-menu-btn:active { transform: scale(0.97); filter: brightness(0.9); }
  .title-menu-btn:disabled { opacity: 0.4; filter: grayscale(0.6); cursor: not-allowed; }
  .title-menu-btn .title-menu-icon { width: 18px; height: 18px; color: var(--dw-gold); visibility: hidden; flex-shrink: 0; }
  .title-menu-btn.primary .title-menu-icon { visibility: visible; }
  .title-menu-btn.primary {
    border-color: rgba(215,182,111,0.9);
    animation: titlePrimaryGlow 3.2s ease-in-out infinite;
  }
  @keyframes titlePrimaryGlow {
    0%, 100% { box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 10px rgba(215,182,111,0.25); }
    50% { box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 22px rgba(215,182,111,0.6); }
  }
  @media (prefers-reduced-motion: reduce) {
    .title-menu-btn.primary { animation: none; box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 14px rgba(215,182,111,0.4); }
  }

  .title-footer {
    position: fixed; z-index: 3; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    text-align: center; font-size: 11px; letter-spacing: 0.05em; color: rgba(255,255,255,0.55);
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  }

  /* ============ 設定画面(タイトルと同じ背景を暗くぼかして流用) ============ */
  .title-sub-bg {
    position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center;
    filter: blur(3px) brightness(0.45); transform: scale(1.05);
  }
  .title-sub-panel {
    position: relative; z-index: 1; margin: auto; width: min(360px, 86%);
    background: var(--dw-card-bg); border: 1px solid var(--dw-card-border); border-radius: var(--radius-lg);
    box-shadow: var(--dw-card-shadow); padding: 24px 20px; text-align: center;
  }
  .title-sub-panel h1 { font-size: 20px; color: var(--dw-title-color); margin: 0 0 18px; }
  .title-setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--dw-body-color); font-size: 15px;
  }
  .title-toggle-btn {
    min-width: 64px; height: 32px; border-radius: var(--radius-pill); border: 1px solid var(--dw-card-border);
    background: rgba(0,0,0,0.3); color: var(--dw-caption-color); font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
    transition: background var(--dw-t-btn) ease-out, color var(--dw-t-btn) ease-out;
  }
  .title-toggle-btn.is-on { background: var(--dw-gold); color: #2a2015; border-color: var(--dw-gold); }
  .title-sub-back-btn { width: 100%; margin-top: 6px; }

  /* ============ 製作者より(タイトル画面に重なるオーバーレイ。画面遷移はしない) ============
     読み物として自然に読めるよう、中央揃えではなく左揃えのレイアウトにしてある。
     余白を大きめに取り、見出し/本文/署名の3段階で文字サイズにメリハリを付けた。
     基本はスクロール無しで収まる分量に文章量・行間を調整しているが、極端に縦の狭い端末向けの
     保険としてmax-height+overflow-yだけは残してある(通常は発火しない) */
  #titleCreditsOverlay {
    position: fixed; inset: 0; z-index: 40; display: none;
    background: rgba(8,8,10,0.6);
    align-items: center; justify-content: center;
  }
  .title-credits-panel {
    width: min(360px, 88%); max-height: 92vh; overflow-y: auto;
    margin: auto;
    background: linear-gradient(180deg, #3a2c1c 0%, #2a2015 55%, #201810 100%);
    border: 1.5px solid #5d4d35; border-radius: var(--radius-lg);
    box-shadow: 0 12px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 30px 28px 24px; text-align: left;
  }
  .title-credits-heading {
    font-size: 19px; color: var(--dw-title-color); margin: 0 0 18px; text-align: left;
  }
  .title-credits-body p {
    margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: #ece5d6; font-weight: var(--fw-body);
  }
  .title-credits-body p:last-child { margin-bottom: 0; }
  .title-credits-sign {
    margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 13.5px; line-height: 1.7; color: var(--dw-gold); font-weight: var(--fw-number);
  }
  .title-credits-sign-sub {
    margin: 4px 0 22px; font-size: 12.5px; line-height: 1.7; color: var(--dw-caption-color);
  }
  .title-credits-close-btn { width: 100%; }

  /* ============ オープニング動画 ============ */
  #openingOverlay {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: #000;
    align-items: center; justify-content: center;
  }
  #openingVideo { width: 100%; height: 100%; object-fit: cover; }
  #openingSkipHint {
    position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    color: rgba(255,255,255,0.75); font-size: 12px; letter-spacing: 0.05em;
    background: rgba(0,0,0,0.35); padding: 6px 12px; border-radius: var(--radius-pill);
    display: none;
  }