/* ===== Scenario "Bye My Memory" — Color System ===== */
  :root {
    --bg: #0a0612;
    --bg-deep: #050309;
    --bg-soft: #14091f;
    --text: #f5e9d3;            /* parchment */
    --text-soft: #c9b89a;
    --text-dim: #6e5d49;
    --neon-magenta: #ff3d8b;
    --neon-purple: #9d4eff;
    --neon-cyan: #4ee2ff;
    --neon-amber: #ffae3d;
    --memory-glow: #c9a3ff;     /* the colour of memory bottles */
    --line: rgba(245, 233, 211, 0.18);
    --line-soft: rgba(245, 233, 211, 0.08);
    --serif: 'Cormorant Garamond', 'Shippori Mincho', serif;
    --mincho: 'Shippori Mincho', serif;
    --sans: 'Noto Sans JP', 'Inter', system-ui, sans-serif;
    --rounded: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;

    /* ============================================================
       セーフゾーン CSS変数（機種依存問題の構造的解決）
       2026-06-05 導入。立ち絵の4スロット固定と同じ哲学で、
       UIを「機種に依存しない定められた範囲」に配置する。
       ============================================================
       【使い方】
       ・UIの位置指定で env(safe-area-inset-*) を直接書かず、
         var(--safe-top), var(--safe-right) などを使う
       ・最大幅/高さは var(--ui-max-width), var(--ui-max-height) を使う
       ・lvh ベースなので iOS のキーボード問題も自動回避 */
    /* ★2026-06-12：iPhone 内カメラ/ノッチに近い機種でコイン・ターン数が
       見えにくいので、--safe-right の最低値を 14px → 24px に増やす（10px 内側へ）。
       iOS の safe-area-inset-right が反映される機種ではそのまま採用される。 */
    --safe-top:    max(env(safe-area-inset-top, 0px), 14px);
    --safe-right:  max(env(safe-area-inset-right, 0px), 24px);
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), 14px);
    --safe-left:   max(env(safe-area-inset-left, 0px), 14px);

    /* UI最大幅/高さ：機種比率に依存しない範囲 */
    --ui-max-width:  min(96vw, 1280px);
    --ui-max-height: calc(100lvh - var(--safe-top) - var(--safe-bottom));

    /* テキストボックス・モーダル等のスタンダードな最大幅 */
    --textbox-max-width: min(92vw, 980px);

    /* スマホ（phone）UIの幅と右マージン（4スロット中の右端領域確保） */
    --phone-width: 340px;
    --phone-reserved: calc(var(--phone-width) + var(--safe-right) + 16px);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.7;
    font-weight: 300;
    overflow: hidden;        /* シナリオは固定画面 */
    height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  /* ============================================================================
     ORIENTATION SYSTEM — PC と スマホで挙動を分ける
     ----------------------------------------------------------------------------
     PC（min-width: 1025px）：
       - 常に横画面のまま
       - 掲示板タブ押下時も背景・HUD・ステータスはそのまま表示
       - ホワイトアウトなし、ただのタブ切替
     スマホ（max-width: 1024px）：
       - 通常時：横画面（端末縦持ちなら CSS rotation で強制横）
       - 掲示板時：縦画面フルスクリーン（端末横持ちなら CSS rotation で強制縦）
       - 状態切替時はホワイトアウトで遷移を隠して回転を見せない
     ============================================================================ */

  /* (A) スマホ端末・縦向き × 通常時 → CSSで横画面に強制
     プレイヤー設定モーダルもシナリオの一部として横画面で表示する。
     掲示板タブだけは縦画面フルスクリーン化のために除外。 */
  @media screen and (orientation: portrait) and (max-width: 1024px) {
    body:not(.viewing-board) {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      height: 100vw;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
  }

  /* (B) スマホ端末・横向き × 掲示板時 → CSSで縦画面に強制 */
  @media screen and (orientation: landscape) and (max-width: 1024px) {
    body.viewing-board {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      height: 100vw;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
  }

  /* (C) スマホ × 掲示板時 → 背景・HUDを隠してスマホUIをフルスクリーン化 */
  @media screen and (max-width: 1024px) {
    body.viewing-board {
      background: #0a0612;
    }
    body.viewing-board .stage,
    body.viewing-board .hud {
      opacity: 0;
      pointer-events: none;
    }
    body.viewing-board .phone {
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
      border-radius: 0;
      border-width: 0;
      box-shadow: none;
    }
    body.viewing-board .phone-notch {
      border-radius: 0;
    }
    .stage, .hud {
      transition: opacity 0.25s ease;
    }
  }

  /* ===== Guard Room Talk Bar =====
     画面下中央に固定する「話しかける」バー。背景画像の cover 拡縮の影響を受けず、
     どのアスペクト比でも確実に視認できる。phone と HUD より上に置く。 */
  .room-npcs {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: none;
    gap: 10px;
    z-index: 50;
    pointer-events: none;
    padding: 8px 10px;
    background: rgba(10, 6, 18, 0.78);
    border: 1px solid rgba(78, 226, 255, 0.35);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 18px rgba(78,226,255,0.25);
    backdrop-filter: blur(8px);
    animation: talkBarSlideUp 0.4s ease-out;
  }
  /* 各場所に固有の NPC がいるとき has-npcs クラスが付き、その時だけ表示される。
     掲示板タブ閲覧中は隠す。 */
  body:not(.viewing-board) .room-npcs.has-npcs { display: inline-flex; }
  /* daily オーバーレイ表示中は、室内 NPC タブを隠す（選択肢が塞がれないように） */
  body.daily-open .room-npcs { display: none !important; }

  .npc-talk-btn {
    pointer-events: auto;
    padding: 9px 18px;
    background: rgba(20, 9, 31, 0.88);
    border: 1px solid var(--neon-cyan);
    border-radius: 999px;
    color: var(--neon-cyan);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.16em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 12px rgba(78,226,255,0.25);
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .npc-talk-btn:hover {
    color: #fff;
    background: rgba(20, 9, 31, 0.95);
    box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 18px rgba(78,226,255,0.55);
    transform: translateY(-2px);
  }
  .npc-talk-btn:active { transform: translateY(0); }
  /* ★嫌悪フィルター（仕様書v1）：エイムが機嫌を損ねている時のグレーアウト表示 */
  .npc-talk-btn-disabled,
  .npc-talk-btn-disabled:hover {
    background: rgba(40, 40, 40, 0.65);
    border-color: rgba(180, 180, 180, 0.3);
    color: rgba(220, 220, 220, 0.55);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    pointer-events: auto;     /* aria-label読み上げ用に hover可視は残す */
  }
  .npc-talk-mood {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(255, 130, 130, 0.75);
    font-style: italic;
  }
  /* ★2026-07-08：飲み物を渡す統一ボタン。キャラ名ボタンの隣に並ぶ、暖色（琥珀）のピル。 */
  .npc-gift-btn {
    pointer-events: auto;
    padding: 9px 15px;
    background: rgba(31, 20, 9, 0.9);
    border: 1px solid #ffb84e;
    border-radius: 999px;
    color: #ffe0b0;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 12px rgba(255,184,78,0.22);
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .npc-gift-btn:hover {
    color: #fff;
    background: rgba(41, 26, 12, 0.96);
    box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 18px rgba(255,184,78,0.5);
    transform: translateY(-2px);
  }
  .npc-gift-btn:active { transform: translateY(0); }
  .npc-gift-ic { margin-right: 5px; }

  /* ★世界観保護ペナルティ通知（共通ガード v1）：「乖離度が狭まった」トースト */
  .world-break-toast {
    position: fixed;
    left: 50%;
    bottom: 22%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(180deg, rgba(20, 5, 32, 0.96), rgba(8, 2, 18, 0.96));
    border: 1px solid rgba(255, 90, 90, 0.55);
    border-radius: 12px;
    padding: 14px 28px 14px 24px;
    color: #fff5e0;
    font-family: var(--rounded, 'M PLUS Rounded 1c', sans-serif);
    box-shadow: 0 8px 28px rgba(0,0,0,0.65), 0 0 24px rgba(255, 90, 90, 0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    max-width: min(80vw, 480px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
  }
  .world-break-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .world-break-toast .wb-icon {
    font-size: 18px;
    color: #ff8080;
    text-shadow: 0 0 8px rgba(255, 128, 128, 0.6);
    line-height: 1;
    margin-top: 1px;
  }
  .world-break-toast .wb-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ff9d9d;
    margin-bottom: 2px;
  }
  .world-break-toast .wb-sub {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(245, 233, 211, 0.7);
    line-height: 1.4;
  }
  .world-break-toast .wb-body {
    display: flex;
    flex-direction: column;
  }
  @keyframes talkBarSlideUp {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  /* スマホ用：縮小＋左下に寄せる（スマホを開くボタンが右下にいるため反対側に置く）。
     最大 NPC は守衛室の2人（エイム＋少年）なので幅制約は不要、自然に左下に並ぶ。 */
  @media (max-width: 700px), (max-height: 500px) {
    .room-npcs {
      /* ★2026-06-20：エイム/少年ボタンの左端を、左上ツール（.scene-tools = var(--safe-left)）と
         縦軸で揃える。room-npcs はボーダー1px＋左パディング8px＝9px 内側にボタンが入るので、
         コンテナを safe-left より 9px 左に置くとボタン左端が safe-left に一致する。 */
      left: calc(var(--safe-left) - 9px);
      right: auto;
      bottom: 14px;
      transform: none;       /* 既定の translateX(-50%) を解除して左揃え */
      padding: 6px 8px;
      gap: 8px;
    }
    .npc-talk-btn { padding: 7px 14px; font-size: 11px; letter-spacing: 0.12em; }
    /* スライドアニメも左下からに変更（translateX(-50%) を含まない） */
    .room-npcs.has-npcs { animation: talkBarSlideUpLeft 0.4s ease-out; }
  }
  /* ===== Phone Answer Button =====
     公衆電話シーンでのみ表示する「電話に出る」ボタン。
     applyLocation で表示制御。クリックで胎児音響BGMが再生される。
     UI 位置：画面下中央（room-npcs と同じ位置だが、こちらは単独表示）。 */
  .phone-answer-wrap {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 52;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    animation: phoneAnswerSlideUp 0.5s ease-out;
  }
  .phone-answer-wrap[hidden] { display: none; }
  .phone-answer-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(15, 8, 24, 0.92);
    border: 1.5px solid #d9c46b;            /* ヴィンテージなゴールド */
    border-radius: 999px;
    color: #f6e9b8;
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0.18em;
    cursor: pointer;
    box-shadow:
      0 4px 18px rgba(0,0,0,0.6),
      0 0 22px rgba(217, 196, 107, 0.35),
      inset 0 0 14px rgba(217, 196, 107, 0.12);
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    animation: phoneRing 1.4s ease-in-out infinite;
  }
  .phone-answer-icon { font-size: 18px; line-height: 1; }
  .phone-answer-btn:hover {
    color: #fff;
    background: rgba(40, 24, 8, 0.95);
    box-shadow:
      0 6px 22px rgba(0,0,0,0.7),
      0 0 28px rgba(217, 196, 107, 0.6),
      inset 0 0 18px rgba(217, 196, 107, 0.22);
    transform: translateY(-2px);
  }
  .phone-answer-btn:active { transform: translateY(0); }
  .phone-answer-status {
    padding: 6px 16px;
    background: rgba(15, 8, 24, 0.78);
    border: 1px solid rgba(217, 196, 107, 0.45);
    border-radius: 999px;
    color: #f6e9b8;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.24em;
    pointer-events: none;
  }
  .phone-answer-status[hidden] { display: none; }
  @keyframes phoneRing {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); box-shadow:
                 0 6px 24px rgba(0,0,0,0.7),
                 0 0 30px rgba(217, 196, 107, 0.65),
                 inset 0 0 18px rgba(217, 196, 107, 0.2); }
  }
  @keyframes phoneAnswerSlideUp {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  /* スマホ：少し小さく */
  @media (max-width: 700px), (max-height: 500px) {
    .phone-answer-wrap { bottom: 14px; }
    .phone-answer-btn { padding: 11px 20px; font-size: 12px; letter-spacing: 0.14em; }
    .phone-answer-status { font-size: 10px; letter-spacing: 0.18em; }
  }
  /* 掲示板閲覧・daily オープン中は隠す */
  body.viewing-board .phone-answer-wrap,
  body.daily-open    .phone-answer-wrap { display: none !important; }

  /* ===== 公衆電話「母の声」ナレーション風オーバーレイ ===== */
  .phone-voice-overlay {
    position: fixed;
    left: 50%;
    bottom: 22%;
    transform: translateX(-50%);
    width: min(560px, 88%);
    background: linear-gradient(180deg, rgba(20,16,40,0.92) 0%, rgba(10,8,24,0.96) 100%);
    border: 1px solid rgba(168,92,255,0.4);
    border-radius: 8px;
    padding: 18px 24px;
    color: #f0e8d8;
    font-family: var(--mincho);
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 36px rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 9000;
  }
  .phone-voice-overlay.show { opacity: 1; }
  .phone-voice-line {
    opacity: 0;
    transition: opacity 0.45s;
    margin: 4px 0;
  }
  .phone-voice-line.show { opacity: 1; }
  @media (max-width: 700px), (max-height: 500px) {
    .phone-voice-overlay {
      bottom: 18%;
      font-size: 13px;
      padding: 14px 18px;
    }
  }

  @keyframes talkBarSlideUpLeft {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ===== Dialogue Overlay（会話モーダル） =====
     立ち絵をバストアップで画面下に並べ、テロップを立ち絵の手前（z-index上）に
     重ねるレイアウト。複数キャラを横並びで配置できる構造。
     キャラごとの身長差は --char-scale CSS変数で表現（aim=1.0, boy=0.88 など）。 */
  .dialogue-overlay {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.85) 100%);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  .dialogue-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
  }
  .dialogue-stage {
    position: absolute;
    inset: 0;
  }
  /* 立ち絵：店UI統一フレーム（左側VN・身長スケールは JS から --char-scale で設定） */
  .dialogue-portraits {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .dialogue-portrait {
    --char-scale: 0.886;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--char-scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .dialogue-overlay.open .dialogue-portrait { opacity: 1; }
  /* セリフテロップ：画面下中央（intro-textbox と同等スタイル）
     キャラが台詞を話す時は立ち絵＋下部テロップが基本。
     選択肢/メニュー（daily-overlay）とは違うレイアウトで「物語進行モード」を演出 */
  .dialogue-box {
    position: absolute;
    left: 50%;
    bottom: var(--safe-bottom, max(env(safe-area-inset-bottom, 0px), 14px));
    transform: translateX(-50%) translateY(20px);
    width: var(--textbox-max-width, min(92vw, 980px));
    background: linear-gradient(180deg, rgba(10, 6, 18, 0.82), rgba(8, 4, 14, 0.94));
    border: 1px solid rgba(78, 226, 255, 0.45);
    border-radius: 14px;
    padding: 14px 26px 14px;
    color: var(--text);
    box-shadow: 0 0 30px rgba(78, 226, 255, 0.18), 0 -8px 38px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
    opacity: 0;
    backdrop-filter: blur(6px);
    transition: opacity 0.45s ease 0.1s, transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) 0.1s;
  }
  .dialogue-overlay.open .dialogue-box {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* スマホUIが開いている時はテロップ幅を縮める（intro-textbox と同じルール） */
  body:not(.phone-closed) .dialogue-box {
    left: calc(var(--safe-left, 0px) + 60px);
    right: var(--phone-reserved, 16px);
    transform: translateY(20px);
    width: auto;
    max-width: 720px;
    margin-left: 0;
  }
  body:not(.phone-closed) .dialogue-overlay.open .dialogue-box {
    transform: translateY(0);
  }
  /* PC：余裕がある時は intro-textbox 同様に少し広め */
  @media (min-width: 900px) {
    .dialogue-box { padding: 16px 30px; }
  }
  .dialogue-speaker {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--neon-cyan);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(78, 226, 255, 0.25);
    text-shadow: 0 0 6px rgba(78, 226, 255, 0.5);
  }
  .dialogue-text {
    font-family: var(--rounded);
    font-size: 14px;
    line-height: 1.9;
    color: var(--text);
    flex: 1;
    min-height: 60px;
    letter-spacing: 0.04em;
  }
  .dialogue-progress {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    text-align: right;
    margin: 4px 0 6px;
  }
  .dialogue-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
  }
  .dialogue-btn {
    border: 1px solid;
    border-radius: 999px;
    padding: 6px 18px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
  }
  .dialogue-btn.close {
    background: transparent;
    border-color: rgba(245, 233, 211, 0.3);
    color: var(--text-dim);
  }
  .dialogue-btn.close:hover {
    background: rgba(245, 233, 211, 0.08);
    color: var(--text);
  }
  .dialogue-btn.next {
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    color: #0a0612;
    font-weight: 700;
  }
  .dialogue-btn.next:hover {
    background: #6ee8ff;
    transform: translateY(-1px);
  }
  /* 最後のセリフでは「次へ」を「閉じる」に変える */
  .dialogue-overlay.last-line .dialogue-btn.next { display: none; }

  /* スマホ用：PC と同じ計算式で腰位置を揃える（margin-bottom 計算式は共通）。
     横幅の制約だけスマホ用に調整。
     ⚠ スマホ縦持ち端末は body 全体に transform:rotate(-90deg) を掛けて
     「論理横画面」を実現しているため、vw/vh の物理的意味は portrait/landscape
     で逆転する。下の (orientation:portrait) ブロックで vh ベースに上書き。 */
  @media (max-width: 700px), (max-height: 500px) {
    .dialogue-overlay {
      overflow: hidden;   /* 押し下げで画面外にはみ出す部分を親で切る */
    }
    .dialogue-portraits {
      gap: 12px;
      padding: 0 8px;
      overflow: visible;
    }
    .dialogue-portrait {
      max-width: 58vw;
    }
    /* スマホ用テロップ：下端に貼り付け＋一行分縮小（min-height/padding/line-height）。
       これで画面の半分まで占有しないようにする。 */
    .dialogue-box {
      width: 100vw;
      max-width: 100vw;
      padding: 10px 14px 8px;
      min-height: 72px;       /* 100px → 一行分（約 24px）短縮 */
      bottom: 0;
      border-radius: 12px 12px 0 0;
    }
    .dialogue-text {
      font-size: 13px;
      line-height: 1.7;       /* 1.85 → 1.7 で行間も圧縮 */
      min-height: 36px;       /* 60px → 一行分短縮 */
    }
    .dialogue-speaker { margin-bottom: 4px; padding-bottom: 4px; }
    .dialogue-progress { margin: 2px 0 4px; }
  }

  /* スマホ縦持ち（rotate(-90deg) で擬似横画面）専用 ===================
     body が 100vh × 100vw（=回転後 横 = 縦実寸、縦 = 横実寸）になるので、
     立ち絵モーダル系の幅・高さは vh ベースで指定し直す必要がある。
     - dialogue-box の幅：96vh（論理横幅いっぱい）
     - 立ち絵の押し下げ計算：vh だった部分を vw に置換（縦の物理 = vw）
     これで「右に寄りすぎ」「閉じるボタンが切れる」問題が解消する。 */
  @media screen and (orientation: portrait) and (max-width: 1024px) {
    .dialogue-portraits {
      bottom: 0;
    }
    .dialogue-portrait {
      /* 回転後の "縦" は元の vw。120vh × scale → 120vw × scale */
      height: calc(120vw * var(--char-scale));
      max-height: calc(120vw * var(--char-scale));
      max-width: 58vh;  /* 回転後の "横" 制約は vh */
      margin-bottom: calc(-48vw * var(--char-scale) + 14vw);
    }
    .dialogue-box {
      width: 100vh;      /* 回転後の論理横幅いっぱい（vh = 物理 width） */
      max-width: 100vh;
      bottom: 0;         /* 下端にぴったり貼り付け */
      border-radius: 12px 12px 0 0;
    }
  }

  /* ===== Memory Veil — 購入した記憶を閲覧する時の演出 =====
     感情タグに応じた色のオーラ＋記憶瓶アニメ＋タイプライター本文。
     Web Audio で環境音も再生される。 */
  .memory-veil {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(10,6,18,0.55) 0%, rgba(0,0,0,0.94) 80%);
    backdrop-filter: blur(8px);
    opacity: 0;
    /* visibility:hidden は子要素にも伝播するので、閉じてる時に
       memory-container 等が誤ってクリックを横取りするのを防ぐ。 */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
    --aura: #c5d2e0;
  }
  .memory-veil.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s ease, visibility 0s linear 0s;
  }
  /* タグ色 */
  .memory-veil[data-emotion="work"]   { --aura: #5ea7ff; }
  .memory-veil[data-emotion="family"] { --aura: #ffa84a; }
  .memory-veil[data-emotion="friend"] { --aura: #9ed85a; }
  .memory-veil[data-emotion="worry"]  { --aura: #a06bff; }
  .memory-veil[data-emotion="happy"]  { --aura: #ff90b9; }
  .memory-veil[data-emotion="other"]  { --aura: #c5d2e0; }

  /* 背景の感情オーラ */
  .memory-veil-aura {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at center, var(--aura) 0%, transparent 55%);
    opacity: 0;
    filter: blur(60px);
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  .memory-veil.open .memory-veil-aura {
    opacity: 0.32;
    animation: aura-pulse 5s ease-in-out infinite;
  }
  @keyframes aura-pulse {
    0%, 100% { opacity: 0.22; transform: scale(1); }
    50%      { opacity: 0.38; transform: scale(1.05); }
  }

  /* 浮遊する粒子 */
  .memory-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .memory-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--aura);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px var(--aura);
  }
  .memory-veil.open .memory-particle {
    animation: particle-float linear infinite;
  }
  @keyframes particle-float {
    0%   { opacity: 0; transform: translateY(20px); }
    20%  { opacity: 0.6; }
    80%  { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-120vh); }
  }

  /* 記憶コンテナ */
  .memory-container {
    position: relative;
    width: min(88vw, 380px);
    max-height: 84vh;
    background: linear-gradient(180deg, rgba(20,9,31,0.96), rgba(10,6,18,0.99));
    border: 1px solid var(--aura);
    border-radius: 14px;
    padding: 70px 24px 22px;
    margin-top: 40px;
    box-shadow:
      0 0 40px var(--aura),
      0 0 80px rgba(0,0,0,0.6),
      inset 0 0 30px rgba(0,0,0,0.3);
    transform: scale(0.92) translateY(12px);
    opacity: 0;
    transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow-y: auto;
  }
  .memory-veil.open .memory-container {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  /* 記憶瓶（縦長アポセカリー瓶） */
  .memory-bottle {
    position: absolute;
    top: -68px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 110px;
    filter: drop-shadow(0 6px 14px var(--aura));
  }
  .memory-bottle svg { width: 100%; height: 100%; overflow: visible; }
  .bottle-body {
    fill: rgba(10, 6, 18, 0.88);
    stroke: var(--aura);
    stroke-width: 1.4;
    stroke-linejoin: round;
  }
  .bottle-glow {
    fill: var(--aura);
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
  }
  .memory-veil.open .bottle-glow {
    opacity: 0.7;
    animation: bottle-shine 2.5s ease-in-out infinite;
  }
  @keyframes bottle-shine {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.9; }
  }
  .bottle-highlight { opacity: 0; transition: opacity 0.4s ease 0.5s; }
  .memory-veil.open .bottle-highlight { opacity: 1; }
  /* コルク：開く時に少し上にずれて回転 */
  .bottle-cork-group {
    transform-origin: 30px 18px;
    transition: transform 0.55s cubic-bezier(0.34, 1.7, 0.5, 1) 0.25s;
  }
  .bottle-cork { fill: #8b6234; }
  .bottle-cork-band { fill: rgba(0,0,0,0.3); }
  .memory-veil.open .bottle-cork-group {
    transform: translate(10px, -28px) rotate(34deg);
  }
  /* 気泡 */
  .bottle-bubble {
    fill: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transition: opacity 0.4s ease 0.7s;
  }
  .memory-veil.open .bottle-bubble {
    opacity: 0.7;
    animation: bubble-rise 3s ease-in-out infinite;
  }
  .memory-veil.open .bubble-2 { animation-delay: 1s; }
  .memory-veil.open .bubble-3 { animation-delay: 2s; }
  @keyframes bubble-rise {
    0%   { transform: translateY(8px); opacity: 0; }
    30%  { opacity: 0.7; }
    80%  { opacity: 0.4; }
    100% { transform: translateY(-30px); opacity: 0; }
  }

  /* テキスト */
  .memory-author-line {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--aura);
    letter-spacing: 0.2em;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 8px;
    text-shadow: 0 0 8px var(--aura);
  }
  .memory-title-line {
    font-family: var(--mincho);
    font-size: 16px;
    color: var(--text);
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .memory-text-area {
    font-family: var(--mincho);
    font-size: 13px;
    color: var(--text);
    line-height: 2.1;
    letter-spacing: 0.05em;
    min-height: 130px;
    padding: 0 6px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .memory-text-area::after {
    content: '▍';
    color: var(--aura);
    margin-left: 2px;
    animation: blink 0.85s step-end infinite;
  }
  .memory-text-area.done::after { display: none; }
  @keyframes blink { 50% { opacity: 0; } }

  .memory-close-btn {
    margin-top: 22px;
    background: transparent;
    border: 1px solid var(--aura);
    color: var(--aura);
    padding: 9px 24px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.25em;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s, transform 0.15s;
  }
  .memory-close-btn:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
  }

  /* ===== Whiteout veil — スマホ版の遷移演出専用 =====
     画面の急な変化で酔わないよう、状態切替の瞬間に温かみのある
     パーチメント色のヴェールを 1 回だけ重ねてふわっと遷移する。
     JS側で max-width: 1024px の時のみトリガーされる。 */
  .whiteout-veil {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #f5e9d3 0%, #ede0c4 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 80;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .whiteout-veil.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }

  /* ===== Stage = full-screen panorama (static or Three.js) ===== */
  .stage {
    position: fixed;
    inset: 0;
    /* Panorama image stays the background ALWAYS — never disappears.
       Dim overlay is a separate pseudo-element that can be toggled.
       cover で常に画面いっぱいに敷き詰める（左右にスキマができないように） */
    background-image: url('assets/players-base-panorama.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #04060f;
    z-index: 1;
    overflow: hidden;
  }
  /* Mild dim overlay when phone is OPEN — keeps focus on the UI but lets the
     room remain clearly visible. Toggled by pseudo-element so the bg never
     disappears. */
  .stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(4,6,15,0.22), rgba(4,6,15,0.32));
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease;
  }
  /* Phone closed → bright room (no dim overlay) */
  body.phone-closed .stage::before { opacity: 0; }

  /* Subtle vignette overlay */
  .stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 2;
  }

  /* ===== Top HUD bar ===== */
  .hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 14px 24px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,3,9,0.85) 0%, transparent 100%);
  }
  .hud > * { pointer-events: auto; }
  /* Smooth background swap on location change */
  .stage { transition: background-image 0.6s ease; }
  /* Location label — current place name shown centered at the top */
  .location-label {
    font-family: var(--mincho);
    font-size: 18px;
    letter-spacing: 0.32em;
    color: var(--text);
    background: rgba(10, 6, 18, 0.78);
    border: 1px solid rgba(157, 78, 255, 0.45);
    border-radius: 2px;
    padding: 9px 28px;
    text-shadow: 0 0 10px rgba(157, 78, 255, 0.35);
    backdrop-filter: blur(8px);
    text-align: center;
  }

  /* ===== Status panel (turn / divergence) ===== */
  .status-panel {
    position: fixed;
    top: 60px;
    left: 24px;
    z-index: 25;
    background: rgba(20, 9, 31, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 200px;
    font-family: var(--sans);
    font-size: 12px;
  }
  .status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0;
    color: var(--text-soft);
  }
  .status-row .label {
    letter-spacing: 0.1em;
    font-size: 11px;
    text-transform: uppercase;
  }
  .status-row .value {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--text);
    font-weight: 400;
  }
  .divergence-bar {
    display: flex;
    gap: 4px;
    margin-top: 8px;
  }
  .divergence-pip {
    flex: 1;
    height: 6px;
    border-radius: 2px;
    background: rgba(120, 200, 140, 0.15);
    transition: background 0.4s, box-shadow 0.4s;
  }
  /* 乖離度ゲージは HP 型：lit = 残っている分（夢を夢として認識できている強度）。
     緑系（#7ee08a）で「健全である」サイン。 */
  .divergence-pip.lit {
    background: #7ee08a;
    box-shadow: 0 0 8px rgba(126, 224, 138, 0.65);
  }
  /* Player avatar + name above the status rows */
  .status-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(245, 233, 211, 0.12);
  }
  .player-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2a1f3e, #1a1424);
    border: 2px solid var(--neon-magenta);
    box-shadow: 0 0 12px rgba(255, 61, 139, 0.45);
  }
  .player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%; /* head sits a bit above center after circular crop */
    display: block;
  }
  .player-info { display: flex; flex-direction: column; line-height: 1.25; }
  .player-name {
    font-family: var(--mincho);
    font-size: 16px;
    color: var(--text);
    letter-spacing: 0.15em;
  }
  .player-role {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--neon-magenta);
    opacity: 0.85;
  }

  /* ===== Phone UI (right side, fixed) ===== */
  .phone {
    position: fixed;
    right: var(--safe-right);
    bottom: var(--safe-bottom);
    width: var(--phone-width);
    /* セーフゾーン縦高さに対する制限：ノッチ・下端を避けて収まる */
    height: min(600px, calc(var(--ui-max-height) - 20px));
    z-index: 15;
    /* Dark phone body (case) — silver moved to the screen itself */
    background: #1a1424;
    border: 2px solid #2a2238;
    border-radius: 32px;
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.6),
      0 0 0 6px #0a0612,
      0 0 40px rgba(157, 78, 255, 0.18);
    /* 丸角内にコンテンツを閉じ込める。これがないと中身が角からはみ出る。 */
    overflow: hidden;
    /* Flex column: notch / screen(flex:1) / tabs の3層構造を確実に固定する。
       これがないと中身が縦に流れて、下部タブが浮いてしまう。 */
    display: flex;
    flex-direction: column;
    transition: transform 0.55s cubic-bezier(0.32, 1.4, 0.65, 1);
  }
  /* Phone hidden — slides down out of view */
  body.phone-closed .phone {
    transform: translateY(calc(100% + 80px));
    pointer-events: none;
  }
  /* Phone close button — pinned to the notch */
  .phone-close-btn {
    position: absolute;
    top: 6px;
    right: 12px;
    height: 18px;
    padding: 0 9px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(78, 226, 255, 0.55);
    border-radius: 10px;
    color: #4ee2ff;
    font-size: 9px;
    font-family: var(--sans);
    letter-spacing: 0.08em;
    cursor: pointer;
    z-index: 30;
    transition: background 0.2s, transform 0.15s;
    line-height: 16px;
  }
  .phone-close-btn:hover {
    background: rgba(78, 226, 255, 0.22);
    transform: translateY(1px);
  }
  .phone.hidden {
    transform: translateY(calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
  }

  /* Phone notch / status bar */
  .phone-notch {
    height: 28px;
    background: #0a0612;
    border-radius: 30px 30px 0 0;
    position: relative;
    flex-shrink: 0;
  }
  .phone-notch::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 18px;
    background: #050309;
    border-radius: 999px;
  }
  /* 左上：時刻＋CrapWi-Fi（Clapp提供のWi-Fiネットワークという世界観の遊び） */
  .phone-notch-left {
    position: absolute;
    top: 6px;
    left: 14px;
    height: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    font-family: var(--sans);
    font-size: 10px;
    color: var(--text-soft);
    letter-spacing: 0.05em;
    line-height: 1;
  }
  .phone-status-time {
    color: var(--text-soft);
  }
  .phone-wifi {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #4ee2ff;
    text-shadow: 0 0 4px rgba(78, 226, 255, 0.45);
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .phone-wifi svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* Phone screen */
  .phone-screen {
    flex: 1;
    /* Silver-blue screen — silver base with a cool-blue cast for color */
    background: linear-gradient(180deg, #d8e2ec 0%, #b0bcc8 100%);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  .phone-screen::-webkit-scrollbar { width: 0; }

  /* Tab content switcher */
  .phone-tab { display: none; padding: 16px; }
  .phone-tab.active { display: block; animation: tabFade 0.3s ease-out; }
  @keyframes tabFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Tab bar (bottom) */
  .phone-tabs {
    height: 60px;
    /* Icon dock — saturated blue */
    background: linear-gradient(180deg, #2070c8 0%, #0e3e8a 100%);
    border-top: 1px solid rgba(120, 180, 255, 0.6);
    box-shadow:
      0 -2px 10px rgba(78, 226, 255, 0.18),
      inset 0 1px 0 rgba(180, 220, 255, 0.3);
    display: flex;
    flex-shrink: 0;
  }
  .phone-tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: rgba(220, 235, 255, 0.78);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: color 0.25s;
    padding: 0;
  }
  .phone-tab-btn:hover { color: #ffffff; }
  .phone-tab-btn.active {
    color: #fff8a8;
    text-shadow: 0 0 6px rgba(255, 248, 168, 0.7);
  }
  .phone-tab-btn .icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.6;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* ===== 誘導バッジ：タブ右上の「！」（2026-06-13）=====
     _demo_unread_v2.html の見た目を本実装に反映。
     phone-tab-btn に .has-unread を付けると赤丸「！」が表示される。 */
  .phone-tab-btn.has-unread::after {
    content: '!';
    position: absolute;
    top: 6px;
    right: 22%;
    width: 14px;
    height: 14px;
    background: #ff3838;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(255, 56, 56, 0.7);
    font-family: sans-serif;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
  }
  /* プロフィール「確認する」ボタン右上の数字バッジ */
  .inventory-open-btn { position: relative; }
  .inventory-open-btn .unread-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff3838;
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 0 5px rgba(255, 56, 56, 0.6);
    font-family: sans-serif;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
  }
  .inventory-open-btn.has-unread-count .unread-count-badge { display: flex; }
  /* 掲示板「記憶を購入」ボタン右上の数字バッジ */
  .board-menu-btn { position: relative; }
  .board-menu-btn .unread-count-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #ff3838;
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 0 6px rgba(255, 56, 56, 0.7);
    font-family: sans-serif;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
  }
  .board-menu-btn.has-unread-count .unread-count-badge { display: flex; }
  /* マップの場所アイコン（SVG shop-icon-group）に未訪問時の「！」を重ねるためのオーバーレイ層 */
  .map-svg-wrap { position: relative; }
  .map-unread-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }
  .map-unread-mark {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #ff3838;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(255, 56, 56, 0.75);
    font-family: sans-serif;
    line-height: 1;
    transform: translate(-50%, -50%);
  }

  /* Map tab — city tabs */
  .map-cities {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
  }
  .city-btn {
    flex: 1;
    background: linear-gradient(180deg, #2a2238 0%, #1a1424 100%);
    border: 1px solid #4a3f6e;
    color: #e8dcb0;
    font-family: var(--mincho);
    font-size: 10px;
    padding: 7px 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .map-region { cursor: pointer; transition: all 0.2s; }
  .map-region:hover { filter: brightness(1.3); }
  .map-region-locked { cursor: not-allowed; }
  .map-region-locked:hover { filter: none; }
  .city-btn:hover { color: var(--text); border-color: var(--neon-purple); }
  .city-btn.active {
    background: linear-gradient(180deg, rgba(255,61,139,0.55) 0%, rgba(157,78,255,0.55) 100%);
    color: #fff;
    border-color: var(--neon-magenta);
    box-shadow: 0 0 8px rgba(255, 61, 139, 0.45);
  }
  /* ★2026-06-10：街解禁システム — 未解禁街のグレー表示 */
  .city-btn.locked {
    opacity: 0.35;
    cursor: not-allowed;
    color: #6b6680;
    background: linear-gradient(180deg, #1a1424 0%, #0f0a18 100%);
    border-color: #3a3050;
    position: relative;
  }
  .city-btn.locked:hover {
    color: #6b6680;
    border-color: #3a3050;
    filter: none;
  }
  .city-btn.locked::after {
    content: '🔒';
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 8px;
    opacity: 0.6;
  }

  .map-title {
    font-family: var(--mincho);
    font-size: 16px;
    color: var(--text);
    text-align: center;
    margin: 0 0 4px;
    letter-spacing: 0.1em;
  }
  .map-subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    margin: 0 0 14px;
    letter-spacing: 0.1em;
  }

  /* Blueprint-style mini map */
  .map-svg-wrap {
    background: rgba(13, 5, 23, 0.6);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .map-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .map-svg .map-bg-fill { fill: url(#map-grad); }
  .map-svg .map-grid { stroke: rgba(157, 78, 255, 0.18); stroke-width: 0.5; fill: none; }
  .map-svg .map-road { stroke: rgba(245, 233, 211, 0.35); stroke-width: 1.5; fill: none; }
  /* Shop icons on the map */
  .map-svg .shop-icon-hit {
    fill: transparent;
    cursor: pointer;
  }
  .map-svg .shop-icon-group { transition: filter 0.25s, transform 0.2s; transform-origin: center; transform-box: fill-box; }
  .map-svg .shop-icon-group:hover { filter: drop-shadow(0 0 6px var(--neon-magenta)) brightness(1.25); }
  .map-svg .shop-icon-group.selected { filter: drop-shadow(0 0 10px var(--neon-magenta)) brightness(1.4); }
  .map-svg .map-label {
    fill: var(--text);
    font-family: var(--mincho);
    font-size: 10px;
    pointer-events: none;
  }

  /* Shop detail panel (below map) */
  .shop-detail {
    /* Article column — dark purple panel w/ subtle magenta glow */
    background: linear-gradient(180deg,
      rgba(42, 18, 62, 0.7) 0%,
      rgba(22, 8, 42, 0.7) 100%);
    border: 1px solid rgba(157, 78, 255, 0.4);
    border-radius: 10px;
    padding: 14px 16px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow:
      0 0 16px rgba(157, 78, 255, 0.10) inset,
      0 0 12px rgba(157, 78, 255, 0.06);
  }
  .shop-detail.empty {
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-family: var(--mincho);
    font-size: 12px;
    text-align: center;
    padding: 28px 16px;
  }
  .shop-detail.has-content { border-color: var(--neon-magenta); }
  .shop-detail .sd-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  .shop-detail .sd-name {
    font-family: var(--mincho);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }
  .shop-detail .sd-tag {
    font-family: var(--serif);
    font-style: italic;
    font-size: 10px;
    color: var(--neon-magenta);
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .shop-detail .sd-desc {
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.7;
    margin: 0;
  }
  .shop-detail .sd-npc {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }
  .shop-detail .sd-go {
    align-self: flex-end;
    background: var(--neon-magenta);
    color: #0a0612;
    border: none;
    font-family: var(--mincho);
    font-size: 11px;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.12em;
    transition: transform 0.15s, background 0.25s;
    margin-top: 4px;
  }
  .shop-detail .sd-go:hover { transform: scale(1.05); background: var(--text); }

  /* オブリヴィア全体マップ表示中は「アイコンをタップして詳細を表示」の枠を隠す
     （ショップタップではなく街エリアタップで動くので使わない） */
  body.on-oblivia #shopDetail {
    display: none;
  }

  /* ===== Profile tab (player status hub) =====
     旧 status-panel を完全に取り込んだスマホ内プロフィール画面。
     プレイヤー情報・ターン/乖離度・持ち物・同行者を一画面に集約。 */
  /* プロフィールタブだけ白系統（紙の感触）に。シナリオ本体のダークな世界観の中で、
     プレイヤーの「現実側」を象徴する明るい紙片のイメージ。
     テキスト色はタブ内で深い紫系に上書きして、白背景でも読みやすくする。 */
  /* ★B案（2026-06-19）：ダーク・世界観統一。パーティー→ステータス→持ち物→中断を1画面に。 */
  .phone-tab[data-tab="profile"] {
    padding: 14px 14px 18px;
    background: linear-gradient(180deg, #1a1426 0%, #110d1a 100%);
    color: #e8dcc6;
    min-height: 100%;
  }
  /* パーティー：プレイヤー＋同行者を横並びの丸アイコンで */
  .party-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .party-row .companion-list {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 0;
  }
  .party-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 58px;
  }
  .party-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(94, 202, 165, 0.6);
    box-shadow: 0 0 8px rgba(94, 202, 165, 0.28);
    background: rgba(94, 202, 165, 0.08);
  }
  .party-avatar.is-player {
    border-color: rgba(224, 137, 78, 0.75);
    box-shadow: 0 0 8px rgba(224, 137, 78, 0.35);
  }
  .party-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
  }
  .party-name {
    font-family: var(--mincho);
    font-size: 11px;
    color: #e8dcc6;
    letter-spacing: 0.04em;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
  /* ステータス：横3チップ（コイン／ターン／乖離度） */
  .status-chips {
    display: flex;
    gap: 6px;
  }
  .status-chip {
    flex: 1;
    min-width: 0;
    background: rgba(30, 23, 48, 0.7);
    border: 1px solid rgba(78, 226, 255, 0.14);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
  }
  .chip-label {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    color: #9a8fb5;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
  }
  .chip-val {
    font-family: var(--mincho);
    font-size: 14px;
    color: #e8dcc6;
    letter-spacing: 0.04em;
  }
  .status-chip #statusCoins { color: #e0b050; }
  .chip-pips {
    display: inline-flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
    height: 16px;
  }
  .chip-pips i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3a3550;
    display: inline-block;
  }
  .chip-pips i.on { background: #5dcaa5; }
  /* プレイヤーヘッダー（アバター＋名前） */
  .profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(245, 233, 211, 0.18);
    cursor: pointer;
  }
  .profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--neon-magenta);
    box-shadow: 0 0 12px rgba(255, 61, 139, 0.45);
  }
  .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
  }
  .profile-name-block {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
  }
  .profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .profile-name {
    font-family: var(--mincho);
    font-size: 18px;
    color: var(--text);
    letter-spacing: 0.15em;
  }
  .status-detail-btn {
    background: rgba(78, 226, 255, 0.12);
    border: 1px solid rgba(78, 226, 255, 0.55);
    color: var(--neon-cyan);
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
  }
  .status-detail-btn:hover {
    background: rgba(78, 226, 255, 0.25);
    color: #fff;
  }
  .profile-role {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.25em;
    color: var(--neon-magenta);
    opacity: 0.85;
    margin-top: 2px;
  }
  /* 持ち物：プロフィール上の開くボタン */
  .inventory-open-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(157, 78, 255, 0.12), rgba(91, 58, 120, 0.20));
    border: 1px solid rgba(157, 78, 255, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, border-color 0.2s;
  }
  .inventory-open-btn:hover {
    background: linear-gradient(180deg, rgba(157, 78, 255, 0.22), rgba(91, 58, 120, 0.30));
    border-color: rgba(157, 78, 255, 0.65);
  }
  .inventory-open-count {
    font-family: var(--mincho);
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .inventory-open-arrow {
    font-size: 10px;
    color: var(--neon-purple);
    letter-spacing: 0.18em;
  }

  /* ===== Info Overlay（status / inventory モーダル共通の骨格）===== */
  .info-overlay {
    position: fixed;
    inset: 0;
    z-index: 185;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.88) 100%);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .info-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }
  /* ===== ミッション・アナウンス モーダル（2026-06-16）=====
     新ミッション出現／ギリギリ警告／達成／失敗の共通通知。
     tone-new / tone-urgent / tone-success / tone-fail で色を切替。 */
  .mission-announce-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .mission-announce-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }
  .mission-announce-card {
    width: min(92vw, 460px);
    padding: 28px 32px 24px;
    background: linear-gradient(180deg, rgba(8,12,22,0.96), rgba(4,6,14,0.98));
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    box-shadow: 0 0 32px rgba(0,0,0,0.6), 0 0 60px rgba(255,184,78,0.05);
    color: #f5e9d3;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    text-align: center;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.35s ease;
  }
  .mission-announce-overlay.open .mission-announce-card { transform: scale(1); opacity: 1; }
  .mission-announce-title {
    font-size: 11px;
    letter-spacing: 0.32em;
    color: #ffb84e;
    margin-bottom: 14px;
    font-family: monospace;
    text-transform: none;
  }
  .mission-announce-body {
    font-size: 20px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin-bottom: 12px;
    color: #f5e9d3;
  }
  /* ★2026-07-07：クリア条件（タイトル直下） */
  .mission-announce-condition {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: rgba(245,233,211,0.92);
    margin-bottom: 11px;
  }
  .mission-announce-detail {
    font-size: 12.5px;
    letter-spacing: 0.08em;
    color: rgba(245,233,211,0.7);
    line-height: 1.65;
    margin-bottom: 11px;
  }
  /* ★2026-07-07：失敗時の注意書き（黄色） */
  .mission-announce-warn {
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: #ffdf5e;
    margin-bottom: 14px;
  }
  /* ★2026-07-07：報酬は枠なしのテキスト表示に変更（他の行と左右中央で揃える） */
  .mission-announce-reward {
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #ffb84e;
    margin-bottom: 22px;
    display: block;
  }
  /* ★2026-07-07：OKボタンを刷新（グラデーション＋角丸＋影） */
  .mission-announce-ok {
    margin-top: 4px;
    padding: 13px 48px;
    min-width: 170px;
    background: linear-gradient(180deg, rgba(255,184,78,0.20), rgba(255,184,78,0.07));
    border: 1px solid rgba(255,184,78,0.55);
    border-radius: 8px;
    color: #ffe4bc;
    font-family: monospace;
    font-size: 13px;
    letter-spacing: 0.3em;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 14px rgba(0,0,0,0.45);
  }
  .mission-announce-ok:hover {
    background: linear-gradient(180deg, rgba(255,184,78,0.32), rgba(255,184,78,0.15));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  }
  .mission-announce-ok:active { transform: translateY(0); }
  /* tone別の色（border+title+reward+okボタン） */
  .mission-announce-overlay.tone-new .mission-announce-card { border-color: rgba(78,226,255,0.45); box-shadow: 0 0 32px rgba(0,0,0,0.6), 0 0 60px rgba(78,226,255,0.12); }
  .mission-announce-overlay.tone-new .mission-announce-title { color: #4ee2ff; }
  .mission-announce-overlay.tone-new .mission-announce-reward { color: #4ee2ff; }
  .mission-announce-overlay.tone-new .mission-announce-ok { color: #c8e8ff; border-color: rgba(78,226,255,0.55); background: linear-gradient(180deg, rgba(78,226,255,0.22), rgba(78,226,255,0.08)); }
  .mission-announce-overlay.tone-new .mission-announce-ok:hover { background: linear-gradient(180deg, rgba(78,226,255,0.34), rgba(78,226,255,0.16)); color: #fff; }

  .mission-announce-overlay.tone-urgent .mission-announce-card { border-color: rgba(255,140,80,0.55); box-shadow: 0 0 32px rgba(0,0,0,0.6), 0 0 60px rgba(255,140,80,0.15); }
  .mission-announce-overlay.tone-urgent .mission-announce-title { color: #ff8c50; }
  .mission-announce-overlay.tone-urgent .mission-announce-reward { color: #ffb784; }
  .mission-announce-overlay.tone-urgent .mission-announce-ok { color: #ffd2b0; border-color: rgba(255,140,80,0.55); background: linear-gradient(180deg, rgba(255,140,80,0.24), rgba(255,140,80,0.09)); }
  .mission-announce-overlay.tone-urgent .mission-announce-ok:hover { background: linear-gradient(180deg, rgba(255,140,80,0.36), rgba(255,140,80,0.17)); color: #fff; }

  .mission-announce-overlay.tone-success .mission-announce-card { border-color: rgba(120,220,140,0.5); box-shadow: 0 0 32px rgba(0,0,0,0.6), 0 0 60px rgba(120,220,140,0.13); }
  .mission-announce-overlay.tone-success .mission-announce-title { color: #78dc8c; }
  .mission-announce-overlay.tone-success .mission-announce-reward { color: #aef0bc; }
  .mission-announce-overlay.tone-success .mission-announce-ok { color: #c8f0d4; border-color: rgba(120,220,140,0.55); background: linear-gradient(180deg, rgba(120,220,140,0.24), rgba(120,220,140,0.09)); }
  .mission-announce-overlay.tone-success .mission-announce-ok:hover { background: linear-gradient(180deg, rgba(120,220,140,0.36), rgba(120,220,140,0.17)); color: #fff; }

  .mission-announce-overlay.tone-fail .mission-announce-card { border-color: rgba(220,80,80,0.55); box-shadow: 0 0 32px rgba(0,0,0,0.6), 0 0 60px rgba(220,80,80,0.15); }
  .mission-announce-overlay.tone-fail .mission-announce-title { color: #dc5050; }
  .mission-announce-overlay.tone-fail .mission-announce-reward { color: #ff9090; }
  .mission-announce-overlay.tone-fail .mission-announce-ok { color: #f5b8b8; border-color: rgba(220,80,80,0.6); background: linear-gradient(180deg, rgba(220,80,80,0.26), rgba(220,80,80,0.10)); }
  .mission-announce-overlay.tone-fail .mission-announce-ok:hover { background: linear-gradient(180deg, rgba(220,80,80,0.38), rgba(220,80,80,0.18)); color: #fff; }
  /* status-overlay は dialogue-overlay と同じ立ち絵レイアウトを使う */
  .status-overlay .dialogue-portrait {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.4s ease;
  }
  .status-overlay.open .dialogue-portrait {
    transform: translateY(0);
    opacity: 1;
  }
  .status-overlay .dialogue-box {
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    transition: all 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) 0.1s;
  }
  .status-overlay.open .dialogue-box {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  /* 状態詳細の表組み */
  .status-info-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
  }
  .status-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-soft);
    letter-spacing: 0.1em;
  }
  .status-info-row .k { text-transform: uppercase; letter-spacing: 0.15em; }
  .status-info-row .v {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--text);
  }
  .status-message {
    font-family: var(--rounded);
    font-size: 13px;
    line-height: 1.85;
    color: var(--neon-cyan);
    background: rgba(78, 226, 255, 0.07);
    border-left: 2px solid rgba(78, 226, 255, 0.55);
    padding: 8px 12px;
    margin: 10px 0 4px;
    border-radius: 0 4px 4px 0;
    letter-spacing: 0.04em;
  }

  /* ===== 五感パネル（夢の中での覚醒状態を視覚化） =====
     dormant=休眠／awake=覚醒／critical=臨界（暴走）の3段階。
     乖離度が下がるほど多くの感覚が覚醒し、臨界状態（0〜1）で警告色＋脈動。 */
  .senses-grid {
    display: flex;
    gap: 6px;
    margin: 12px 0 8px;
  }
  .sense-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 6px;
    border-radius: 6px;
    border: 1px solid rgba(120, 200, 140, 0.2);
    background: rgba(10, 6, 18, 0.45);
    transition: all 0.3s ease;
  }
  .sense-cell .sense-icon {
    font-family: var(--mincho);
    font-size: 20px;
    color: rgba(180, 180, 180, 0.4);
    transition: color 0.3s ease;
    line-height: 1;
  }
  .sense-cell .sense-label {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    color: var(--text-dim);
  }
  /* 夢の中で現実と同じように機能している感覚＝緑 */
  .sense-cell.awake {
    border-color: rgba(126, 224, 138, 0.55);
    background: rgba(126, 224, 138, 0.10);
  }
  .sense-cell.awake .sense-icon { color: #7ee08a; }
  .sense-cell.awake .sense-label { color: #7ee08a; }
  /* 臨界＝視覚・聴覚が異常鮮明な状態。マゼンタで警告。 */
  .sense-cell.critical {
    border-color: rgba(245, 78, 162, 0.7);
    background: rgba(245, 78, 162, 0.15);
    animation: sensePulse 1.4s ease-in-out infinite alternate;
  }
  .sense-cell.critical .sense-icon { color: var(--neon-magenta); }
  .sense-cell.critical .sense-label { color: var(--neon-magenta); }
  @keyframes sensePulse {
    from { box-shadow: 0 0 8px rgba(245, 78, 162, 0.25); }
    to   { box-shadow: 0 0 18px rgba(245, 78, 162, 0.7); }
  }

  /* ===== Inventory Overlay（持ち物モーダル）===== */
  /* ★2026-06-19：持ち物を見ている間はスマホUIを隠す（被って見づらいため） */
  body.inventory-overlay-open #phone { opacity: 0 !important; pointer-events: none !important; }
  .inventory-modal-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%) scale(0.96);
    /* ★2026-06-19：横長すぎないよう適正幅に抑える（選択肢の枠と揃える） */
    width: min(92vw, 460px);
    max-height: 82vh;
    background: linear-gradient(180deg, rgba(20, 9, 31, 0.97), rgba(10, 6, 18, 0.99));
    border: 1px solid rgba(157, 78, 255, 0.55);
    border-radius: 14px;
    padding: 18px 22px 16px;
    box-shadow: 0 0 30px rgba(157, 78, 255, 0.22), 0 14px 38px rgba(0,0,0,0.65);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
  }
  .inventory-overlay.open .inventory-modal-stage {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .inventory-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(157, 78, 255, 0.3);
  }
  .inventory-modal-title {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.25em;
    color: var(--neon-purple);
    text-transform: uppercase;
  }
  .inventory-overlay .memory-list {
    overflow-y: auto;
    max-height: calc(82vh - 70px);
    padding-right: 4px;
  }
  /* モーダル内では memory-card を一回り大きく */
  .inventory-overlay .memory-card {
    padding: 12px 14px;
  }
  .inventory-overlay .memory-card-name { font-size: 13px; }
  .inventory-overlay .memory-card-summary { font-size: 12px; }
  /* 操作説明モーダルのスクロール可能ボディ */
  .info-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: calc(82vh - 70px);
    padding: 4px 6px 8px;
    padding-right: 10px;  /* スクロールバー回避 */
    font-family: 'Noto Sans JP', sans-serif;
    color: #e0e0e8;
    line-height: 1.85;
    font-size: 13px;
  }
  @media (max-width: 700px), (max-height: 500px) {
    .inventory-modal-stage {
      width: min(94vw, 460px);
      max-height: 84vh;
      padding: 14px 16px 12px;
    }
    .info-modal-body {
      max-height: calc(84vh - 64px);
    }
  }

  /* セクション共通 */
  .profile-section {
    margin-bottom: 14px;
  }
  .profile-section-label {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    color: var(--neon-cyan);
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.8;
  }
  /* ステータス行 */
  .profile-status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 5px 0;
    color: var(--text-soft);
    font-family: var(--sans);
    font-size: 11px;
  }
  .profile-status-key {
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .profile-status-val {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--text);
    font-weight: 400;
  }

  /* 持ち物（購入した記憶）リスト */
  .memory-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .inventory-empty {
    text-align: center;
    color: var(--text-dim);
    font-family: var(--mincho);
    font-size: 11px;
    padding: 12px 0;
    letter-spacing: 0.1em;
    background: rgba(10, 6, 18, 0.45);
    border: 1px solid rgba(157, 78, 255, 0.18);
    border-radius: 6px;
  }
  .memory-card {
    background: linear-gradient(180deg, rgba(157, 78, 255, 0.12), rgba(91, 58, 120, 0.20));
    border: 1px solid rgba(157, 78, 255, 0.4);
    border-radius: 6px;
    padding: 9px 11px;
    position: relative;
  }
  .memory-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  .memory-card-name {
    font-family: var(--mincho);
    font-size: 12px;
    color: var(--text);
    letter-spacing: 0.08em;
  }
  .memory-card-emotion {
    font-family: var(--sans);
    font-size: 8.5px;
    color: var(--memory-glow);
    background: rgba(201, 163, 255, 0.15);
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.1em;
  }
  .memory-card-summary {
    font-family: var(--mincho);
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.5;
    margin-bottom: 6px;
  }
  .memory-card-body {
    font-family: var(--mincho);
    font-size: 10.5px;
    color: var(--text);
    line-height: 1.8;
    padding: 8px 10px;
    background: rgba(10, 6, 18, 0.55);
    border-left: 2px solid var(--neon-purple);
    border-radius: 3px;
    margin-bottom: 6px;
  }
  .memory-card-actions {
    display: flex;
    gap: 6px;
  }
  .memory-card-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(157, 78, 255, 0.4);
    color: var(--text);
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .memory-card-btn:hover { background: rgba(157, 78, 255, 0.25); }

  /* ===== 持ち物：セクションラベル ===== */
  .inventory-section-label {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: rgba(255, 216, 74, 0.85);
    border-left: 3px solid rgba(255, 216, 74, 0.7);
    padding-left: 10px;
    margin: 16px 0 10px;
  }
  .inventory-section-label:first-child { margin-top: 4px; }

  /* ===== 飲み物リスト（タイトル一覧） ===== */
  .drink-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .drink-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(20, 12, 30, 0.55);
    border: 1px solid rgba(245, 233, 211, 0.18);
    border-radius: 8px;
    color: rgba(245, 233, 211, 0.95);
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
  }
  .drink-item:hover {
    background: rgba(40, 28, 60, 0.85);
    border-color: rgba(255, 216, 74, 0.55);
    transform: translateX(2px);
  }
  .drink-icon {
    font-size: 20px;
    line-height: 1;
  }
  .drink-name { flex: 1; }

  /* ===== 飲み物：詳細モーダル ===== */
  .drink-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 220;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .drink-detail-modal.open { display: flex; }
  .drink-detail-card {
    position: relative;
    background: linear-gradient(180deg, #1a0e2e 0%, #0e0820 100%);
    border: 1px solid rgba(245, 233, 211, 0.22);
    border-radius: 14px;
    padding: 20px;
    max-width: 600px;
    width: 100%;
    max-height: calc(var(--ui-max-height) - 20px);
    overflow-y: auto;
    display: flex;
    gap: 18px;
    color: var(--text);
  }
  @media (max-width: 700px), (max-height: 500px) {
    .drink-detail-card {
      flex-direction: column;
      padding: 14px;
      gap: 12px;
    }
  }
  .drink-detail-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: rgba(245, 233, 211, 0.7);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 1;
  }
  .drink-detail-close:hover {
    background: rgba(245, 233, 211, 0.1);
    color: #fff;
  }
  .drink-detail-img {
    width: 140px;
    max-height: 360px;
    object-fit: contain;
    flex-shrink: 0;
    align-self: center;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
  }
  @media (max-width: 700px), (max-height: 500px) {
    .drink-detail-img {
      width: auto;
      max-height: 200px;
    }
  }
  .drink-detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .drink-detail-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 22px;
    letter-spacing: 0.1em;
    color: #ffe680;
    margin-bottom: 4px;
  }
  .drink-detail-desc {
    font-size: 14px;
    line-height: 1.85;
    color: rgba(245, 233, 211, 0.92);
  }
  .drink-detail-use {
    font-size: 12px;
    color: rgba(78, 226, 255, 0.85);
    padding: 8px 12px;
    background: rgba(78, 226, 255, 0.08);
    border-left: 3px solid rgba(78, 226, 255, 0.5);
    border-radius: 4px;
    margin-top: 6px;
  }
  .drink-detail-action {
    margin-top: 12px;
    padding: 10px 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #80c8e0 0%, #4e9bb8 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 18px rgba(128, 200, 224, 0.25);
    transition: all 0.2s;
  }
  .drink-detail-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 24px rgba(128, 200, 224, 0.45);
  }
  .memory-effect-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 174, 61, 0.85);
    color: #2a1f3a;
    font-family: var(--sans);
    font-size: 8px;
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* 同行者リスト */
  .companion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .companion-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10, 6, 18, 0.55);
    border: 1px solid rgba(78, 226, 255, 0.25);
    border-radius: 8px;
    padding: 8px 10px;
  }
  .companion-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid rgba(78, 226, 255, 0.55);
    background: rgba(78, 226, 255, 0.08);
  }
  .companion-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }
  .companion-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }
  .companion-name {
    font-family: var(--mincho);
    font-size: 13px;
    color: var(--text);
    letter-spacing: 0.08em;
  }
  .companion-empty {
    text-align: center;
    color: var(--text-dim);
    font-family: var(--mincho);
    font-size: 11px;
    padding: 12px 0;
    letter-spacing: 0.1em;
  }

  /* 乖離度バーはステータスセクション内に再配置されるので、サイズだけ調整 */
  .phone-tab[data-tab="profile"] .divergence-bar {
    margin-top: 6px;
  }

  /* Board tab — placeholder */
  .placeholder {
    text-align: center;
    color: var(--text-dim);
    font-family: var(--mincho);
    font-size: 13px;
    padding: 80px 20px;
    line-height: 2;
  }
  .placeholder .ph-icon {
    font-size: 28px;
    margin-bottom: 12px;
    opacity: 0.4;
  }

  /* ===== Board tab — Memory bulletin board ===== */
  /* 掲示板タブは phone-screen にぴったり収まる absolute レイアウト。
     縦画面に切り替わった時に、ヘッダ/リスト/フッタが綺麗にスタックする。 */
  .phone-tab[data-tab="board"] {
    position: absolute;
    inset: 0;
    padding: 0;
    background: linear-gradient(180deg, #e9efe2 0%, #d4dccc 100%);
    color: #2a1f3a;
    display: none;
    flex-direction: column;
  }
  .phone-tab[data-tab="board"].active { display: flex; }
  .board-header {
    padding: 14px 18px 10px;
    text-align: center;
    background: linear-gradient(180deg, #5b3a78 0%, #3d2654 100%);
    color: #f5e9d3;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.2);
  }
  .board-title {
    font-family: var(--mincho);
    font-size: 17px;
    letter-spacing: 0.3em;
    font-weight: 600;
    margin-bottom: 2px;
  }
  .board-subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: 9px;
    letter-spacing: 0.18em;
    opacity: 0.75;
    margin-bottom: 6px;
  }
  .board-meta {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.12em;
    opacity: 0.85;
  }
  .board-meta span {
    color: var(--neon-amber);
    font-weight: 700;
  }
  .board-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .board-list::-webkit-scrollbar { width: 4px; }
  .board-list::-webkit-scrollbar-thumb { background: rgba(91, 58, 120, 0.3); border-radius: 2px; }
  .board-post {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(91, 58, 120, 0.25);
    border-radius: 8px;
    padding: 11px 12px;
    box-shadow: 0 2px 6px rgba(45, 25, 70, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .board-post:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(45, 25, 70, 0.15);
  }
  .board-post-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  .board-post-type {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.15em;
    padding: 2px 7px;
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
  }
  .board-post-type.buy   { background: #5b3a78; }      /* 募集（買取） */
  .board-post-type.sell  { background: #a83e6e; }      /* 売却 */
  .board-post-type.info  { background: #6e7a8a; }      /* お知らせ */
  .board-post-price {
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 600;
    color: #5b3a78;
    letter-spacing: 0.05em;
  }
  .board-post-title {
    font-family: var(--mincho);
    font-size: 13px;
    color: #2a1f3a;
    line-height: 1.5;
    margin-bottom: 4px;
    font-weight: 500;
  }
  .board-post-body {
    font-family: var(--sans);
    font-size: 10px;
    color: #4a3a5f;
    line-height: 1.6;
    margin-bottom: 4px;
  }
  .board-post-footer {
    display: flex;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 8.5px;
    color: #7a6a8a;
    letter-spacing: 0.08em;
  }
  .board-footer {
    padding: 8px 14px;
    background: rgba(91, 58, 120, 0.08);
    border-top: 1px solid rgba(91, 58, 120, 0.18);
    text-align: center;
    font-family: var(--sans);
    font-size: 9px;
    color: #5b3a78;
    letter-spacing: 0.12em;
    flex-shrink: 0;
  }

  /* ===== Board views（メニュー / 購入 / 投稿 / 結果） ===== */
  .board-view {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .board-view.hidden { display: none; }
  .board-view::-webkit-scrollbar { width: 4px; }
  .board-view::-webkit-scrollbar-thumb { background: rgba(91, 58, 120, 0.3); border-radius: 2px; }

  /* メニュー 3択ボタン */
  .board-menu-btn {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(91, 58, 120, 0.3);
    border-left: 3px solid;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: var(--sans);
    color: #2a1f3a;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(45, 25, 70, 0.08);
  }
  .board-menu-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 25, 70, 0.18);
  }
  .board-menu-btn.buy           { border-left-color: #5b3a78; }
  .board-menu-btn.sell-public   { border-left-color: #a83e6e; }
  .board-menu-btn.sell-limited  { border-left-color: #6e7a8a; }
  /* 1ターン1投稿の上限到達後の OFF 表示 */
  .board-menu-btn.posted {
    background: rgba(30, 20, 40, 0.55);
    border-color: rgba(245, 233, 211, 0.18);
    border-left-color: rgba(245, 233, 211, 0.25);
    color: rgba(245, 233, 211, 0.45);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    position: relative;
  }
  .board-menu-btn.posted:hover { transform: none; box-shadow: none; }
  .board-menu-btn.posted .bm-icon { color: rgba(245, 233, 211, 0.35); }
  .board-menu-btn.posted .bm-sub { color: rgba(245, 233, 211, 0.4); }
  .board-menu-btn.posted::after {
    content: '行動済み';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: rgba(245, 233, 211, 0.55);
    background: rgba(10, 6, 18, 0.65);
    border: 1px solid rgba(245, 233, 211, 0.3);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
  }
  .board-menu-btn .bm-icon {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b3a78;
  }
  .board-menu-btn .bm-icon svg { width: 28px; height: 28px; }
  .board-menu-btn.sell-public .bm-icon  { color: #a83e6e; }
  .board-menu-btn.sell-limited .bm-icon { color: #6e7a8a; }
  .board-menu-btn .bm-main {
    font-family: var(--mincho);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .board-menu-btn .bm-sub {
    font-size: 9.5px;
    color: #6b5b8a;
    letter-spacing: 0.05em;
    margin-top: 2px;
  }
  /* ============================================================
     ★ 乖離度段階別フィルター（2026-06-08 実装）
     ------------------------------------------------------------
     body[data-divergence="N"] を見て、シーン要素（背景・立ち絵）
     のみに段階フィルターを適用する。
     【除外】テロップ／ボタン／入力欄／タグ／ミニゲームUI には適用しない。
     ============================================================ */
  :root {
    --divergence-filter: none;
  }
  body[data-divergence="5"] { --divergence-filter: none; }
  body[data-divergence="4"] {
    --divergence-filter: brightness(0.92) hue-rotate(12deg) saturate(0.88);
  }
  body[data-divergence="3"] {
    --divergence-filter: brightness(0.84) hue-rotate(30deg) saturate(0.72) contrast(1.05);
  }
  body[data-divergence="2"] {
    --divergence-filter: brightness(0.72) hue-rotate(180deg) saturate(0.58) contrast(1.1);
  }
  body[data-divergence="1"] {
    --divergence-filter: brightness(0.58) hue-rotate(220deg) saturate(0.42) contrast(1.2) invert(0.08);
  }

  /* 適用先（シーン要素：背景レイヤー＋立ち絵）。UI／テロップ／ボタンは除外。
     transition は急変を避けるため 1.2s でゆっくり切替。 */
  .intro-bg,
  .gate-talk-bg,
  .intro-portrait,
  .intro-portrait-left,
  .intro-portrait-mid,
  .intro-portrait-mid2,
  .dialogue-portrait,
  .daily-portrait,
  .gate-talk-portrait {
    filter: var(--divergence-filter);
    transition: filter 1.2s ease;
  }

  /* RGB分離（乖離度減少の瞬間に一瞬発火）。triggerWorldBreakPenalty 経由 */
  body.fx-divergence-rgb .intro-bg,
  body.fx-divergence-rgb .gate-talk-bg,
  body.fx-divergence-rgb .intro-portrait,
  body.fx-divergence-rgb .intro-portrait-left,
  body.fx-divergence-rgb .intro-portrait-mid,
  body.fx-divergence-rgb .intro-portrait-mid2,
  body.fx-divergence-rgb .dialogue-portrait,
  body.fx-divergence-rgb .daily-portrait,
  body.fx-divergence-rgb .gate-talk-portrait {
    animation: divergence-rgb-split 0.55s ease-out;
  }
  @keyframes divergence-rgb-split {
    0%, 100% { filter: var(--divergence-filter); }
    30% {
      filter: var(--divergence-filter)
              drop-shadow(3px 0 0 rgba(255,80,80,0.85))
              drop-shadow(-3px 0 0 rgba(80,200,255,0.85));
    }
    60% {
      filter: var(--divergence-filter)
              drop-shadow(-2px 0 0 rgba(255,80,80,0.75))
              drop-shadow(2px 0 0 rgba(80,200,255,0.75));
    }
  }

  /* ===== 乖離度0：ゲームオーバー画面 ===== */
  .gameover-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1.5s ease-in, visibility 0s linear 1.5s;
  }
  body[data-divergence="0"] .gameover-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 1.5s ease-in, visibility 0s linear 0s;
  }
  .gameover-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    color: #ff5050;
    font-family: 'EB Garamond', 'Times New Roman', serif;
    font-size: clamp(40px, 9vw, 84px);
    letter-spacing: 0.3em;
    text-align: center;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255, 80, 80, 0.5);
  }
  body[data-divergence="0"] .gameover-text {
    animation: gameover-text-in 3s ease-in 1s forwards;
  }
  @keyframes gameover-text-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .gameover-text .small {
    display: block;
    font-size: 0.35em;
    letter-spacing: 0.25em;
    margin-top: 1em;
    color: rgba(255, 80, 80, 0.75);
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  }

  /* ===== 乖離度0 通知（2026-07-08）：背景なし・OKでBAD END4へ ===== */
  .divzero-overlay {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: #04040a;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  }
  .divzero-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s ease, visibility 0s linear 0s;
  }
  .divzero-card {
    text-align: center;
    padding: 0 24px;
    max-width: min(92vw, 560px);
  }
  .divzero-text {
    color: #f0e6d8;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    font-size: clamp(18px, 3.4vw, 26px);
    letter-spacing: 0.08em;
    line-height: 1.9;
    margin-bottom: 40px;
  }
  .divzero-ok {
    padding: 13px 52px;
    min-width: 180px;
    background: linear-gradient(180deg, rgba(220,80,80,0.26), rgba(220,80,80,0.10));
    border: 1px solid rgba(220,80,80,0.6);
    border-radius: 8px;
    color: #f5b8b8;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 0.3em;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 14px rgba(0,0,0,0.5);
  }
  .divzero-ok:hover {
    background: linear-gradient(180deg, rgba(220,80,80,0.4), rgba(220,80,80,0.2));
    color: #fff;
    transform: translateY(-1px);
  }
  .divzero-ok:active { transform: translateY(0); }

  /* ===== 門前自由会話オーバーレイ（2026-06-08 追加）=====
     エイム会話で「門番に会いたい／門前に行きたい」等の自由回答が入った時に
     遷移する画面。背景=オブリヴィアの門、立ち絵=門番、画面下テロップ＋自由入力。
     daily-overlay と同階層（z-index 200）、自分専用の overlay。 */
  .gate-talk-overlay {
    position: fixed;
    inset: 0;
    z-index: 205;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .gate-talk-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s ease, visibility 0s linear 0s;
  }
  .gate-talk-bg {
    position: absolute;
    inset: 0;
    background-image: url('assets/section1/gate-front.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(0.72);
    z-index: 0;
  }
  /* 門番立ち絵：左側 VN 配置（他店 .dialogue-portrait と統一。身長 180cm = scale 1.029） */
  .gate-talk-portrait {
    --char-scale: 1.029;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--char-scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .gate-talk-overlay.open .gate-talk-portrait { opacity: 1; }
  /* 画面下テロップ：name + last response + freetext input */
  .gate-talk-textbox {
    position: absolute;
    left: 50%;
    bottom: max(env(safe-area-inset-bottom, 0px), 16px);
    transform: translateX(-50%) translateY(20px);
    width: min(80vw, 920px);
    max-height: 70lvh;
    background: linear-gradient(180deg, rgba(20, 10, 30, 0.94), rgba(15, 8, 25, 0.94));
    border: 1px solid rgba(245, 233, 211, 0.18);
    border-radius: 14px;
    padding: 14px 18px 18px;
    color: var(--ink-warm, #f5e9d3);
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.45s ease 0.1s, transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) 0.1s;
  }
  .gate-talk-overlay.open .gate-talk-textbox {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .gate-talk-speaker {
    font-family: var(--sans, sans-serif);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--neon-cyan, #4ee2ff);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(78, 226, 255, 0.25);
    text-shadow: 0 0 6px rgba(78, 226, 255, 0.5);
  }
  .gate-talk-speaker.player {
    color: #ffae3d;
    border-bottom-color: rgba(255, 174, 61, 0.3);
    text-shadow: 0 0 6px rgba(255, 174, 61, 0.4);
  }
  .gate-talk-text {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text, #f5e9d3);
    letter-spacing: 0.04em;
    min-height: 32px;
    white-space: pre-wrap;
    margin-bottom: 6px;
  }
  .gate-talk-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
  }
  .gate-talk-actions .daily-btn {
    /* re-use daily-btn style if present */
  }
  @media (max-width: 768px) {
    .gate-talk-portrait { left: 2vw; max-width: 46vw; }
    .gate-talk-textbox {
      left: 2vw;
      right: 2vw;
      width: auto;
      transform: translateY(20px);
      max-height: calc(70lvh);
      padding: 12px 14px 14px;
    }
    .gate-talk-overlay.open .gate-talk-textbox {
      transform: translateY(0);
    }
  }

  /* ===== エイムの「今日はどうする？」ダイアログ =====
     守衛室でエイムに話しかけた時、行動選択を促すフルスクリーン会話。
     立ち絵 + テロップ + 選択肢ボタンの構成（dialogue-overlay と同系統）。 */
  .daily-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.88) 100%);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  .daily-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
  }
  /* エイムの立ち絵：店UI統一フレーム（左側VN配置・身長スケール155cm=0.886） */
  .daily-portrait {
    --char-scale: 0.886;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--char-scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .daily-overlay.open .daily-portrait { opacity: 1; }
  /* 選択肢パネル：cinema-shop-panel と完全に同じ位置・サイズ・余白 */
  .daily-textbox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%) translateY(10px);
    width: min(64vw, 880px);
    max-height: calc(var(--ui-max-height, 100lvh) - 10px);
    background: linear-gradient(180deg, rgba(20, 10, 30, 0.94), rgba(15, 8, 25, 0.94));
    border: 1px solid rgba(245, 233, 211, 0.18);
    border-radius: 14px;
    padding: 14px 18px 18px;
    color: var(--ink-warm, #f5e9d3);
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    opacity: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.45s ease 0.1s, transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) 0.1s;
  }
  .daily-overlay.open .daily-textbox {
    opacity: 1;
    transform: translate(-25%, -50%) translateY(0);
  }
  /* スマホ：パネルを画面下半分に下ろす */
  @media (max-width: 768px) {
    .daily-portrait { left: 2vw; max-width: 46vw; }
    .daily-textbox {
      right: 2vw; left: 50vw;
      top: auto;
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      transform: none;
      width: auto;
      max-height: calc(100lvh - 24px);
      padding: 14px 16px 14px;
    }
    .daily-overlay.open .daily-textbox { transform: none; }
  }
  .daily-speaker {
    font-family: var(--sans, sans-serif);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--neon-cyan, #4ee2ff);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(78, 226, 255, 0.25);
    text-shadow: 0 0 6px rgba(78, 226, 255, 0.5);
  }
  .daily-speaker.player {
    color: #ffae3d;
    border-bottom-color: rgba(255, 174, 61, 0.3);
    text-shadow: 0 0 6px rgba(255, 174, 61, 0.4);
  }
  .daily-text {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text, #f5e9d3);
    letter-spacing: 0.04em;
    min-height: 32px;
    margin-bottom: 12px;
  }
  /* 選択肢ボタン群 */
  .daily-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 4px;
  }
  /* ★2026-06-17：街×会話メニュー／店別メニューを2列（2段）固定で見やすく */
  .daily-choices.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* 自由入力チャット表示中は縦積み（グリッドを解除） */
  .daily-choices.is-form { display: block; }
  /* 大きめ表示：ラベル・サブを拡大、当たり判定も広く */
  .daily-choices.big .daily-choice { padding: 14px 18px; min-height: 56px; }
  .daily-choices.big .daily-choice .ch-label { font-size: 16px; font-weight: 600; }
  .daily-choices.big .daily-choice .ch-sub { font-size: 11.5px; margin-top: 3px; }
  @media (max-width: 700px) {
    /* スマホでも2列を維持しつつ、文字が潰れないよう微調整 */
    .daily-choices.big .daily-choice { padding: 12px 12px; min-height: 52px; }
    .daily-choices.big .daily-choice .ch-label { font-size: 15px; }
  }
  .daily-choice {
    background: rgba(10, 6, 18, 0.7);
    border: 1px solid rgba(78, 226, 255, 0.4);
    color: var(--text, #f5e9d3);
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-align: left;
    transition: all 0.2s;
  }
  .daily-choice:hover {
    background: rgba(78, 226, 255, 0.15);
    border-color: var(--neon-cyan, #4ee2ff);
    transform: translateY(-1px);
  }
  .daily-choice.locked {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(245, 233, 211, 0.18);
  }
  .daily-choice.locked:hover { background: rgba(10, 6, 18, 0.7); transform: none; }
  /* 秘匿選択肢：守衛室で待つなど。控えめに表示 */
  .daily-choice-quiet {
    opacity: 0.45;
    border-color: rgba(245, 233, 211, 0.18);
    background: rgba(8, 5, 14, 0.45);
  }
  .daily-choice-quiet .ch-label {
    font-style: italic;
    font-weight: 400;
    color: rgba(245, 233, 211, 0.75);
  }
  .daily-choice-quiet:hover {
    opacity: 0.85;
    border-color: rgba(245, 233, 211, 0.45);
    background: rgba(20, 12, 32, 0.6);
  }
  .daily-choice .ch-label {
    display: block;
    font-weight: 500;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.08em;
  }
  .daily-choice .ch-sub {
    display: block;
    font-size: 10px;
    color: rgba(245, 233, 211, 0.55);
    margin-top: 2px;
    letter-spacing: 0.04em;
  }
  /* 次へボタン（応答後） */
  .daily-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .daily-btn {
    background: var(--neon-cyan, #4ee2ff);
    color: #0a0612;
    border: none;
    border-radius: 999px;
    padding: 7px 22px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
  }
  .daily-btn:hover { background: #6ee8ff; transform: translateY(-1px); }
  .daily-btn.cancel {
    background: transparent;
    border: 1px solid rgba(245, 233, 211, 0.3);
    color: rgba(245, 233, 211, 0.7);
    font-weight: 500;
  }
  .daily-btn.cancel:hover {
    background: rgba(245, 233, 211, 0.08);
    color: #fff;
  }

  /* ===== プロフィール内：シナリオ中断ボタン ===== */
  .profile-suspend-section {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(91, 58, 120, 0.2);
  }
  .profile-suspend-btn {
    width: 100%;
    background: transparent;
    border: 1.5px solid #c43e5a;
    color: #c43e5a;
    padding: 11px 16px;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .profile-suspend-btn:hover {
    background: rgba(196, 62, 90, 0.1);
    color: #a13049;
  }
  /* シナリオ中断確認ダイアログ */
  .suspend-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(5, 3, 9, 0.78);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .suspend-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }
  .suspend-card {
    background: rgba(20, 9, 31, 0.96);
    border: 1px solid var(--neon-magenta, #ff3d8b);
    border-radius: 14px;
    padding: 28px 30px;
    width: min(380px, 86vw);
    text-align: center;
    color: #f5e9d3;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 28px rgba(255,61,139,0.18);
  }
  .suspend-title {
    font-family: var(--mincho, 'Shippori Mincho', serif);
    font-size: 17px;
    letter-spacing: 0.18em;
    color: #ff3d8b;
    margin: 0 0 10px;
  }
  .suspend-note {
    font-family: var(--sans);
    font-size: 11px;
    color: rgba(245, 233, 211, 0.65);
    letter-spacing: 0.08em;
    line-height: 1.8;
    margin: 0 0 22px;
  }
  .suspend-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .suspend-btn {
    flex: 1;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .suspend-btn.yes {
    background: #c43e5a;
    border: 1px solid #c43e5a;
    color: #fff;
    font-weight: 600;
  }
  .suspend-btn.yes:hover { background: #a13049; }
  .suspend-btn.no {
    background: transparent;
    border: 1px solid rgba(245, 233, 211, 0.3);
    color: rgba(245, 233, 211, 0.7);
  }
  .suspend-btn.no:hover {
    background: rgba(245, 233, 211, 0.08);
    color: #fff;
  }

  .board-menu-note {
    text-align: center;
    font-size: 9.5px;
    color: #7a6a8a;
    line-height: 1.7;
    margin-top: 4px;
    padding: 0 4px;
    letter-spacing: 0.05em;
  }

  /* 戻るボタン */
  .board-back {
    background: rgba(91, 58, 120, 0.12);
    border: 1px solid rgba(91, 58, 120, 0.3);
    color: #5b3a78;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 10px;
    font-family: var(--sans);
    letter-spacing: 0.1em;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s;
  }
  .board-back:hover { background: rgba(91, 58, 120, 0.22); }

  /* 投稿フォーム */
  .sell-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(91, 58, 120, 0.18);
  }
  .sell-mode-tag {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--sans);
    font-size: 9.5px;
    color: #fff;
    background: #5b3a78;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.15em;
  }
  .sell-form.public-mode .sell-mode-tag { background: #a83e6e; }
  .sell-form.limited-mode .sell-mode-tag { background: #6e7a8a; }
  .sell-label {
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    font-size: 10px;
    color: #4a3a5f;
    letter-spacing: 0.05em;
    position: relative;
    gap: 4px;
  }
  .sell-label input,
  .sell-label textarea {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(91, 58, 120, 0.3);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: var(--mincho);
    font-size: 16px;
    color: #2a1f3a;
    resize: none;
    outline: none;
    transition: border 0.15s;
  }
  .sell-label input:focus,
  .sell-label textarea:focus {
    border-color: #5b3a78;
    box-shadow: 0 0 0 2px rgba(91, 58, 120, 0.18);
  }
  .sell-counter {
    align-self: flex-end;
    font-size: 9px;
    color: #7a6a8a;
  }
  .sell-emotion-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .sell-emotion-btn {
    background: rgba(91, 58, 120, 0.08);
    border: 1px solid rgba(91, 58, 120, 0.25);
    border-radius: 3px;
    padding: 6px 2px;
    font-family: var(--mincho);
    font-size: 10px;
    color: #4a3a5f;
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  .sell-emotion-btn.active {
    background: #5b3a78;
    color: #fff;
    border-color: #5b3a78;
  }
  .sell-submit-btn {
    background: #5b3a78;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    margin-top: 4px;
  }
  .sell-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .sell-submit-btn:hover:not(:disabled) {
    background: #4a2d62;
  }
  .sell-warning {
    font-size: 10px;
    color: #a83e6e;
    text-align: center;
    min-height: 14px;
  }

  /* 結果ビュー */
  .board-result {
    text-align: center;
    padding: 24px 14px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    border: 1px solid rgba(91, 58, 120, 0.18);
  }
  .board-result .result-icon {
    font-size: 32px;
    color: #5b3a78;
    margin-bottom: 8px;
  }
  .board-result .result-title {
    font-family: var(--mincho);
    font-size: 16px;
    color: #2a1f3a;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
  }
  .board-result .result-body {
    font-family: var(--sans);
    font-size: 11px;
    color: #4a3a5f;
    line-height: 1.8;
    margin-bottom: 18px;
  }
  /* 確認ダイアログ：投稿プレビュー＋はい/いいえ */
  .confirm-preview {
    background: rgba(91, 58, 120, 0.06);
    border: 1px solid rgba(91, 58, 120, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
    text-align: left;
    font-family: var(--mincho);
  }
  .confirm-preview .cp-mode {
    display: inline-block;
    font-family: var(--sans);
    font-size: 9px;
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
  .confirm-preview .cp-mode.public  { background: #a83e6e; }
  .confirm-preview .cp-mode.limited { background: #6e7a8a; }
  .confirm-preview .cp-emotion {
    display: inline-block;
    font-family: var(--sans);
    font-size: 9px;
    color: #5b3a78;
    background: rgba(91, 58, 120, 0.15);
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.08em;
    margin-left: 6px;
  }
  .confirm-preview .cp-summary {
    font-size: 13px;
    color: #2a1f3a;
    font-weight: 600;
    margin: 6px 0 4px;
    line-height: 1.4;
  }
  .confirm-preview .cp-body {
    font-size: 11px;
    color: #4a3a5f;
    line-height: 1.7;
  }
  .confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  .confirm-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 5px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.2s, transform 0.1s;
  }
  .confirm-btn.no {
    background: rgba(91, 58, 120, 0.1);
    border-color: rgba(91, 58, 120, 0.3);
    color: #5b3a78;
  }
  .confirm-btn.no:hover { background: rgba(91, 58, 120, 0.2); }
  .confirm-btn.yes {
    background: #5b3a78;
    color: #fff;
    border-color: #5b3a78;
  }
  .confirm-btn.yes:hover { background: #4a2d62; }

  /* 購入タイムラインの追加スタイル */
  .board-post.sold {
    opacity: 0.55;
    pointer-events: none;
    position: relative;
  }
  .board-post.sold::after {
    content: '売却済み';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: var(--mincho);
    font-size: 18px;
    color: rgba(91, 58, 120, 0.55);
    border: 2px solid rgba(91, 58, 120, 0.55);
    padding: 3px 12px;
    border-radius: 3px;
    letter-spacing: 0.2em;
    background: rgba(255, 255, 255, 0.6);
  }
  .board-post.own {
    background: linear-gradient(180deg, rgba(255, 245, 220, 0.95), rgba(255, 235, 200, 0.9));
    border-color: rgba(199, 142, 60, 0.5);
  }
  .board-post.own .own-badge {
    display: inline-block;
    background: rgba(199, 142, 60, 0.85);
    color: #fff;
    font-size: 8.5px;
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    margin-left: 6px;
  }
  .board-post .buy-btn {
    background: #5b3a78;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background 0.2s;
  }
  .board-post .buy-btn:hover:not(:disabled) { background: #4a2d62; }
  .board-post .buy-btn:disabled {
    background: rgba(122, 106, 138, 0.55);
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.85);
  }
  .board-post-buy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(91, 58, 120, 0.2);
  }
  .board-post-price-tag {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    color: #5b3a78;
    letter-spacing: 0.04em;
  }
  .board-post-author {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    color: #5b3a78;
    letter-spacing: 0.02em;
  }
  .board-post.purchased { display: none; }
  /* 売却済み（プレイヤー投稿）にコイン表示 */
  .board-post.sold .sold-coin {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-family: var(--sans);
    font-size: 9px;
    color: #c78e3c;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 6px;
    border-radius: 3px;
  }

  /* ===== Warp dialog ===== */
  .warp-dialog {
    position: fixed;
    inset: 0;
    background: rgba(5, 3, 9, 0.85);
    backdrop-filter: blur(20px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    animation: warpFade 0.4s ease-out;
  }
  .warp-dialog.open { display: flex; }
  /* チュートリアル中：warp-dialog の背景マスクを薄くして下のゲーム画面が見える状態に。
     ※ z-index も intro-overlay (260) より前にしないと、テロップや立ち絵の下に隠れてしまう。 */
  body.intro-tutorial-mode .warp-dialog {
    background: rgba(5, 3, 9, 0.3);
    backdrop-filter: blur(2px);
    z-index: 270;  /* intro-overlay(260) より前面に */
  }
  /* warp-card 本体を不透明＋強い影で浮かせて、本文と「やめる/行く」が確実に読める。 */
  body.intro-tutorial-mode .warp-card {
    background: linear-gradient(180deg, rgba(36, 18, 56, 1), rgba(18, 8, 30, 1));
    box-shadow:
      0 12px 48px rgba(0, 0, 0, 0.85),
      0 0 0 2px rgba(255, 255, 255, 0.12),
      0 0 32px rgba(255, 61, 139, 0.25);
    transform: scale(1.05);
  }
  @keyframes warpFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .warp-card {
    background: linear-gradient(180deg, rgba(26, 13, 42, 0.95), rgba(13, 5, 23, 0.95));
    border: 1px solid var(--neon-purple);
    border-radius: 14px;
    padding: 32px 40px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 0 60px rgba(157, 78, 255, 0.3);
  }
  .warp-card h3 {
    font-family: var(--mincho);
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--text);
  }
  .warp-card .subtitle {
    font-family: var(--serif);
    font-style: italic;
    color: var(--text-dim);
    margin: 0 0 20px;
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .warp-card .desc {
    color: var(--text-soft);
    font-size: 13px;
    margin: 0 0 24px;
    line-height: 1.9;
  }
  .warp-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .warp-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-family: var(--rounded);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.25s;
  }
  .warp-btn:hover { color: var(--text); border-color: var(--text); }
  .warp-btn.primary {
    background: var(--neon-magenta);
    border-color: var(--neon-magenta);
    color: #0a0612;
  }
  .warp-btn.primary:hover {
    background: var(--text);
    border-color: var(--text);
  }

  /* ===== Intro Overlay（紙芝居＋研究所シーン） =====
     キャラ選択後にだけ流れる導入演出。z-index は playerSetupModal より上、
     daily-overlay と同じ 200 帯。背景は full-bleed、テロップは下部に固定。 */
  .intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  }
  .intro-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s ease, visibility 0s linear 0s;
  }
  .intro-bg {
    position: absolute;
    inset: 0;
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.7s ease, opacity 0.7s ease;
  }
  /* 背景切替時のホワイトフラッシュ：ふわっと長め＋最大不透明度を抑える */
  .intro-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.55s ease-out;
  }
  .intro-flash.active {
    opacity: 0.78;
    transition: opacity 0.55s ease-in;
  }
  /* 黒いモヤ：クラップ能力版の頭部位置（画面右寄り上半分）から発生 →
     画面全体を覆い尽くす radial-gradient のスケールアップ */
  .intro-blackmist {
    position: absolute;
    /* 立ち絵の頭部あたりに中心点を置く */
    right: 18vw;
    top: 30vh;
    width: 6vmin;
    height: 6vmin;
    border-radius: 50%;
    transform: translate(50%, -50%) scale(0);
    background: radial-gradient(circle,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.96) 30%,
      rgba(30,8,46,0.7) 60%,
      rgba(30,8,46,0) 100%);
    box-shadow: 0 0 120px 40px rgba(0,0,0,0.85),
                0 0 240px 90px rgba(40,12,64,0.55);
    opacity: 0;
    filter: blur(8px);
    pointer-events: none;
    z-index: 8;  /* テロップとフラッシュより手前 */
    mix-blend-mode: normal;
  }
  .intro-blackmist.active {
    animation: blackmistGrow 2.6s cubic-bezier(0.5, 0, 0.7, 1) forwards;
  }
  @keyframes blackmistGrow {
    0%   { transform: translate(50%, -50%) scale(0);  opacity: 0; }
    12%  { transform: translate(50%, -50%) scale(2);  opacity: 0.9; }
    40%  { transform: translate(50%, -50%) scale(18); opacity: 0.96; filter: blur(20px); }
    75%  { transform: translate(50%, -50%) scale(60); opacity: 1; filter: blur(8px); }
    100% { transform: translate(50%, -50%) scale(120); opacity: 1; filter: blur(0); }
  }
  @media (max-width: 700px), (max-height: 500px) {
    .intro-blackmist { right: 14vw; top: 28vh; }
  }
  /* ===== 夜会話システム（2026-06-13）=====
     body.is-night-talk が付与されているとき：
     - 守衛室の guard-room-late.webp を背景にしているが、暗闇フェーズはさらに黒被せ
     - intro-textbox の右上にスキップボタンを表示
     - phase=standing 時は強い暗幕を被せて「真っ暗な部屋」感を出す
     夜会話は applyStep の step.nightPhase で識別する。 */
  body.is-night-talk .intro-overlay .intro-bg::after {
    /* standing phase で背景の上に黒を被せる（暗闇感）。
       awake / sleeping phase では this::after を消したい → JS でクラスを切り替え。 */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: background 0.45s ease;
    z-index: 1;
  }
  /* awake / sleeping phase では暗幕を薄く（寝室は元から暗めの写真なので 0.15） */
  body.is-night-talk[data-night-phase="awake"] .intro-overlay .intro-bg::after,
  body.is-night-talk[data-night-phase="sleeping"] .intro-overlay .intro-bg::after {
    background: rgba(0, 0, 0, 0.15);
  }
  /* standing phase は暗闇強め */
  body.is-night-talk[data-night-phase="standing"] .intro-overlay .intro-bg::after {
    background: rgba(0, 0, 0, 0.7);
  }
  /* ブラックアウト遷移：phase切替時に被せる真っ黒オーバーレイ。 */
  .intro-overlay.is-blackout::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 200;
    pointer-events: none;
    animation: nightBlackout 0.5s ease;
  }
  @keyframes nightBlackout {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0; }
  }
  /* ★2026-06-14：夜会話 awake→sleeping クロスフェード遷移
     黒画面を経由せず、目を開けた寝室→目を閉じた寝室の画像同士をゆっくり溶かす。
     bgEl 本体の上に擬似要素で次画像を被せ、opacity を 0→1 にゆっくりアニメーション。
     JS 側で 1500ms 後に本体の background-image を新画像に置き換え＋擬似要素クラス除去。 */
  .intro-bg.is-crossfading::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--cf-next-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: bgCrossfade 1500ms ease-in-out forwards;
    z-index: 1;
    pointer-events: none;
  }
  @keyframes bgCrossfade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  /* ★2026-07-07：夜会話の awake phase 内（目を閉じる／開ける）用の短いソフトクロスフェード。
     白フラッシュ（flashEl）を使わず、寝室画像同士をふわっと 700ms で溶かす。 */
  .intro-bg.is-crossfading-soft::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--cf-next-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: bgCrossfade 700ms ease-in-out forwards;
    z-index: 1;
    pointer-events: none;
  }
  /* スキップボタン：intro-textbox の右上隅。控えめ。
     intro-textbox は relative なので absolute で配置可能。 */
  .night-talk-skip {
    display: none;
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 12;
    background: rgba(20, 20, 40, 0.55);
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    font-size: 0.78em;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .night-talk-skip:hover {
    background: rgba(40, 40, 80, 0.78);
    color: #fff;
  }
  body.is-night-talk .night-talk-skip { display: inline-block; }
  /* 記憶の瓶開封演出：プレイヤー位置（左下寄り）から白い光が複数回パルス */
  .intro-bottleflash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 55%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.95) 18%,
      rgba(220,240,255,0.75) 40%,
      rgba(220,240,255,0.3) 70%,
      rgba(220,240,255,0) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 7;
    mix-blend-mode: screen;
  }
  .intro-bottleflash.active {
    animation: bottleFlashPulse 3s ease-out forwards;
  }
  @keyframes bottleFlashPulse {
    0%   { opacity: 0; }
    8%   { opacity: 0.85; }    /* 第1閃 */
    18%  { opacity: 0.25; }
    28%  { opacity: 0.95; }    /* 第2閃 */
    40%  { opacity: 0.35; }
    52%  { opacity: 1; }       /* 第3閃（最大） */
    72%  { opacity: 0.7; }
    100% { opacity: 0; }
  }
  /* スポットライト：指定要素の周囲を光らせて指示テキストを出す
     z-index: 最前面に。チュートリアル中の warp-dialog (270) より前に出すため 280。 */
  .intro-spotlight {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 280;
    transition: opacity 0.4s ease, top 0.5s ease, left 0.5s ease, width 0.5s ease, height 0.5s ease, visibility 0s linear 0.4s;
  }
  .intro-spotlight.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, top 0.5s ease, left 0.5s ease, width 0.5s ease, height 0.5s ease, visibility 0s linear 0s;
  }
  /* ★2026-06-19：対象の枠自体が光る（spotlight-target-active）ので、補助の光リングは非表示にする */
  .intro-spotlight { display: none !important; }
  .intro-spotlight-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 216, 74, 0.55);
    /* 暗化マスクを 0.55 → 0.18 に薄くして背景が見えるように。
       周りを少し落として対象を浮き立たせる程度に。 */
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.18), 0 0 18px rgba(255,216,74,0.45);
    animation: spotlightPulse 1.6s ease-in-out infinite;
  }
  @keyframes spotlightPulse {
    0%, 100% { transform: scale(1);   border-color: rgba(255, 216, 74, 0.55); }
    50%      { transform: scale(1.05); border-color: rgba(255, 230, 128, 0.85); }
  }

  /* ターゲット要素自体を光らせる：これがメインのナビゲーション
     リングの位置/サイズ計算がデバイスでずれても、要素自体が確実に光る。 */
  .spotlight-target-active {
    position: relative;
    z-index: 261 !important;   /* スポットライトと同レベル */
    box-shadow:
      0 0 0 3px rgba(255, 216, 74, 0.95),
      0 0 16px 4px rgba(255, 216, 74, 0.75),
      0 0 40px 12px rgba(255, 216, 74, 0.4) !important;
    animation: spotlightTargetPulse 1.4s ease-in-out infinite;
    /* outline-offset で要素から少し離して光らせる（既存ボーダーと重ねない） */
    outline: 2px solid rgba(255, 230, 128, 0.9);
    outline-offset: 4px;
    border-radius: inherit;
  }
  @keyframes spotlightTargetPulse {
    0%, 100% {
      box-shadow:
        0 0 0 3px rgba(255, 216, 74, 0.95),
        0 0 16px 4px rgba(255, 216, 74, 0.75),
        0 0 40px 12px rgba(255, 216, 74, 0.4);
    }
    50% {
      box-shadow:
        0 0 0 5px rgba(255, 230, 128, 1.0),
        0 0 24px 8px rgba(255, 230, 128, 0.85),
        0 0 60px 24px rgba(255, 230, 128, 0.55);
    }
  }
  .intro-spotlight-label {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 16px;
    /* 読みやすさ強化：不透明な黒背景＋太い黄色枠＋明るい文字＋発光影 */
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #ffe680;
    border-radius: 10px;
    padding: 12px 22px;
    color: #ffe680;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    white-space: nowrap;
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.8),
      0 0 16px rgba(255, 216, 74, 0.55);
    text-shadow: 0 0 8px rgba(255, 216, 74, 0.6);
    box-shadow: 0 4px 18px rgba(0,0,0,0.6);
  }
  /* 紙芝居モード時：背景を少し暗めにしてテロップを際立たせる */
  .intro-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
  }
  /* 立ち絵：身長正規化システム（VNフレーミング版）
     ・基準：175cm = scale 1.0、足元=bottom -20vh（画面下に押し出して足元カット）
     ・1cm = 110/175 = 0.629vh の換算（表示高さ110vhから）
     ・各キャラの --scale を data-portrait-id で指定する
     ・--ty は入場アニメーション用（40px → 0）
     ・画像のアスペクト比による幅制約を避けるため max-width は 50vw と緩く取る
       （横長キャラの透明領域が隣にはみ出してもOK、身長は height で正確に支配される） */
  .intro-portrait {
    --scale: 1.0;
    --ty: 40px;
    --tx: 0px;
    --flip-x: 1;
    position: absolute;
    /* lvh（large viewport height）= キーボード等で viewport が縮んでも
       常に「最大viewport高さ」を基準にする。iOS Safari でキーボード開閉時に
       立ち絵がブレる問題を防ぐ */
    bottom: -20lvh;
    right: 1vw;
    height: 110lvh;
    max-height: 110lvh;
    max-width: 50vw;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    opacity: 0;
    /* ★2026-07-08：演算順をスロット時（.intro-portrait[data-slot]）と完全に揃える。
       スロット時: translateX(...) scale scaleX translateY。基準もこの順にすることで、
       退場（スロット解除）時の行列補間が「translateX だけ変化・scale 一定」になり、
       途中で拡大（scaleの跳ね）が起きない。--tx は既定 0 のため見た目の resting 位置は不変。 */
    transform: translateX(var(--tx)) scale(var(--scale)) scaleX(var(--flip-x)) translateY(var(--ty));
    transform-origin: bottom center;
    /* ★2026-07-06：transform のトランジションからオーバーシュート(1.4)を撤去。
       退場・スロット再配置時に行列補間が終点を越えて“一瞬拡大”して消える不具合の対策。
       非オーバーシュートの easeOutQuint に変更し、拡大せず滑らかに移動/フェードさせる。 */
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
    pointer-events: none;
    z-index: 1;
  }

  /* === 各キャラの身長設定（cm を scale に換算、175cm = 1.0 基準） === */
  .intro-portrait[data-portrait-id="gatekeeper"],
  .intro-portrait-left[data-portrait-id="gatekeeper"]   { --scale: 1.029; }  /* 180cm 大柄騎士 */
  .intro-portrait[data-portrait-id="yanagi"],
  .intro-portrait-left[data-portrait-id="yanagi"]       { --scale: 1.029; }  /* 180cm */
  .intro-portrait[data-portrait-id="krapp"],
  .intro-portrait-left[data-portrait-id="krapp"]        { --scale: 1.017; }  /* 178cm ロボット */
  .intro-portrait[data-portrait-id="player-flame"],
  .intro-portrait-left[data-portrait-id="player-flame"] { --scale: 1.000; }  /* 175cm 男性研究者 */
  .intro-portrait[data-portrait-id="mamoru"],
  .intro-portrait-left[data-portrait-id="mamoru"]       { --scale: 1.000; }  /* 175cm */
  .intro-portrait[data-portrait-id="tenraku"],
  .intro-portrait-left[data-portrait-id="tenraku"]      { --scale: 1.000; }  /* 175cm */
  .intro-portrait[data-portrait-id="soi"],
  .intro-portrait-left[data-portrait-id="soi"]          { --scale: 0.971; }  /* 170cm */
  .intro-portrait[data-portrait-id="renma"],
  .intro-portrait-left[data-portrait-id="renma"]        { --scale: 0.971; }  /* 170cm 実父（2026-06-22 追加：未設定で大人最大化し公園で少年が膨張するバグ修正） */
  .intro-portrait[data-portrait-id="obon"],
  .intro-portrait-left[data-portrait-id="obon"]         { --scale: 0.886; }  /* 155cm オボン（2026-06-22 ファイブ：身長確定） */
  .intro-portrait[data-portrait-id="agatsuma"],
  .intro-portrait-left[data-portrait-id="agatsuma"]     { --scale: 0.886; }  /* 155cm アガツマ（オボンと同じ） */
  .intro-portrait[data-portrait-id="onoda"],
  .intro-portrait-left[data-portrait-id="onoda"]        { --scale: 0.914; }  /* 160cm オノダ（オノデラ） */
  .intro-portrait[data-portrait-id="chigusa"],
  .intro-portrait-left[data-portrait-id="chigusa"]      { --scale: 0.857; }  /* 150cm チグサ（2026-06-22 ファイブ：身長確定） */
  .intro-portrait[data-portrait-id="markus-scared"],
  .intro-portrait-left[data-portrait-id="markus-scared"],
  .intro-portrait[data-portrait-id="markus-fight"],
  .intro-portrait-left[data-portrait-id="markus-fight"],
  .intro-portrait[data-portrait-id="markus-battle"],
  .intro-portrait-left[data-portrait-id="markus-battle"] { --scale: 0.943; }  /* 165cm マルクス（2026-06-22 ファイブ：身長確定） */
  .intro-portrait[data-portrait-id="nanbu"],
  .intro-portrait-left[data-portrait-id="nanbu"]        { --scale: 0.971; }  /* 170cm */
  .intro-portrait[data-portrait-id="fukuri"],
  .intro-portrait-left[data-portrait-id="fukuri"]       { --scale: 0.931; }  /* 163cm */
  .intro-portrait[data-portrait-id="player-smoke"],
  .intro-portrait-left[data-portrait-id="player-smoke"] { --scale: 0.931; }  /* 163cm 女性研究者 */
  .intro-portrait[data-portrait-id="shikoku"],
  .intro-portrait-left[data-portrait-id="shikoku"]      { --scale: 0.903; }  /* 158cm */
  .intro-portrait[data-portrait-id="aim"],
  .intro-portrait-left[data-portrait-id="aim"]          { --scale: 0.886; }  /* 155cm */
  .intro-portrait[data-portrait-id="yoka"],
  .intro-portrait-left[data-portrait-id="yoka"]         { --scale: 0.886; }  /* 155cm */
  .intro-portrait[data-portrait-id="juri"],
  .intro-portrait-left[data-portrait-id="juri"]         { --scale: 0.857; }  /* 150cm */
  .intro-portrait[data-portrait-id="pea"],
  .intro-portrait-left[data-portrait-id="pea"]          { --scale: 0.857; }  /* 150cm */
  .intro-portrait[data-portrait-id="hima"],
  .intro-portrait-left[data-portrait-id="hima"]         { --scale: 0.731; }  /* 128cm */
  .intro-portrait[data-portrait-id="boy"],
  .intro-portrait-left[data-portrait-id="boy"]          { --scale: 0.731; }  /* 128cm 小3 */

  .intro-overlay.has-portrait .intro-portrait:not(.intro-portrait-left) {
    opacity: 1;
    --ty: 0px;
  }
  /* === ストーリー未完了時（pre-story-complete）：ゲーム本体のステージ・HUDを隠す
     初プレイ時にロード一瞬で守衛室が見えてしまうのを防ぐ。section2 完了で解除される */
  body.pre-story-complete .stage { background: #000 !important; }
  body.pre-story-complete .hud,
  body.pre-story-complete #locationLabel { visibility: hidden; }

  /* === チュートリアル時：立ち絵とグラデだけ消し、背景画像（直前のシーン）はそのまま見せる
     ・スマホ等のゲームUIは z-index で前面に出ているので intro-bg を隠す必要はない
     ・intro-bg を隠すと、その奥にあるゲーム本体の「現在地」（プレイヤーがまだ行っていない場所等）が透けてしまう */
  .intro-overlay.is-tutorial { background: transparent; }
  /* 操作必須チュートリアル：「次へ」ボタン非表示でスポットライト対象クリック以外で進めない */
  .intro-overlay.is-tutorial-required .intro-next { display: none !important; }
  .intro-overlay.is-tutorial::after { display: none; }

  /* =========================================================================
     ★ハードロック（2026-06-14）：requireTargetClick チュートリアル中、
       スポットライト対象以外のスマホUI／街アイコンをすべて押せなくする。
       AIM_FIRST_TALK の「マップ→ルーケム→映画館ふじしろ→行く」を1本道で
       誘導するために、誤って別の街タブや別の店アイコンを押すのを完全防止。
       JS 側で body.tutorial-hard-lock を is-tutorial-required と同期する。
       - .spotlight-target-active が付いた要素だけが操作可能
       - 他のスマホタブ／街タブ／店アイコン／warpBtn／中断ボタンはロック
       - 視覚的にも0.4透過＋脱彩でロック中とわかるように
  ========================================================================= */
  body.tutorial-hard-lock .phone-tab-btn:not(.spotlight-target-active),
  body.tutorial-hard-lock .city-btn:not(.spotlight-target-active),
  body.tutorial-hard-lock .shop-icon-group:not(.spotlight-target-active),
  body.tutorial-hard-lock [data-shop]:not(.spotlight-target-active),
  body.tutorial-hard-lock .warp-btn:not(.spotlight-target-active),
  body.tutorial-hard-lock #phoneToggle:not(.spotlight-target-active),
  body.tutorial-hard-lock #suspendBtn:not(.spotlight-target-active),
  body.tutorial-hard-lock #endTurnBtn:not(.spotlight-target-active),
  body.tutorial-hard-lock #homeReturnBtn:not(.spotlight-target-active),
  body.tutorial-hard-lock .npc-talk-btn:not(.spotlight-target-active),
  /* ★2026-06-19：持ち物オーバーレイの「とじる」もロック（閉じて詰むのを防ぐ） */
  body.tutorial-hard-lock #inventoryOverlayClose:not(.spotlight-target-active) {
    pointer-events: none !important;
    opacity: 0.4 !important;
    filter: grayscale(0.5);
    transition: opacity 0.2s ease, filter 0.2s ease;
  }
  /* ロック中ロックUI：マップ全体に「半透明オーバーレイ」を被せると視覚的にも誘導しやすい */
  body.tutorial-hard-lock .city-btn.locked {
    /* ロックされた街タブはもともとグレー扱い → 二重に薄くしない */
    opacity: 0.3 !important;
  }
  /* ★2026-06-19：門番チュートリアルで持ち物（確認する→オーバーレイ）を開いた時、
     持ち物オーバーレイ(z185)はチュートリアル層 intro-overlay(z210) より下にあり、
     中の「瓶を開く」がクリック・スポットライトできない。チュートリアル中だけ前面化する。 */
  body.tutorial-hard-lock #inventoryOverlay.open { z-index: 240 !important; }
  /* ★2026-06-19：上で持ち物オーバーレイをz240に上げたため、記憶ヴェール(z200)が
     その裏に開いて見えず「閉じられない＝進まない」状態になる。チュートリアル中は
     ヴェールを最前面（オーバーレイ240・スポット280の間）に出す。 */
  body.tutorial-hard-lock .memory-veil { z-index: 260 !important; }
  .intro-overlay.is-tutorial .intro-portrait,
  .intro-overlay.is-tutorial .intro-portrait-left,
  .intro-overlay.is-tutorial .intro-portrait-mid { opacity: 0 !important; }
  /* チュートリアル中のテロップは黄色ボーダー＋暗くなりすぎない不透明度で視認性確保 */
  /* ============================================================
     ★地震演出（2026-06-08 シナリオ実装）：フクリ初回会話の地震シーン用
     intro-overlay に .intro-quake クラスを付けると、テロップと背景が
     カタカタ揺れる。step.quake: true / step.quakeEnd: true で制御。
     ============================================================ */
  .intro-overlay.intro-quake .intro-textbox {
    animation: intro-quake-shake 0.12s linear infinite;
  }
  .intro-overlay.intro-quake .intro-bg,
  .intro-overlay.intro-quake .intro-portrait,
  .intro-overlay.intro-quake .intro-portrait-left,
  .intro-overlay.intro-quake .intro-portrait-mid,
  .intro-overlay.intro-quake .intro-portrait-mid2 {
    animation: intro-quake-bg 0.18s linear infinite;
  }
  @keyframes intro-quake-shake {
    /* ★テキストボックスは left:50% + translateX(-50%) で中央寄せ。
       揺れアニメでも -50% を保持しないと中央寄せが外れて右にずれるため、calc で -50% を加味する。 */
    0%, 100% { transform: translate(-50%, 0); }
    20%      { transform: translate(calc(-50% - 3px), 2px); }
    40%      { transform: translate(calc(-50% + 3px), -2px); }
    60%      { transform: translate(calc(-50% - 2px), -2px); }
    80%      { transform: translate(calc(-50% + 2px), 3px); }
  }
  @keyframes intro-quake-bg {
    0%, 100% { transform: translate(0, 0) scale(1.02); }
    25%      { transform: translate(-2px, 1px) scale(1.02); }
    50%      { transform: translate(2px, -1px) scale(1.02); }
    75%      { transform: translate(-1px, 2px) scale(1.02); }
  }
  /* ★保険：スマホUIを開いている時はテキストボックスが left/right 配置（transform:none）になるため、
     -50% を加味しない揺れに切り替える（中央寄せ前提の揺れだと逆にずれるため）。 */
  body:not(.phone-closed) .intro-overlay.intro-quake .intro-textbox {
    animation-name: intro-quake-shake-open;
  }
  @keyframes intro-quake-shake-open {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-3px, 2px); }
    40%      { transform: translate(3px, -2px); }
    60%      { transform: translate(-2px, -2px); }
    80%      { transform: translate(2px, 3px); }
  }

  .intro-overlay.is-tutorial .intro-textbox {
    background: linear-gradient(180deg, rgba(20, 14, 10, 0.96), rgba(14, 10, 6, 0.98));
    border-color: rgba(255, 216, 74, 0.85);
    box-shadow: 0 0 0 2px rgba(255, 216, 74, 0.35), 0 0 30px rgba(255, 216, 74, 0.25), 0 -8px 38px rgba(0,0,0,0.7);
    z-index: 261;  /* スポットライトのマスクより前 */
  }
  .intro-overlay.is-tutorial .intro-text { color: #fff8e1; }
  .intro-overlay.is-tutorial .intro-speaker {
    color: #ffd84a;
    border-bottom-color: rgba(255, 216, 74, 0.5);
    text-shadow: 0 0 6px rgba(255, 216, 74, 0.6);
  }
  /* チュートリアル時はスマホタブをintro-overlayより手前に */
  body.intro-tutorial-mode .phone-toggle,
  body.intro-tutorial-mode .phone-shell,
  body.intro-tutorial-mode #phone { z-index: 240; }
  /* keep-phone-open：チュートリアル後の info step などでスマホを継続表示するモード
     intro-overlay の黒背景を透明にしてスマホを見えるようにする */
  body.keep-phone-open .intro-overlay { background: transparent; }
  body.keep-phone-open .intro-overlay::after { display: none; }
  body.keep-phone-open .phone-toggle,
  body.keep-phone-open .phone-shell,
  body.keep-phone-open #phone { z-index: 240; }

  /* === 非話者を暗く表示 ===
     両方の立ち絵が出ている時のみ適用。話す側のみ通常輝度、もう片方は暗く＋彩度落ち
     !important で発光ルールとの競合に勝つ（非話者は確実に暗くなる）
     【重要】右側 .intro-portrait を指定する時は :not() で左・中央を除外しないと、
     共通クラス .intro-portrait を持つ全立ち絵が dim 対象になってしまう */
  .intro-overlay.has-portrait.has-player.is-right-speaks .intro-portrait-left {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  .intro-overlay.has-portrait.has-player.is-left-speaks .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid) {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  /* ナレーション中：誰も話していない → 全員暗く */
  .intro-overlay.is-narration .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid),
  .intro-overlay.is-narration .intro-portrait-left,
  .intro-overlay.is-narration .intro-portrait-mid {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  /* 話者を明確に光らせる：控えめな白縁の発光のみ。色味は変えない（彩度・明度はほぼそのまま）
     ・対象：is-left-speaks（プレイヤー/左）、is-right-speaks（NPC/右）、is-mid-speaks（中央）
     ・心の声 / 通常セリフ どちらも同じ白発光（柔らかい縁取り＋わずかな明度UP） */
  .intro-overlay.is-left-speaks .intro-portrait-left {
    filter:
      brightness(1.04)
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.22))
      drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  }
  .intro-overlay.is-right-speaks .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid) {
    filter:
      brightness(1.04)
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.22))
      drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  }
  /* 3人会話モード時：中央が話す場合（エイム等） */
  .intro-overlay.has-third.is-mid-speaks .intro-portrait-mid {
    filter:
      brightness(1.04)
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.22))
      drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  }
  .intro-portrait, .intro-portrait-left {
    transition: filter 0.4s ease, opacity 0.5s ease;
    /* transform 系（左右位置の入れ替え）は遷移しない＝瞬時に切替 */
  }
  /* プレイヤー立ち絵：左側に配置
     ・max-width: 50vw に緩めて横長キャラの幅制約を解放（身長を正確に） */
  .intro-portrait-left {
    right: auto;
    left: 1vw;
    object-position: bottom left;
    max-width: 50vw;
  }
  /* 中央立ち絵（3人会話用、初期非表示） */
  .intro-portrait-mid {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    object-position: bottom center;
    max-width: 40vw;
    opacity: 0;
    z-index: 1;
  }
  .intro-overlay.has-third .intro-portrait-mid {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* 3人モード時の配置：左=プレイヤー、中央=仲間（エイム等）、右=NPC
     ・各 max-width を 30vw に緩めて横長キャラの身長制約を回避 */
  .intro-overlay.has-third.has-player .intro-portrait-left { left: 0.5vw; max-width: 30vw; }
  .intro-overlay.has-third.has-portrait .intro-portrait { right: 0.5vw; max-width: 30vw; }
  .intro-overlay.has-third .intro-portrait-mid {
    left: 50%;
    max-width: 30vw;
  }
  /* 3人モード時：暗くなる側の指定（!important で発光ルールに勝つ）
     右側 .intro-portrait は :not() で左・中央を除外して限定する */
  .intro-overlay.has-third.is-right-speaks .intro-portrait-left,
  .intro-overlay.has-third.is-right-speaks .intro-portrait-mid {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  .intro-overlay.has-third.is-left-speaks .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid),
  .intro-overlay.has-third.is-left-speaks .intro-portrait-mid {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  /* 中央が話している時：左右を暗く（中央の発光は上のメインルールに統一） */
  .intro-overlay.has-third.is-mid-speaks .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid),
  .intro-overlay.has-third.is-mid-speaks .intro-portrait-left {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  .intro-overlay.has-third.is-narration .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid),
  .intro-overlay.has-third.is-narration .intro-portrait-left,
  .intro-overlay.has-third.is-narration .intro-portrait-mid {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  /* 門番もデフォルト設定で扱う（独自オーバーライドなし）
     ＝画像の元構図にあるとおりの身長差で表示する */
  /* 1人だけ登場するシーンは画面中央配置（has-portraitのみ or has-playerのみの時）
     ただし force-right が指定されているシーン（エイムが背景中央にいる）では右に寄せる
     ※ 横方向の translate は --tx、scale と組み合わせて適用 */
  .intro-overlay.has-portrait:not(.has-player):not(.force-right) .intro-portrait {
    right: 50%;
    --tx: 50%;
    object-position: bottom center;
  }
  .intro-overlay.has-player:not(.has-portrait) .intro-portrait-left {
    left: 50%;
    --tx: -50%;
    object-position: bottom center;
  }
  /* 左側に NPC（門番など）を出す場合、画像を左右反転して左側を向かせる
     ※ --flip-x: -1 で水平反転 */
  .intro-overlay.flip-left .intro-portrait-left {
    --flip-x: -1;
  }
  .intro-overlay.has-player .intro-portrait-left {
    opacity: 1;
    --ty: 0px;
  }

  /* =========================================================
     === 4スロット配置システム（slot-mode テストモード）===
     URL ?slottest=1 で有効化。body に slot-mode クラスが付く。
     既存の left/right/center 配置を上書きし、優先順位ベースで
     4スロット(12.5/37.5/62.5/87.5vw)に再配置する。
     ・data-slot="1"〜"4" は JS の applySlotPositions() で動的設定
     ・出てる立ち絵の人数に応じて 1人=[2], 2人=[2,3], 3人=[1,2,3], 4人=[1,2,3,4]
     ・スロット1,2 は中央向き反転、3,4 は通常向き
     ・プレイヤー画像は元から右向きなので flip を逆にする
     ========================================================= */
  body.slot-mode .intro-portrait[data-slot] {
    --slot-cx: 50vw;
    --flip-x: 1;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    max-width: 50vw !important;
    object-position: bottom center !important;
    transform:
      translateX(calc(var(--slot-cx) - 50vw))
      scale(var(--scale))
      scaleX(var(--flip-x))
      translateY(var(--ty)) !important;
  }
  body.slot-mode .intro-portrait[data-slot="1"] { --slot-cx: 12.5vw; --flip-x: -1; }
  body.slot-mode .intro-portrait[data-slot="2"] { --slot-cx: 37.5vw; --flip-x: -1; }
  body.slot-mode .intro-portrait[data-slot="3"] { --slot-cx: 62.5vw; --flip-x:  1; }
  body.slot-mode .intro-portrait[data-slot="4"] { --slot-cx: 87.5vw; --flip-x:  1; }
  /* =========================================================
     ★中央1人喋りモード（2026-06-14 追加 / 2026-06-16 身長スケール統一）
     step.singleCenter: true で .is-single-center クラスが付与され、
     立ち絵を画面中央（50vw）に1体だけ配置する。
     用途：
       - ジュリ2回目以降（boyMissing時）：ジュリ独白
       - 夜会話 standingSteps：少年独白
       - その他「ナレーションっぽい1人喋り」全般
     使い方：シーン定義で singleCenter: true を付けるだけ。
     立ち絵は1体だけ指定（portrait: ... または portraitMid: ... など）。

     ★身長ルール（2026-06-16 確定）：
       中央1人モードでも「身長スケール（--scale）は4人配置時と完全に同じ」に統一する。
       理由：少年（子供身長）が大人キャラと並ぶ4人シーンと、少年単独の夜会話で
       身長比が変わるのは世界観の整合性に反する。max-width も 4人時と同じ 50vw を継承。
       詳細は TP_開発知見メモ.md §17 を参照。
     ========================================================= */
  /* ★2026-06-22 ファイブ：立ち絵のふわっと出現（シコク赤ちゃん/愛情の登場用）。
     JS で .soft-appear を一時付与 → アニメ終了で外す。 */
  @keyframes portrait-soft-appear { from { opacity: 0; } to { opacity: 1; } }
  .intro-overlay .intro-portrait.soft-appear { animation: portrait-soft-appear 0.9s ease both; }

  body.slot-mode .intro-overlay.is-single-center .intro-portrait[data-slot] {
    --slot-cx: 50vw !important;
    --flip-x: 1 !important;
    /* max-width と --scale は明示的に上書きしない。
       キャラ別の身長スケール（.intro-portrait-left[data-portrait-id="..."] で定義）が
       そのまま効いて、4人配置時と同じ身長で表示される。 */
  }
  /* プレイヤー画像（右向き素材）の反転だけは保持しない（中央向きは flip-x:1 で固定） */
  body.slot-mode .intro-overlay.is-single-center .intro-portrait[data-portrait-id^="player-"] {
    --flip-x: 1 !important;
  }
  /* プレイヤー画像は元から右向き → flip ロジック反転 */
  body.slot-mode .intro-portrait[data-slot="1"][data-portrait-id^="player-"],
  body.slot-mode .intro-portrait[data-slot="2"][data-portrait-id^="player-"] { --flip-x:  1 !important; }
  body.slot-mode .intro-portrait[data-slot="3"][data-portrait-id^="player-"],
  body.slot-mode .intro-portrait[data-slot="4"][data-portrait-id^="player-"] { --flip-x: -1 !important; }

  /* slot-mode 時：data-slot 未設定の立ち絵は非表示（旧クラス指定で誤って出ないように）。
     ★2026-07-08：退場（スロット解除）時は「素の右寄せ位置」に戻さず、スロット時と同じ
     中央寄せの箱（left/right/margin/max-width/object-position）を保つ。これにより箱の瞬間ジャンプがなく、
     transform は translateX がスロット位置→中央(0) へ滑るだけ・scale 一定でフェードアウトする。
     → 4人立ち絵の退場でエイム等が「拡大して消える」不具合の解消（夜会話の右滑りも同時に解消）。 */
  body.slot-mode .intro-portrait:not([data-slot]) {
    opacity: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    max-width: 50vw !important;
    object-position: bottom center !important;
    /* ★2026-07-08 最重要：退場時の transform を「スロット時と同構造＋scale維持」に固定する。
       これがないと、中央スロット要素は .intro-portrait-mid の transform（scale無し＝1.0）に
       戻ってしまい、スロット時の縮小scaleから 1.0 へ補間されてエイム等が拡大して消える。
       ここで scale(var(--scale)) を保持し、translateX だけ中央(0)へ滑らせることで拡大を防ぐ。 */
    transform: translateX(var(--tx)) scale(var(--scale)) scaleX(var(--flip-x)) translateY(var(--ty)) !important;
  }
  /* アイテム/選択肢時の3人目以降など、明示的に隠したい立ち絵 */
  body.slot-mode .intro-portrait.slot-hidden {
    opacity: 0 !important;
  }
  /* 4人目スロット（中央右寄り）：slot-mode OFF時は完全非表示
     （旧3人モード時に余計な立ち絵が出ないように） */
  .intro-portrait-mid2 {
    opacity: 0;
  }
  body.slot-mode .intro-overlay.has-fourth .intro-portrait-mid2 {
    opacity: 1;
  }
  /* 4人目スピーカー時の発光（slot-mode 限定） */
  body.slot-mode .intro-overlay.is-mid2-speaks .intro-portrait-mid2 {
    filter:
      brightness(1.04)
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.22))
      drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  }
  /* 4人目が話していない時：暗く（他のキャラと整合） */
  body.slot-mode .intro-overlay.has-fourth:not(.is-mid2-speaks) .intro-portrait-mid2 {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55));
  }
  /* 4人モード時、4人目（mid2＝少年など）が話している時：他の3人を暗くする
     これがないと、is-mid2-speaks 時に他キャラが明るいまま残り、暗化のメリハリが消える。
     既存の has-third 系暗化ルールは has-third を条件にしているため、has-fourth では効かない。 */
  body.slot-mode .intro-overlay.has-fourth.is-mid2-speaks .intro-portrait-left,
  body.slot-mode .intro-overlay.has-fourth.is-mid2-speaks .intro-portrait-mid,
  body.slot-mode .intro-overlay.has-fourth.is-mid2-speaks .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid):not(.intro-portrait-mid2) {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  /* 4人モード時、左/中央/右 が話している時の暗化も has-fourth 用に追加。
     これがないと、4人目（mid2）が話していないのに他キャラだけ暗化されないままになる。 */
  body.slot-mode .intro-overlay.has-fourth.is-left-speaks .intro-portrait-mid,
  body.slot-mode .intro-overlay.has-fourth.is-left-speaks .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid):not(.intro-portrait-mid2),
  body.slot-mode .intro-overlay.has-fourth.is-mid-speaks .intro-portrait-left,
  body.slot-mode .intro-overlay.has-fourth.is-mid-speaks .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid):not(.intro-portrait-mid2),
  body.slot-mode .intro-overlay.has-fourth.is-right-speaks .intro-portrait-left,
  body.slot-mode .intro-overlay.has-fourth.is-right-speaks .intro-portrait-mid {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }
  /* ナレーション時：4人モードも全員暗くする（誰も話していない） */
  body.slot-mode .intro-overlay.has-fourth.is-narration .intro-portrait-left,
  body.slot-mode .intro-overlay.has-fourth.is-narration .intro-portrait-mid,
  body.slot-mode .intro-overlay.has-fourth.is-narration .intro-portrait-mid2,
  body.slot-mode .intro-overlay.has-fourth.is-narration .intro-portrait:not(.intro-portrait-left):not(.intro-portrait-mid):not(.intro-portrait-mid2) {
    filter: brightness(0.45) saturate(0.7) drop-shadow(0 8px 18px rgba(0,0,0,0.55)) !important;
  }

  /* slot-mode デバッグHUD（画面右上に状態表示、テスト中のみ） */
  .slot-debug-hud {
    display: none;
    position: fixed;
    top: 8px; right: 8px;
    background: rgba(255, 216, 74, 0.95);
    color: #1a1424;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    max-width: 360px;
    line-height: 1.5;
  }
  body.slot-mode .slot-debug-hud { display: block; }

  /* ★デプロイ：slot-mode は常時オン（4スロット配置）だが、テスト用デバッグUIは
     ?slottest=1（body.slot-debug）の時だけ表示する。通常プレイでは全て隠す。 */
  body:not(.slot-debug) .slot-marker,
  body:not(.slot-debug) .slot-debug-hud,
  body:not(.slot-debug) #slotDebugHud,
  body:not(.slot-debug) #slotToggleBtn,
  body:not(.slot-debug) #slotInfoLine { display: none !important; }
  body.slot-mode:not(.slot-debug)::before,
  body.slot-mode:not(.slot-debug)::after { display: none !important; }

  /* スロット位置ガイド（縦線＋中心マーク、テスト中のみ） */
  body.slot-mode::before {
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    left: 25vw;
    width: 0;
    border-left: 1px dashed rgba(78,226,255,0.25);
    z-index: 50;
    pointer-events: none;
  }
  body.slot-mode::after {
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    left: 75vw;
    width: 0;
    border-left: 1px dashed rgba(78,226,255,0.25);
    z-index: 50;
    pointer-events: none;
  }
  .slot-marker {
    display: none;
    position: fixed;
    bottom: 4px;
    transform: translateX(-50%);
    background: rgba(255,216,74,0.85);
    color: #1a1424;
    font-size: 10px; font-family: monospace; font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 51;
    pointer-events: none;
  }
  body.slot-mode .slot-marker { display: block; }

  /* アイテム表示：画面中央を起点に、少し上にシフトして配置 */
  .intro-item-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -78%) scale(0.9);  /* 画面中央より約28%上 */
    width: min(46vw, 520px);
    max-width: 68vw;
    aspect-ratio: 3 / 2;
    border: 1px solid rgba(150, 240, 255, 0.85);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);  /* 暗い背景フィルムを薄く */
    box-shadow:
      0 0 18px rgba(150, 240, 255, 0.55),
      0 0 42px rgba(255, 255, 255, 0.18),
      0 10px 30px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), visibility 0s linear 0.5s;
    overflow: hidden;
    z-index: 2;
  }
  .intro-overlay.has-item .intro-item-stage {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -78%) scale(1);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), visibility 0s linear 0s;
  }
  .intro-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* アイテム枠は ::after グラデーションより前面（z-index:2）に出ているので
       元の明るさで表示する。一律補正はしない */
  }
  /* ★2026-07-09：縦長アイテム(menu-zoom 710x840)は枠自体を縦長比にして、
     左右を切らず・余白も出さず画像全体を収める。高さ基準でサイズを取り全画面幅に対応。 */
  .intro-overlay.item-portrait .intro-item-stage {
    aspect-ratio: 71 / 84;
    width: auto;
    height: min(50vh, 440px);
    max-width: 82vw;
  }
  /* テロップ：画面下部、紙芝居は中央寄せ・研究所は左寄せ
     縦に少しコンパクト＋下部マージン広めで、アイテム枠と離す */
  .intro-textbox {
    position: absolute;
    left: 50%;
    bottom: var(--safe-bottom);
    transform: translateX(-50%);
    width: var(--textbox-max-width);
    background: linear-gradient(180deg, rgba(10, 6, 18, 0.78), rgba(8, 4, 14, 0.92));
    border: 1px solid rgba(78, 226, 255, 0.45);
    border-radius: 14px;
    padding: 12px 24px 12px;
    color: var(--text, #f5e9d3);
    box-shadow: 0 0 30px rgba(78, 226, 255, 0.18), 0 -8px 38px rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 2;
    opacity: 1;
    /* ★2026-06-12：スマホ開閉時のテキストボックススライドを廃止（瞬間スナップに）。
       チュートリアル中・通常会話中に「テキストボックスがふわっと動く」のを防ぐ。
       opacity のフェードのみ残す。 */
    transition: opacity 0.4s ease;
  }
  /* スマホUIが開いている時：テロップの横幅をスマホUIに触れない範囲に縮める
     セーフゾーン変数を使って機種依存をなくす（2026-06-05 リファクタ） */
  body:not(.phone-closed) .intro-textbox {
    left: calc(var(--safe-left) + 60px);   /* 左セーフ + scene-tools ボタン2個分 */
    right: var(--phone-reserved);           /* スマホUI幅 + 右セーフ */
    transform: none;
    width: auto;
    max-width: 720px;
    margin-left: 0;
  }
  /* ホワイトアウト中はテロップも一緒に消える */
  .intro-overlay.is-fading .intro-textbox,
  .intro-overlay.is-fading .intro-portrait,
  .intro-overlay.is-fading .intro-portrait-left,
  .intro-overlay.is-fading .intro-item-stage {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
  }
  .intro-speaker {
    font-family: var(--sans, sans-serif);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--neon-cyan, #4ee2ff);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(78, 226, 255, 0.25);
    text-shadow: 0 0 6px rgba(78, 226, 255, 0.5);
    min-height: 14px;
  }
  .intro-overlay.is-kamishibai .intro-speaker { display: none; }
  /* プレイヤー語り：話者名はプレイヤー名で表示する（橙系のプレイヤーカラー） */
  .intro-overlay.is-player .intro-speaker {
    color: #ffae3d;
    border-bottom-color: rgba(255, 174, 61, 0.3);
    text-shadow: 0 0 6px rgba(255, 174, 61, 0.4);
  }
  .intro-text {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 17px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    white-space: pre-wrap;
    min-height: 36px;
  }
  /* ★2026-06-17：step.emphasis でテロップを強調（重大な真相提示）。赤系＋発光＋微振動 */
  .intro-overlay.is-emphasis .intro-text {
    color: #ff5a6e;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255,70,100,0.55), 0 0 22px rgba(255,70,100,0.3);
    animation: emphasisPulse 1.4s ease-in-out infinite;
  }
  @keyframes emphasisPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.74; }
  }
  /* PC（横長・大画面）ではテロップを少し大きく、ボックスもゆとり */
  @media (min-width: 900px) and (orientation: landscape) {
    .intro-text { font-size: 19px; line-height: 2.05; }
    .intro-textbox { padding: 16px 28px 16px; width: min(94vw, 1100px); }
    .intro-speaker { font-size: 13px; }
  }
  .intro-overlay.is-kamishibai .intro-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 19px;
    text-align: center;
    letter-spacing: 0.16em;
    line-height: 2.1;
  }
  /* 選択肢：テキストボックスの「上」に縦並びで浮かせる（アイテム枠と同じ位置感覚） */
  .intro-choices {
    display: none;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 12px);
    /* ★2026-06-19：スマホで横長になりすぎないよう、アイテム表示くらいの幅に抑える */
    width: min(80vw, 460px);
    z-index: 3;
  }
  .intro-overlay.has-choices .intro-choices { display: flex; }
  .intro-overlay.has-choices .intro-next { display: none; }
  .intro-choice-btn {
    background: rgba(20, 9, 31, 0.7);
    border: 1px solid rgba(78, 226, 255, 0.5);
    color: var(--text, #f5e9d3);
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.08em;
    transition: all 0.2s;
    touch-action: manipulation;
  }
  .intro-choice-btn:hover {
    /* ★2026-07-09：ホバー背景が薄すぎ（0.18）で、明るい背景（フラワーショップ等）では透けて
       文字が読みづらかった。暗い不透明ベース＋シアンの色味を重ねて、どの背景でも読めるようにする。 */
    background:
      linear-gradient(180deg, rgba(78, 226, 255, 0.22), rgba(78, 226, 255, 0.10)),
      rgba(16, 10, 26, 0.92);
    border-color: var(--neon-cyan, #4ee2ff);
    box-shadow: 0 0 16px rgba(78, 226, 255, 0.28);
    transform: translateY(-1px);
  }
  .intro-next {
    appearance: none;
    background: rgba(78, 226, 255, 0.16);
    border: 1px solid rgba(78, 226, 255, 0.5);
    color: var(--neon-cyan, #4ee2ff);
    border-radius: 999px;
    padding: 6px 18px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.18em;
    display: block;
    margin-left: auto;
    transition: all 0.2s;
    touch-action: manipulation;
  }
  .intro-next:hover {
    background: rgba(78, 226, 255, 0.32);
    transform: translateX(2px);
  }
  /* =========================================================
     記憶メーター（2026-06-15 実装）
     ・脳みそ型の常駐UI、画面右上に固定
     ・マスクは file:// CORS 回避のため CSS 内 data URI
     ========================================================= */
  .memory-meter-host {
    position: fixed;
    top: calc(var(--safe-top) + 4px);
    right: calc(var(--safe-right) + 4px);
    width: 100px;
    aspect-ratio: 360 / 317;
    z-index: 290;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
  }
  .memory-meter-host.is-visible {
    opacity: 1;
    visibility: visible;
  }
  /* ★2026-06-20：スマホUI（phone）を開いている間／映画館ショップを開いている間は記憶メーターを隠す。
     メーターは右上に出るため、開いたパネル（phoneの「閉じる」付近・ショップの商品）に重なって見づらい。
     phone を閉じる（body.phone-closed）／ショップを閉じると is-visible により元通り表示される。 */
  body:not(.phone-closed) .memory-meter-host,
  body.cinema-shop-open .memory-meter-host,
  body:has(.cinema-shop.open, .innocent-shop.open, .fukuri-shop.open, .soi-shop.open, .pea-shop.open, .mm-shop.open, .yanagi-shop.open, .yanagi-bar.open, .mm-auction-shop.open, .sweet-memory-shop.open) .memory-meter-host {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
  }
  /* ★2026-06-22：会話中（ダイアログ/イントロ）とミニゲーム中は記憶メーターを隠す。
     会話の最初やリズムゲーム中に右上で点灯して没入を妨げるのを防ぐ。各オーバーレイを閉じれば is-visible により復帰。 */
  body:has(.dialogue-overlay.open, .intro-overlay.open, .rhythm-overlay.open, .bait-overlay.open, .vending-overlay.open, .sk-battle) .memory-meter-host {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .memory-meter-host.is-gaining {
    filter: drop-shadow(0 0 14px rgba(220, 180, 255, 0.85));
    transform: scale(1.04);
  }
  .memory-meter-host.is-losing {
    filter: drop-shadow(0 0 12px rgba(255, 100, 120, 0.6));
  }
  .memory-meter-host .brain-meter {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .memory-meter-host .brain-liquid-mask {
    position: absolute; inset: 0;
    -webkit-mask-image: url("data:image/png;base64,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");
            mask-image: url("data:image/png;base64,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");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    overflow: hidden;
  }
  .memory-meter-host .brain-liquid {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 0%;
    background: linear-gradient(180deg,
      rgba(225, 195, 255, 0.45) 0%,
      rgba(176, 111, 245, 0.55) 35%,
      rgba(130, 70, 210, 0.55) 100%);
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      inset 0 3px 8px rgba(255, 255, 255, 0.25),
      0 0 14px rgba(176, 111, 245, 0.55);
  }
  .memory-meter-host .brain-liquid::before {
    content: '';
    position: absolute;
    top: -2px; left: 0; right: 0; height: 4px;
    background: rgba(230, 200, 255, 0.55);
    filter: blur(1.5px);
    opacity: 0.7;
    animation: memoryMeterWave 3.2s ease-in-out infinite;
  }
  @keyframes memoryMeterWave {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50%      { transform: translateX(2px) scaleY(0.8); }
  }
  .memory-meter-host .brain-outline-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    filter: hue-rotate(30deg) saturate(0.9) brightness(0.95);
  }
  @media (max-width: 480px) {
    .memory-meter-host { width: 80px; }
  }

  /* =========================================================
     ジュリ「フラワーショップ Sweet Memory」記憶提出フォーム
     （2026-06-15 Step4 で追加）
     ・4回目A分岐（juriBottleChoice='yes'）以降に開く
     ・1ターン1回提出可（lastSoldTurn 共有）
     ========================================================= */
  .juri-sell-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 14, 0.75);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 320;  /* intro-overlay(210) より上 */
    padding: 20px;
  }
  .juri-sell-overlay.open { display: flex; }
  .juri-sell-modal {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background:
      radial-gradient(circle at 30% 10%, rgba(255, 200, 220, 0.10), transparent 60%),
      linear-gradient(160deg, rgba(40, 24, 50, 0.97) 0%, rgba(24, 14, 32, 0.98) 100%);
    border: 1.5px solid rgba(255, 180, 210, 0.5);
    border-radius: 14px;
    padding: 24px 28px 22px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5) inset,
      0 0 30px rgba(255, 150, 200, 0.18),
      0 12px 36px rgba(0, 0, 0, 0.65);
    color: #f5e8f3;
    font-family: 'M PLUS Rounded 1c', 'Hiragino Sans', sans-serif;
    position: relative;
  }
  .juri-sell-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 180, 210, 0.15);
    border: 1px solid rgba(255, 180, 210, 0.4);
    color: #ffd1e0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }
  .juri-sell-close:hover { background: rgba(255, 180, 210, 0.3); }
  .juri-sell-header {
    text-align: center;
    margin-bottom: 18px;
  }
  .juri-sell-title {
    font-family: 'EB Garamond', serif;
    font-size: 22px;
    letter-spacing: 0.1em;
    color: #ffd1e0;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .juri-sell-subtitle {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: rgba(255, 209, 224, 0.6);
  }
  .juri-sell-prompt {
    background: rgba(255, 180, 210, 0.08);
    border-left: 3px solid rgba(255, 180, 210, 0.5);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 234, 244, 0.92);
    border-radius: 0 6px 6px 0;
  }
  .juri-sell-body { display: flex; flex-direction: column; gap: 12px; }
  .juri-sell-row { display: flex; flex-direction: column; gap: 4px; }
  .juri-sell-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 209, 224, 0.85);
    letter-spacing: 0.05em;
  }
  .juri-sell-label .count {
    font-family: monospace;
    color: rgba(255, 209, 224, 0.55);
    font-size: 10px;
  }
  .juri-sell-input,
  .juri-sell-textarea {
    background: rgba(15, 10, 22, 0.7);
    border: 1px solid rgba(255, 180, 210, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    color: #f5e8f3;
    font-family: inherit;
    font-size: 16px;
    transition: border-color 0.2s;
    width: 100%;
  }
  .juri-sell-input:focus,
  .juri-sell-textarea:focus {
    outline: none;
    border-color: rgba(255, 180, 210, 0.7);
    box-shadow: 0 0 8px rgba(255, 180, 210, 0.2);
  }
  .juri-sell-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
  .juri-sell-submit {
    background: linear-gradient(180deg, #ffb4ce 0%, #d97aa3 100%);
    color: #2a1424;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    cursor: pointer;
    margin-top: 6px;
    transition: filter 0.2s, transform 0.1s;
    box-shadow: 0 4px 12px rgba(217, 122, 163, 0.35);
  }
  .juri-sell-submit:hover:not(:disabled) { filter: brightness(1.1); }
  .juri-sell-submit:active:not(:disabled) { transform: translateY(1px); }
  .juri-sell-submit:disabled {
    background: rgba(255, 180, 210, 0.18);
    color: rgba(255, 209, 224, 0.5);
    cursor: not-allowed;
    box-shadow: none;
  }
  .juri-sell-locked-msg {
    background: rgba(255, 169, 184, 0.1);
    border: 1px dashed rgba(255, 169, 184, 0.4);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: rgba(255, 209, 224, 0.85);
    text-align: center;
    line-height: 1.5;
  }
  .juri-sell-response {
    margin-top: 12px;
    background: rgba(255, 180, 210, 0.08);
    border: 1px solid rgba(255, 180, 210, 0.3);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #ffeaf3;
    font-style: italic;
  }
  /* ★2026-06-16：サンテの思い出（腕時計）セクション */
  .juri-sante-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 180, 210, 0.25);
  }
  .juri-sante-btn {
    width: 100%;
    padding: 10px 14px;
    background: rgba(220, 180, 100, 0.12);
    border: 1px solid rgba(220, 180, 100, 0.4);
    border-radius: 6px;
    color: #ffe2a8;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .juri-sante-btn:hover {
    background: rgba(220, 180, 100, 0.2);
    border-color: rgba(220, 180, 100, 0.6);
    color: #fff5d0;
  }
  .juri-sante-response {
    margin-top: 12px;
    background: rgba(220, 180, 100, 0.05);
    border: 1px solid rgba(220, 180, 100, 0.3);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #ffeaf3;
  }

  /* =========================================================
     会話ログ モーダル（2026-06-15 実装）
     左上アイコン→中央モーダル形式
     ========================================================= */
  .dialog-log-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 14, 0.78);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 320;
    padding: 20px;
  }
  .dialog-log-overlay.open { display: flex; }
  .dialog-log-modal {
    width: min(720px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(28, 22, 42, 0.97) 0%, rgba(18, 14, 30, 0.98) 100%);
    border: 1.5px solid rgba(255, 248, 225, 0.35);
    border-radius: 14px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5) inset,
      0 0 24px rgba(255, 240, 200, 0.12),
      0 12px 36px rgba(0, 0, 0, 0.65);
    color: #f5ecdf;
    font-family: 'M PLUS Rounded 1c', 'Hiragino Sans', sans-serif;
    position: relative;
    overflow: hidden;
  }
  .dialog-log-header {
    padding: 14px 50px 12px 22px;
    border-bottom: 1px solid rgba(255, 248, 225, 0.18);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .dialog-log-title {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    letter-spacing: 0.12em;
    color: #ffe9b2;
    font-weight: 700;
  }
  .dialog-log-count {
    font-size: 11px;
    color: rgba(255, 233, 178, 0.55);
    font-family: monospace;
    margin-left: auto;
  }
  .dialog-log-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 248, 225, 0.15);
    border: 1px solid rgba(255, 248, 225, 0.4);
    color: #ffe9b2;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }
  .dialog-log-close:hover { background: rgba(255, 248, 225, 0.3); }
  .dialog-log-body {
    overflow-y: auto;
    padding: 14px 22px 18px;
    font-size: 13px;
    line-height: 1.65;
  }
  .dialog-log-body::-webkit-scrollbar { width: 8px; }
  .dialog-log-body::-webkit-scrollbar-thumb { background: rgba(255, 248, 225, 0.2); border-radius: 4px; }
  .dialog-log-entry {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 248, 225, 0.08);
  }
  .dialog-log-entry:last-child { border-bottom: none; margin-bottom: 0; }
  .dialog-log-speaker {
    font-size: 11px;
    color: #ffe9b2;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 3px;
    opacity: 0.85;
  }
  .dialog-log-speaker.is-player { color: #4ee2ff; }
  .dialog-log-speaker.is-narration { color: rgba(255, 233, 178, 0.45); font-style: italic; }
  .dialog-log-speaker.is-info { color: #d2aaff; }
  .dialog-log-text {
    color: #f5ecdf;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .dialog-log-entry.is-narration .dialog-log-text {
    color: rgba(245, 236, 223, 0.78);
    font-style: italic;
  }
  .dialog-log-entry.is-player-mono .dialog-log-text {
    color: rgba(78, 226, 255, 0.85);
  }
  .dialog-log-entry.is-info .dialog-log-text {
    background: rgba(176, 111, 245, 0.08);
    border-left: 2px solid rgba(176, 111, 245, 0.5);
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    font-size: 12px;
  }
  .dialog-log-empty {
    text-align: center;
    color: rgba(255, 248, 225, 0.45);
    padding: 40px 20px;
    font-size: 13px;
    line-height: 1.7;
  }

  /* 会話ログ：ピン留めボタン（2026-06-17 / TR） */
  .dialog-log-entry { position: relative; padding-right: 34px; }
  .dialog-log-pin {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 233, 178, 0.3);
    background: rgba(255, 248, 225, 0.06);
    color: rgba(255, 233, 178, 0.55);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
  .dialog-log-pin:hover { background: rgba(255, 216, 74, 0.18); color: #ffe680; }
  .dialog-log-pin.pinned {
    color: #ffd84a;
    border-color: rgba(255, 216, 74, 0.6);
    background: rgba(255, 216, 74, 0.14);
  }

  /* =========================================================
     メモ モーダル（2026-06-17 実装 / TR）
     タブ切替式：自由メモ / ピン留め / 訪問した店
     会話ログモーダルのトーンを踏襲。
     ========================================================= */
  .memo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 14, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 320;
    padding: 20px;
  }
  .memo-overlay.open { display: flex; }
  .memo-modal {
    width: min(720px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(28, 22, 42, 0.97) 0%, rgba(18, 14, 30, 0.98) 100%);
    border: 1.5px solid rgba(255, 248, 225, 0.35);
    border-radius: 14px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5) inset,
      0 0 24px rgba(255, 240, 200, 0.12),
      0 12px 36px rgba(0, 0, 0, 0.65);
    color: #f5ecdf;
    font-family: 'M PLUS Rounded 1c', 'Hiragino Sans', sans-serif;
    position: relative;
    overflow: hidden;
  }
  .memo-header {
    padding: 14px 50px 10px 22px;
    flex-shrink: 0;
  }
  .memo-title {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    letter-spacing: 0.12em;
    color: #ffe9b2;
    font-weight: 700;
  }
  .memo-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 248, 225, 0.15);
    border: 1px solid rgba(255, 248, 225, 0.4);
    color: #ffe9b2;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    z-index: 2;
  }
  .memo-close:hover { background: rgba(255, 248, 225, 0.3); }
  .memo-tabs {
    display: flex;
    gap: 6px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 248, 225, 0.18);
    flex-shrink: 0;
  }
  .memo-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 233, 178, 0.6);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    min-height: 44px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .memo-tab:hover { color: #ffe9b2; }
  .memo-tab.active {
    color: #ffe680;
    border-bottom-color: #ffd84a;
  }
  .memo-pane {
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 18px 18px;
    min-height: 0;
  }
  .memo-pane.active { display: flex; }
  .memo-pane-hint {
    font-size: 11.5px;
    color: rgba(255, 233, 178, 0.5);
    line-height: 1.6;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .memo-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
    flex-shrink: 0;
  }
  .memo-input {
    flex: 1;
    resize: none;
    background: rgba(10, 8, 16, 0.6);
    border: 1px solid rgba(255, 248, 225, 0.25);
    border-radius: 8px;
    color: #f5ecdf;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .memo-input:focus { outline: none; border-color: rgba(255, 216, 74, 0.6); }
  .memo-input::placeholder { color: rgba(255, 248, 225, 0.35); }
  .memo-add-btn {
    appearance: none;
    flex-shrink: 0;
    min-width: 56px;
    border-radius: 8px;
    border: 1px solid rgba(255, 216, 74, 0.55);
    background: rgba(255, 216, 74, 0.16);
    color: #ffe680;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .memo-add-btn:hover { background: rgba(255, 216, 74, 0.3); }
  .memo-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    padding-right: 4px;
  }
  .memo-list::-webkit-scrollbar { width: 8px; }
  .memo-list::-webkit-scrollbar-thumb { background: rgba(255, 248, 225, 0.2); border-radius: 4px; }
  .memo-empty {
    text-align: center;
    color: rgba(255, 248, 225, 0.45);
    padding: 36px 20px;
    font-size: 13px;
    line-height: 1.7;
  }
  /* 自由メモ・ピンの1件 */
  .memo-item {
    position: relative;
    margin-bottom: 10px;
    padding: 9px 12px;
    padding-right: 34px;
    background: rgba(255, 248, 225, 0.04);
    border: 1px solid rgba(255, 248, 225, 0.1);
    border-radius: 8px;
  }
  .memo-item-meta {
    font-size: 10.5px;
    color: rgba(255, 233, 178, 0.6);
    font-family: monospace;
    margin-bottom: 3px;
    letter-spacing: 0.04em;
  }
  .memo-item-meta .memo-speaker { color: #ffe9b2; font-weight: 700; }
  .memo-item-text {
    font-size: 13px;
    line-height: 1.6;
    color: #f5ecdf;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .memo-item-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 248, 225, 0.2);
    background: rgba(255, 248, 225, 0.05);
    color: rgba(255, 200, 200, 0.7);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
  }
  .memo-item-del:hover { background: rgba(255, 80, 100, 0.25); color: #ffd0d0; }
  /* 訪問した店：都市見出し＋店カード */
  .memo-city-head {
    font-family: 'EB Garamond', serif;
    font-size: 13px;
    font-weight: 700;
    color: #ffd84a;
    letter-spacing: 0.1em;
    margin: 12px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px dashed rgba(255, 216, 74, 0.3);
  }
  .memo-city-head:first-child { margin-top: 0; }
  .memo-shop {
    margin-bottom: 10px;
    padding: 9px 12px;
    background: rgba(255, 248, 225, 0.04);
    border: 1px solid rgba(255, 248, 225, 0.1);
    border-radius: 8px;
  }
  .memo-shop-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffe9b2;
    margin-bottom: 2px;
  }
  .memo-shop-tag {
    display: inline-block;
    font-size: 11px;
    color: #ffd84a;
    background: rgba(255, 216, 74, 0.12);
    border-radius: 4px;
    padding: 1px 7px;
    margin-bottom: 5px;
  }
  .memo-shop-npc {
    font-size: 11.5px;
    color: rgba(78, 226, 255, 0.85);
    margin-bottom: 4px;
  }
  .memo-shop-desc {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(245, 236, 223, 0.82);
    white-space: pre-wrap;
    word-break: break-word;
  }
  @media (max-width: 700px) {
    .memo-tab { font-size: 12px; padding: 9px 9px; }
    .memo-modal { max-height: 90vh; }
  }



  /* =========================================================
     === 左上フローティングツールバー（音設定 / 背景を見る）===
     どのシーンでも画面の邪魔にならない左上に控えめに表示。
     スマホでテキストボックスと重なるのを避けるため、左下→左上に変更。
     ・音アイコン：BGM の ON/OFF（音量パネルを開く）
     ・背景アイコン：bg-view モード切替（立ち絵・テロップを一時非表示）
     ・横並び（row）：2つのアイコンを左右に並べる
     ・音量パネルは音アイコンの真下に展開（下方向）
     ========================================================= */
  .scene-tools {
    position: fixed;
    left: var(--safe-left);
    top: var(--safe-top);
    display: flex;
    flex-direction: row;
    gap: 10px;
    /* 2026-06-06：z=100だと .intro-overlay (z=210) に完全に覆われて
       カーソルが届かず、見た目も消える。300 にして overlay の上に出す。 */
    z-index: 300;
  }
  /* ★警告文・プレイヤー設定の間は左上ツール（音/背景/ログ/メモ）を隠す。
     これらは紙芝居が始まってから使うものなので、それまでは出さない。 */
  body.pre-intro-setup .scene-tools { display: none !important; }
  /* ★2026-06-22：ミニゲーム中（リズム/バイト/自販機/回避バトル）は左上ツール（音量等）を
     非表示＆操作不能にする。ゲームのタップ操作を誤爆させないため。オーバーレイを閉じれば自動復帰。 */
  body:has(.rhythm-overlay.open, .bait-overlay.open, .vending-overlay.open, .sk-battle) .scene-tools,
  body:has(.rhythm-overlay.open, .bait-overlay.open, .vending-overlay.open, .sk-battle) .sound-panel {
    display: none !important;
    pointer-events: none !important;
  }
  .scene-tool-btn {
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* コントラスト強化（2026-06-06）：暗背景の映画館・洞窟などでも視認可。
       不透明度を上げて存在を明確にし、外側に薄い発光で輪郭を浮き立たせる。 */
    background: rgba(20, 12, 30, 0.88);
    border: 1.5px solid rgba(255, 248, 225, 0.55);
    color: rgba(255, 248, 225, 0.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(0, 0, 0, 0.3);
  }
  .scene-tool-btn svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .scene-tool-btn:hover {
    background: rgba(40, 24, 60, 0.85);
    color: #ffe680;
    border-color: rgba(255, 216, 74, 0.5);
    transform: translateY(-1px);
  }
  .scene-tool-btn.active {
    background: rgba(255, 216, 74, 0.18);
    color: #ffe680;
    border-color: rgba(255, 216, 74, 0.7);
  }
  /* 音オフ表示の斜線オーバーレイ */
  .scene-tool-btn.is-muted svg .mute-slash {
    opacity: 1;
    stroke: #ff6680;
  }
  .mute-slash { opacity: 0; }
  /* bg-view モード中は背景見るアイコンを active 表示 */
  body.bg-view-mode .scene-tool-btn[data-tool="bgview"] {
    background: rgba(255, 216, 74, 0.25);
    color: #ffe680;
    border-color: #ffe680;
  }
  /* スマホ：少し小さめ＋音量パネルの top 位置も追従 */
  @media (max-width: 700px), (max-height: 500px) {
    .scene-tool-btn { width: 36px; height: 36px; }
    .scene-tool-btn svg { width: 18px; height: 18px; }
    .scene-tools { gap: 8px; }
    /* セーフ上端 + ボタン36px + 8px間隔 */
    .sound-panel {
      top: calc(var(--safe-top) + 44px);
      min-width: 200px;
      padding: 12px 14px;
    }
  }

  /* === 音量パネル：音アイコンの真下にポップアップ === */
  /* scene-tools が左上配置のため、パネルも音アイコンの下方向に展開 */
  .sound-panel {
    position: fixed;
    left: var(--safe-left);
    top: calc(var(--safe-top) + 50px);  /* セーフ上端 + ボタン高さ40 + 10間隔 */
    background: rgba(20, 12, 30, 0.92);
    border: 1px solid rgba(255, 248, 225, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    min-width: 220px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
    z-index: 301;  /* scene-tools(300) より上 */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    color: rgba(255, 248, 225, 0.95);
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  }
  .sound-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .sound-panel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .sound-panel-row:last-child { margin-bottom: 0; }
  .sound-panel-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255, 230, 128, 0.85);
    min-width: 56px;
  }
  .sound-panel-value {
    font-size: 12px;
    color: rgba(255, 248, 225, 0.7);
    font-family: monospace;
    min-width: 32px;
    text-align: right;
  }
  /* スライダー：黄色寄りでカスタムデザイン */
  .sound-panel-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 248, 225, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }
  .sound-panel-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #ffe680;
    border: 1px solid rgba(255, 216, 74, 0.6);
    box-shadow: 0 0 8px rgba(255, 216, 74, 0.5);
    cursor: pointer;
  }
  .sound-panel-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #ffe680;
    border: 1px solid rgba(255, 216, 74, 0.6);
    box-shadow: 0 0 8px rgba(255, 216, 74, 0.5);
    cursor: pointer;
  }
  .sound-panel-mute-btn {
    appearance: none;
    background: rgba(255, 248, 225, 0.08);
    border: 1px solid rgba(255, 248, 225, 0.25);
    color: rgba(255, 248, 225, 0.85);
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-family: inherit;
    transition: all 0.2s;
  }
  .sound-panel-mute-btn:hover {
    background: rgba(255, 248, 225, 0.18);
    color: #fff8e1;
  }
  .sound-panel-mute-btn.active {
    background: rgba(255, 100, 128, 0.2);
    border-color: rgba(255, 100, 128, 0.6);
    color: #ff8090;
  }
  @media (max-width: 700px), (max-height: 500px) {
    .sound-panel {
      left: calc(env(safe-area-inset-left, 0px) + 56px);
      min-width: 200px;
      padding: 12px 14px;
    }
  }
  /* bg-view-mode 中：立ち絵・テロップ・選択肢・freetext を非表示。
     背景＋場所名（locationLabel）だけが見える状態。 */
  body.bg-view-mode .intro-portrait,
  body.bg-view-mode .intro-portrait-left,
  body.bg-view-mode .intro-portrait-mid,
  body.bg-view-mode .intro-portrait-mid2,
  body.bg-view-mode .intro-textbox,
  body.bg-view-mode .intro-choices,
  body.bg-view-mode .intro-freetext {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease !important;
  }
  /* bg-view-mode 中であることの控えめなヒント（画面上部に小さく） */
  .bg-view-hint {
    position: fixed;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 230, 128, 0.95);
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid rgba(255, 216, 74, 0.4);
    font-size: 12px;
    letter-spacing: 0.2em;
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  body.bg-view-mode .bg-view-hint {
    opacity: 1;
  }

  /* =========================================================
     === ロケーションタイトルカード（場面転換演出）===
     step.locationTitle / locationSubtitle を指定すると、次の流れで再生：
       (1) 背景を 1.0s 単独で見せる（立ち絵・テロップは fade out）
       (2) タイトルが 0.7s でふわっと表示
       (3) 1.7s 維持
       (4) 0.7s でふわっと消失
       (5) 立ち絵・テロップが 0.6s でふわっと登場
     合計 4.7 秒。アニメーションは CSS keyframes で同期。
     フォント：C案（日本語=Klee One / 英=EB Garamond Italic）— 古典物語系。
     背景に負けないよう、楕円ビネット＋多層 text-shadow で文字を浮き立たせる。
     ========================================================= */
  .location-title-card {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* ★2026-06-10：introOverlay(z=210) 内に配置されるため、その上に来るよう 220 に引き上げ。
       テストパネル(z=10000) より下、立ち絵/テロップより確実に上のレイヤー */
    z-index: 220;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    /* ★2026-06-10：親 introOverlay が visibility:hidden の時でも演出は見せたいので強制 visible */
    visibility: visible !important;
  }
  /* 子要素（メイン/サブ/装飾線）も visibility 継承の影響を受けないよう保護 */
  .location-title-card .location-title-main,
  .location-title-card .location-title-sub,
  .location-title-card .location-title-divider {
    visibility: visible !important;
  }
  /* 背景に負けないビネット：中央が暗くなる楕円グラデ */
  .location-title-card::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 110vw; height: 60vh;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: -1;
  }
  body.is-location-intro .location-title-card {
    animation: locationCardCycle 4.7s ease-in-out forwards;
  }
  @keyframes locationCardCycle {
    /* 1.0s 待機 → 0.7s fade-in → 1.7s 維持 → 0.7s fade-out → 0.6s 余韻 = 合計4.7s */
    0%        { opacity: 0; transform: translateY(-20px); }
    21%       { opacity: 0; transform: translateY(-20px); }  /* 1.0s 待機 */
    36%       { opacity: 1; transform: translateY(0); }      /* 0.7s fade-in 完了 */
    72%       { opacity: 1; transform: translateY(0); }      /* 1.7s 維持 */
    87%       { opacity: 0; transform: translateY(20px); }   /* 0.7s fade-out */
    100%      { opacity: 0; transform: translateY(20px); }
  }
  /* タイトル本体（C案）：Klee One — 手書き風の優しい曲線 */
  .location-title-main {
    font-family: 'Klee One', 'Shippori Mincho', serif;
    color: #fff8e1;
    font-size: clamp(38px, 6vw, 72px);
    letter-spacing: 0.25em;
    font-weight: 600;
    margin: 22px 0 8px;
    padding-left: 0.25em;  /* letter-spacing 分のセンタリング補正 */
    text-shadow:
      0 0 4px rgba(0, 0, 0, 1),
      0 0 12px rgba(0, 0, 0, 0.9),
      0 0 28px rgba(0, 0, 0, 0.85),
      0 4px 16px rgba(0, 0, 0, 0.7),
      0 0 60px rgba(255, 200, 100, 0.4);
  }
  /* サブタイトル（英字）：EB Garamond Italic — 古典セリフ体 */
  .location-title-sub {
    font-family: 'EB Garamond', 'Cormorant Garamond', serif;
    font-style: italic;
    color: rgba(255, 216, 74, 0.92);
    font-size: clamp(14px, 1.7vw, 19px);
    letter-spacing: 0.5em;
    font-weight: 500;
    padding-left: 0.5em;
    text-shadow:
      0 0 4px rgba(0, 0, 0, 1),
      0 0 12px rgba(0, 0, 0, 0.8),
      0 0 28px rgba(0, 0, 0, 0.6);
  }
  /* タイトルカード上下の細い金色装飾線＋◆ オーナメント */
  .location-title-divider {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 216, 74, 0.85), transparent);
    margin: 18px 0;
    position: relative;
  }
  .location-title-divider::before,
  .location-title-divider::after {
    content: '◆';
    position: absolute;
    top: 50%;
    font-size: 8px;
    color: rgba(255, 216, 74, 0.85);
  }
  .location-title-divider::before { left: 50%; transform: translate(-15px, -50%); }
  .location-title-divider::after  { left: 50%; transform: translate( 7px, -50%); }
  body.is-location-intro .location-title-divider {
    animation: locationDividerExpand 4.7s ease-in-out forwards;
  }
  /* ★2026-06-10：ターン演出用 白色バリアント
     ロケーションタイトルと同じ4.7sアニメサイクルで動作。
     色だけ白系に統一（メイン白、サブ白、装飾線白、グロー白）。 */
  .location-title-card.is-turn-card .location-title-main {
    color: #ffffff;
    text-shadow:
      0 0 4px rgba(0, 0, 0, 1),
      0 0 12px rgba(0, 0, 0, 0.9),
      0 0 28px rgba(0, 0, 0, 0.85),
      0 4px 16px rgba(0, 0, 0, 0.7),
      0 0 60px rgba(255, 255, 255, 0.45);
  }
  .location-title-card.is-turn-card .location-title-sub {
    color: rgba(255, 255, 255, 0.92);
    text-shadow:
      0 0 4px rgba(0, 0, 0, 1),
      0 0 12px rgba(0, 0, 0, 0.8),
      0 0 28px rgba(0, 0, 0, 0.6);
  }
  .location-title-card.is-turn-card .location-title-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  }
  .location-title-card.is-turn-card .location-title-divider::before,
  .location-title-card.is-turn-card .location-title-divider::after {
    color: rgba(255, 255, 255, 0.85);
  }
  @keyframes locationDividerExpand {
    0%, 21% { width: 0; opacity: 0; }
    40%     { width: 280px; opacity: 1; }
    72%     { width: 280px; opacity: 1; }
    87%     { width: 0; opacity: 0; }
    100%    { width: 0; opacity: 0; }
  }
  /* 立ち絵・テロップ：場面転換中は最初に隠れ、 最後にふわっと登場 */
  body.is-location-intro .intro-portrait,
  body.is-location-intro .intro-portrait-left,
  body.is-location-intro .intro-portrait-mid,
  body.is-location-intro .intro-portrait-mid2,
  body.is-location-intro .intro-textbox {
    animation: locationContentReveal 4.7s ease-in-out forwards !important;
  }
  @keyframes locationContentReveal {
    0%, 87% { opacity: 0; }   /* 87% ≈ 4.1秒：タイトルが消えるまで非表示 */
    100%    { opacity: 1; }
  }

  /* === 少年の名付け：シネマ風モーダル（namingMode 限定） ===
     freetext step に namingMode:true が指定された時にだけ表示される。
     画面全体を暗くし、少年の顔（円形）と中央モーダルだけを照らす演出。 */
  .intro-naming-stage {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 280;
    background: radial-gradient(circle at center, rgba(0,0,0,0.55) 25%, rgba(0,0,0,0.88) 70%);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .intro-overlay.has-naming .intro-naming-stage { display: flex; }
  .intro-naming-boy {
    width: min(260px, 22vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center top;
    box-shadow:
      0 0 0 4px rgba(255, 230, 200, 0.4),
      0 0 60px rgba(255, 200, 100, 0.5),
      0 12px 40px rgba(0, 0, 0, 0.7);
    margin-bottom: 32px;
  }
  .intro-naming-modal {
    width: min(680px, 90vw);
    background: linear-gradient(180deg, rgba(20, 12, 30, 0.95), rgba(10, 6, 18, 0.98));
    border: 1px solid rgba(255, 216, 74, 0.45);
    border-radius: 18px;
    padding: 32px 40px;
    box-shadow:
      0 12px 60px rgba(0, 0, 0, 0.85),
      0 0 80px rgba(255, 200, 100, 0.25);
    text-align: center;
  }
  .intro-naming-title {
    font-size: 12px;
    color: #ffd84a;
    letter-spacing: 0.5em;
    margin-bottom: 12px;
  }
  .intro-naming-headline {
    font-size: 22px;
    color: #fff8e1;
    margin-bottom: 24px;
    font-weight: normal;
    letter-spacing: 0.1em;
  }
  .intro-naming-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 216, 74, 0.5);
    color: #fff8e1;
    font-size: 36px;
    font-family: inherit;
    text-align: center;
    padding: 12px 0;
    margin-bottom: 24px;
    letter-spacing: 0.2em;
    outline: none;
    transition: border-color 0.3s;
  }
  .intro-naming-input::placeholder { color: rgba(255, 248, 225, 0.3); font-weight: 100; }
  .intro-naming-input:focus { border-bottom-color: #ffd84a; }
  .intro-naming-submit {
    background: linear-gradient(135deg, #ffd84a, #ffa500);
    color: #1a1424;
    border: none;
    padding: 14px 36px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.2em;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(255, 200, 0, 0.4);
    transition: all 0.2s;
  }
  .intro-naming-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 200, 0, 0.6);
  }
  .intro-naming-submit:disabled {
    background: linear-gradient(135deg, #888, #555);
    cursor: not-allowed;
    opacity: 0.6;
  }
  @media (max-width: 700px), (max-height: 500px) {
    /* ★2026-06-20：スマホ（特に横向き＝高さが低い）で名付けUIが画面からはみ出し、
       少年アイコンの上と「この名で呼ぶ」ボタンの下が切れていた。アイコン縮小＋ボックス縮小＋
       字間を自然に詰めて全体の縦サイズを下げ、中央寄せで画面内に収める（＝アイコンも下がる）。 */
    .intro-naming-boy { width: 118px; margin-bottom: 12px; }
    .intro-naming-modal { padding: 18px 24px; }
    .intro-naming-headline { font-size: 17px; letter-spacing: 0.02em; margin-bottom: 14px; }
    .intro-naming-input { font-size: 26px; letter-spacing: 0.06em; padding: 8px 0; margin-bottom: 14px; }
    .intro-naming-submit { padding: 12px 30px; font-size: 14px; }
  }
  /* naming 中は通常テロップ・スポットライト類を非表示 */
  .intro-overlay.has-naming .intro-textbox,
  .intro-overlay.has-naming .intro-portrait,
  .intro-overlay.has-naming .intro-portrait-left,
  .intro-overlay.has-naming .intro-portrait-mid,
  .intro-overlay.has-naming .intro-portrait-mid2,
  .intro-overlay.has-naming .intro-freetext { opacity: 0 !important; pointer-events: none; }

  /* === 自由回答UI（freetext）：左下にタブ表示、押すと展開 === */
  .intro-freetext {
    display: none;
    position: fixed;
    left: var(--safe-left);
    bottom: var(--safe-bottom);
    z-index: 12;
  }
  .intro-overlay.has-freetext .intro-freetext { display: block; }
  .intro-overlay.has-freetext .intro-next { display: none; }
  /* freetext時はテキストボックスを見えなくする（要素は残す）→
     子要素の intro-freetext だけ visibility:visible で復活させて入力タブを残す */
  .intro-overlay.has-freetext .intro-textbox {
    visibility: hidden;
    pointer-events: none;
    background: transparent;
    border: none;
    box-shadow: none;
    /* visibility:hidden でも backdrop-filter は効き続けるブラウザがあり
       （特に iOS Safari）、画面下部にぼかしレイヤーだけ残ってモザイク状に
       見える現象が起きるため、明示的にリセットする */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* ★2026-07-09：重要。子要素の .intro-freetext は position:fixed だが、
       .intro-textbox に transform があると fixed の基準が“テキストボックス”になり、
       is-big の top:50% が「画面下部の小箱の中央」＝画面下のままになってしまう。
       自由入力表示中は transform を解除し、fixed の基準をビューポートに戻す。 */
    transform: none !important;
  }
  .intro-overlay.has-freetext .intro-freetext {
    visibility: visible;
    pointer-events: auto;
  }
  /* freetext時：立ち絵を非表示にして背景を見やすくする
     ::after の暗いグラデーションも薄めて背景全体を見せる */
  .intro-overlay.has-freetext .intro-portrait,
  .intro-overlay.has-freetext .intro-portrait-left,
  .intro-overlay.has-freetext .intro-portrait-mid {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
  }
  .intro-overlay.has-freetext::after {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  /* 折りたたみ時のタブボタン
     ※ backdrop-filter は明るい背景だとモザイク状に滲んで見えるため使わない。
     代わりに不透明寄りの背景色＋シアン縁取りで視認性を確保 */
  .intro-freetext-toggle {
    background: rgba(10, 22, 36, 0.85);
    border: 1px solid rgba(78, 226, 255, 0.75);
    color: var(--neon-cyan, #4ee2ff);
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    letter-spacing: 0.12em;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 18px rgba(78,226,255,0.4);
    transition: all 0.2s;
    touch-action: manipulation;
  }
  .intro-freetext-toggle:hover {
    background: rgba(78, 226, 255, 0.38);
    transform: translateY(-2px);
  }
  .intro-freetext.is-open .intro-freetext-toggle { display: none; }
  /* 展開時のパネル（input + submit） */
  .intro-freetext-panel {
    display: none;
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(20, 9, 31, 0.95), rgba(8, 4, 14, 0.98));
    border: 1px solid rgba(78, 226, 255, 0.55);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 28px rgba(78,226,255,0.3);
    backdrop-filter: blur(8px);
    /* ★2026-07-09：背景を見せて決めるタイプ（洞窟・門前・BAR入場）は横だけ画面の約半分まで拡大。
       高さはそのまま（1〜2行）で、右側に背景が見える状態を保ちつつテキストを広く見せる。 */
    max-width: min(92vw, 980px);
    width: min(92vw, 980px);
  }
  .intro-freetext.is-open .intro-freetext-panel { display: flex; }
  /* プロンプト（質問文）。大きい入力欄（is-big）の時だけ表示 */
  .intro-freetext-prompt {
    display: none;
    color: rgba(205, 240, 255, 0.95);
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.65;
  }
  .intro-freetext-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }
  .intro-freetext-input {
    flex: 1;
    background: rgba(10, 6, 18, 0.7);
    border: 1px solid rgba(78, 226, 255, 0.5);
    color: var(--text, #f5e9d3);
    padding: 9px 12px;
    border-radius: 8px;
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1.55;
    outline: none;
    min-width: 0;
    height: 42px;            /* 通常（左下タブ）は1〜2行のコンパクト */
    resize: none;
    overflow-y: auto;
    transition: border-color 0.2s;
  }
  /* === 大きい中央入力欄（行動・言動を書く場面） === */
  .intro-freetext.is-big {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    /* ★2026-07-09：横だけでなく縦も画面中央に（自分の文章を見やすく確認するため） */
    transform: translate(-50%, -50%);
    width: min(92vw, 680px);
    z-index: 14;
  }
  .intro-freetext.is-big .intro-freetext-panel {
    max-width: none;
    width: 100%;
    padding: 16px 18px;
  }
  .intro-freetext.is-big .intro-freetext-prompt { display: block; margin-bottom: 4px; font-size: 15px; }
  .intro-freetext.is-big .intro-freetext-input {
    height: 160px;          /* 複数行が見えるサイズ（自分の文章を確認しやすく） */
    font-size: 16px;
    line-height: 1.7;
  }
  .intro-freetext-input:focus {
    border-color: var(--neon-cyan, #4ee2ff);
    box-shadow: 0 0 12px rgba(78, 226, 255, 0.25);
  }
  .intro-freetext-submit {
    background: rgba(78, 226, 255, 0.22);
    border: 1px solid rgba(78, 226, 255, 0.6);
    color: var(--neon-cyan, #4ee2ff);
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0.14em;
    transition: all 0.2s;
    touch-action: manipulation;
    white-space: nowrap;
  }
  .intro-freetext-submit:hover {
    background: rgba(78, 226, 255, 0.4);
    transform: translateY(-1px);
  }
  /* === 言語の記憶を持っていない時の門番セリフ：記号化フォント === */
  .intro-overlay.is-encoded .intro-text {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.18em;
    color: rgba(245, 233, 211, 0.7);
    font-style: italic;
  }
  @media (max-width: 700px), (max-height: 500px) {
    .intro-freetext { gap: 6px; }
    .intro-freetext-input { font-size: 16px; padding: 8px 12px; }
    .intro-freetext-submit { font-size: 12px; padding: 8px 14px; }
  }
  @media (max-width: 700px), (max-height: 500px) {
    /* スマホ／横画面：PC と同じ VN フレーミングを使う（共通化）
       ・height: 110lvh, bottom: -20lvh（PC基準と同値、lvh で iOS キーボード問題回避）
       ・max-width: 50vw（横長キャラの幅制約を解放） */
    .intro-portrait {
      height: 110lvh;
      bottom: -20lvh;
      right: 1vw;
      max-width: 50vw;
    }
    .intro-portrait-left { left: 1vw; right: auto; max-width: 50vw; }
    .intro-textbox { padding: 14px 20px 14px; width: 94vw; }
    .intro-text { font-size: 14px; line-height: 1.85; }
    .intro-overlay.is-kamishibai .intro-text { font-size: 16px; line-height: 1.95; }
    /* アイテムをテロップ直上に配置（テロップ高さ ≈ 120px と safe-area を考慮） */
    .intro-item-stage {
      top: auto;
      bottom: calc(135px + max(env(safe-area-inset-bottom, 0px), 16px));
      transform: translate(-50%, 0) scale(0.9);
      width: min(42vw, 320px);
      max-width: 60vw;
    }
    .intro-overlay.has-item .intro-item-stage {
      transform: translate(-50%, 0) scale(1);
    }
  }

  /* ============================================================
     オープニング演出（2026-06-17 / TR）
     ============================================================ */
  .opening-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;            /* player-setup-modal(200) を覆う */
    background: #05030a;
    display: none;
    overflow: hidden;
  }
  .opening-overlay.open { display: block; }
  .opening-overlay.fade-out { animation: openingFadeOut 0.8s ease forwards; }
  @keyframes openingFadeOut { from { opacity: 1; } to { opacity: 0; } }
  .opening-bgwrap {
    position: absolute;
    inset: 0;
    transform: scale(1.04);
    animation: openingKenBurns 18s ease-out forwards;
  }
  @keyframes openingKenBurns {
    from { transform: scale(1.10); }
    to   { transform: scale(1.00); }
  }
  .opening-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .opening-bg-base  { background-image: url('assets/intro/cover.webp'); }
  /* タイトル入り表紙：クロスフェードで左にタイトルがふわっと浮かぶ */
  .opening-bg-title {
    background-image: url('assets/intro/cover-title.webp');
    opacity: 0;
    transition: opacity 1.9s ease;
  }
  .opening-overlay.title-shown .opening-bg-title { opacity: 1; }
  .opening-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(5,3,10,0.5) 100%),
      linear-gradient(0deg, rgba(5,3,10,0.72) 0%, transparent 30%);
  }
  /* ステージ共通 */
  .opening-stage {
    position: absolute;
    inset: 0;
    display: none;
    z-index: 3;
  }
  .opening-stage.active { display: flex; }
  /* ステージ1：プレイスタート（中央下） */
  .opening-stage-start {
    align-items: flex-end;
    justify-content: center;
  }
  .opening-start-btn {
    appearance: none;
    margin-bottom: clamp(48px, 12vh, 120px);
    background: transparent;
    border: none;
    color: #f5ecdf;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    animation: openingBlink 1.6s ease-in-out infinite;
  }
  .opening-start-main {
    font-family: 'EB Garamond', serif;
    font-size: clamp(22px, 4vw, 34px);
    letter-spacing: 0.28em;
    font-weight: 700;
    text-shadow: 0 0 16px rgba(255,225,170,0.55), 0 2px 8px rgba(0,0,0,0.8);
  }
  .opening-start-sub {
    font-size: clamp(10px, 1.6vw, 13px);
    letter-spacing: 0.18em;
    color: rgba(255,240,210,0.78);
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  }
  @keyframes openingBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.28; }
  }
  /* ステージ2：注意文 */
  .opening-stage-warn {
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5,3,10,0.55);
  }
  .opening-warn-card {
    width: min(560px, 92%);
    max-height: 84vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(160deg, rgba(26,18,34,0.96), rgba(14,10,22,0.98));
    border: 1px solid rgba(255,210,150,0.35);
    border-radius: 14px;
    padding: 26px 26px 24px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.7), 0 0 22px rgba(255,200,150,0.1);
    color: #f1e7da;
    text-align: center;
    animation: warnFadeUp 0.7s ease both;
  }
  @keyframes warnFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .opening-warn-head {
    font-family: 'EB Garamond', serif;
    font-size: clamp(15px, 2.4vw, 18px);
    letter-spacing: 0.12em;
    color: #ffd9a0;
    font-weight: 700;
    margin-bottom: 14px;
  }
  .opening-warn-body {
    font-size: clamp(12.5px, 1.9vw, 14.5px);
    line-height: 1.95;
    color: rgba(241,231,218,0.92);
    white-space: pre-wrap;
    text-align: left;
    margin: 0 0 20px;
  }
  /* ★ロスト忠告（トラウマ忠告とは別枠。罫線で区切り、見出し色を変える） */
  .opening-warn-lost {
    margin: 0 0 20px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255,210,150,0.22);
  }
  .opening-warn-lost-head {
    font-family: 'EB Garamond', serif;
    font-size: clamp(13px, 2vw, 15px);
    letter-spacing: 0.1em;
    color: #ff9d7a;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: left;
  }
  .opening-warn-lost-body {
    font-size: clamp(12px, 1.8vw, 13.5px);
    line-height: 1.9;
    color: rgba(241,231,218,0.86);
    text-align: left;
    margin: 0;
  }
  .opening-warn-agree {
    appearance: none;
    min-height: 48px;
    padding: 0 30px;
    border-radius: 10px;
    border: 1px solid rgba(255,210,150,0.6);
    background: rgba(255,210,150,0.16);
    color: #ffe6c2;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .opening-warn-agree:hover { background: rgba(255,210,150,0.3); }
  @media (max-width: 700px) {
    /* 縦持ち時はタイトル（左）が切れないよう全体を収める */
    .opening-bg { background-size: contain; background-color: #05030a; }
  }

  /* ===== Player setup modal (shown at scenario start) ===== */
  /* ★2026-06-11：ポケモン風 2ステップ プレイヤー設定モーダル */
  .player-setup-modal {
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(78,226,255,0.06), transparent 60%),
      radial-gradient(ellipse at 50% 80%, rgba(255,90,200,0.06), transparent 60%),
      rgba(5, 3, 9, 0.95);
    backdrop-filter: blur(20px);
    z-index: 200;
    display: block;
    animation: setupFade 0.4s ease-out;
    overflow: hidden;
  }
  .player-setup-modal.hidden { display: none; }
  @keyframes setupFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* 個別ステップは absolute で全画面に重ねる */
  .player-setup-step {
    position: absolute;
    inset: 0;
  }
  .player-setup-step[hidden] { display: none; }

  /* ===== STEP 1: キャラ選択 ===== */
  .player-setup-step1 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .player-setup-step1-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--neon-magenta);
    font-family: var(--mincho);
    /* ★2026-07-09：タイトルを大きく */
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-shadow: 0 0 18px rgba(255, 90, 200, 0.6);
    text-align: center;
    z-index: 3;
  }
  .player-setup-step1-subtitle {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-dim);
    font-family: var(--serif);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.22em;
    z-index: 3;
  }
  /* ★2026-07-09：会話の4人配置立ち絵と同じフォーマット（大きめ・下端合わせ）にし、
     両端ではなく中央寄り（内側スロット）に配置する。中央ボタンはこの上（z-index上）に出る。 */
  .player-setup-portrait {
    position: absolute;
    bottom: -18vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 40vw;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    filter:
      brightness(0.6) grayscale(0.3)
      drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
    transition: filter 0.4s ease, transform 0.4s ease;
    z-index: 1;
  }
  /* 中央寄り：左は中心≈35vw、右は中心≈65vw（会話の内側2スロット相当） */
  .player-setup-portrait-left  { left: 15vw;  right: auto; }
  .player-setup-portrait-right { right: 15vw; left: auto; }
  /* 仮選択された方が光る（会話モードと同じ白縁発光） */
  .player-setup-modal[data-choice="flame"] .player-setup-portrait-left,
  .player-setup-modal[data-choice="smoke"] .player-setup-portrait-right {
    filter:
      brightness(1.08) grayscale(0)
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.55))
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.32))
      drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
    transform: translateY(-4px);
  }
  /* 中央ボタン群 */
  .player-setup-step1-buttons {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(28vw, 240px);
  }
  .player-setup-choice-btn,
  .player-setup-confirm-btn {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
  }
  .player-setup-choice-btn {
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(40, 22, 60, 0.85), rgba(20, 10, 32, 0.85));
    border: 1px solid rgba(255, 90, 200, 0.35);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .player-setup-choice-btn:hover {
    border-color: rgba(255, 90, 200, 0.6);
    background: linear-gradient(180deg, rgba(50, 28, 70, 0.95), rgba(30, 14, 42, 0.95));
  }
  .player-setup-modal[data-choice="flame"] .player-setup-choice-btn[data-char="flame"],
  .player-setup-modal[data-choice="smoke"] .player-setup-choice-btn[data-char="smoke"] {
    border-color: var(--neon-magenta);
    background: linear-gradient(180deg, rgba(255, 90, 200, 0.25), rgba(157, 78, 255, 0.25));
    box-shadow: 0 0 16px rgba(255, 90, 200, 0.4);
    color: #fff;
  }
  .player-setup-confirm-btn {
    margin-top: 4px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(157, 78, 255, 0.55), rgba(255, 90, 200, 0.55));
    border: 1px solid rgba(255, 90, 200, 0.65);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-align: center;
  }
  .player-setup-confirm-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(157, 78, 255, 0.75), rgba(255, 90, 200, 0.75));
    box-shadow: 0 4px 24px rgba(255, 90, 200, 0.5);
  }
  .player-setup-confirm-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .player-setup-step1-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(245, 233, 211, 0.4);
    font-size: 10px;
    letter-spacing: 0.12em;
    z-index: 2;
  }

  /* ===== STEP 2: 名前入力 ===== */
  /* ★2026-06-19：両端寄せ(space-between)だと端が切れ／間延びするため、
     立ち絵とフォームを中央にまとめて配置し、画面端から離す。 */
  .player-setup-step2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 6vw, 90px);
    padding: 0 28px;
  }
  /* ★2026-06-19：左上だと分かりづらいため「…でいいかな？」の隣にインライン配置 */
  .player-setup-back-btn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 11px 3px 9px;
    background: rgba(40, 22, 60, 0.7);
    border: 1px solid rgba(255, 90, 200, 0.3);
    border-radius: 14px;
    color: var(--text);
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
  }
  .player-setup-back-btn:hover {
    border-color: rgba(255, 90, 200, 0.6);
    background: rgba(50, 28, 70, 0.85);
  }
  /* ★2026-07-09：会話の4人配置立ち絵と同じフォーマット（大きめ・下端合わせ）。フォームは右側。 */
  .player-setup-step2-portrait {
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    align-self: flex-end;
    margin-bottom: -18vh;
    filter:
      brightness(1.06)
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.45))
      drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  }
  .player-setup-step2-form {
    flex: 0 1 360px;
    max-width: 360px;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .player-setup-step2-title {
    color: var(--neon-magenta);
    font-family: var(--mincho);
    /* ★2026-07-09：タイトルを大きく */
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-shadow: 0 0 14px rgba(255,90,200,0.55);
  }
  .player-setup-step2-subtitle {
    color: var(--text-dim);
    font-family: var(--serif);
    font-style: italic;
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-top: -4px;
  }
  .player-setup-step2-chosen {
    color: var(--text);
    /* ★2026-07-09：「研究員〇〇でいいかな？」を少し大きく */
    font-size: clamp(16px, 1.9vw, 20px);
    line-height: 1.6;
    margin-top: 8px;
  }
  .player-setup-step2-chosen strong {
    color: var(--neon-magenta);
    font-weight: 600;
  }
  .player-setup-step2-label {
    color: var(--text-soft);
    font-size: 10px;
    letter-spacing: 0.18em;
    margin-top: 8px;
    text-transform: uppercase;
  }
  .player-name-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 90, 200, 0.4);
    border-radius: 6px;
    padding: 10px 13px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    letter-spacing: 0.05em;
    transition: border 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .player-name-input:focus {
    border-color: var(--neon-magenta);
    box-shadow: 0 0 12px rgba(255, 90, 200, 0.3);
    background: rgba(0, 0, 0, 0.55);
  }
  .player-setup-start {
    margin-top: 6px;
    padding: 11px 16px;
    background: linear-gradient(135deg, rgba(157, 78, 255, 0.6), rgba(255, 90, 200, 0.6));
    border: 1px solid rgba(255, 90, 200, 0.7);
    border-radius: 8px;
    color: #fff;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 90, 200, 0.3);
    transition: all 0.2s;
  }
  .player-setup-start:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(157, 78, 255, 0.8), rgba(255, 90, 200, 0.8));
    box-shadow: 0 6px 24px rgba(255, 90, 200, 0.5);
  }
  .player-setup-start:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* Phone toggle button (when hidden) */
  .phone-toggle {
    position: fixed;
    right: var(--safe-right);
    bottom: var(--safe-bottom);
    height: 56px;
    padding: 0 22px;
    border-radius: 28px;
    background: rgba(20, 9, 31, 0.92);
    border: 1px solid var(--neon-magenta);
    color: var(--neon-magenta);
    cursor: pointer;
    z-index: 21;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(255,61,139,0.25);
    transition: all 0.25s;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    backdrop-filter: blur(6px);
  }
  /* Visible only when phone is closed */
  body.phone-closed .phone-toggle { display: flex; }
  /* ★エイム初回会話前チュートリアル：スマホを開くボタンを一時ロック（薄く・タップ不可） */
  body.aim-tutorial-lock .phone-toggle { opacity: 0.35; pointer-events: none; }
  .phone-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.6), 0 0 24px rgba(255,61,139,0.4);
  }
  .phone-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* ===== Home return button — phone-toggle のすぐ上、青色 =====
     スマホが閉じてて、かつ守衛室以外にいる時だけ表示する。
     スマホ開いてる時はマップから戻れるので非表示。
     ★2026-06-13：phone-toggle と同サイズに揃える（並んだ時の統一感）。 */
  .home-return-btn {
    position: fixed;
    right: var(--safe-right);
    bottom: calc(var(--safe-bottom) + 56px + 12px);  /* phone-toggle(56) + 12px間隔 */
    height: 56px;
    padding: 0 22px;
    border-radius: 28px;
    background: rgba(10, 30, 60, 0.92);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    cursor: pointer;
    z-index: 21;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(78,226,255,0.28);
    transition: all 0.25s;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    backdrop-filter: blur(6px);
  }
  /* スマホ閉じてる時 & 守衛室以外にいる時だけ表示 */
  body.phone-closed:not(.at-home) .home-return-btn { display: inline-flex; }
  .home-return-btn:hover {
    transform: translateY(-2px);
    background: rgba(18, 50, 100, 0.95);
    box-shadow: 0 12px 26px rgba(0,0,0,0.6), 0 0 22px rgba(78,226,255,0.45);
    color: #fff;
  }
  .home-return-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* =========================================================================
     ★公園「ベンチに座る」ボタン＆ターンスキップモーダル（2026-06-14）
     - 公園ロケーション（body[data-loc="fundus-forgotten-park"]）の時だけ表示
     - ターンを終了ボタンと同じ縦並び（さらに上に積む）
  ========================================================================= */
  .park-bench-btn {
    position: fixed;
    right: var(--safe-right);
    /* phone-toggle(56) + 12px + home-return-btn(56) + 12px */
    bottom: calc(var(--safe-bottom) + 56px + 12px + 56px + 12px);
    height: 56px;
    padding: 0 22px;
    border-radius: 28px;
    background: rgba(60, 40, 20, 0.92);
    border: 1px solid #d2a96e;
    color: #ffd99a;
    cursor: pointer;
    z-index: 21;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(210,169,110,0.28);
    transition: all 0.25s;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    backdrop-filter: blur(6px);
  }
  /* 公園ロケーション かつ スマホ閉じてる時だけ表示 */
  body.phone-closed.at-forgotten-park .park-bench-btn { display: inline-flex; }
  .park-bench-btn:hover {
    transform: translateY(-2px);
    background: rgba(80, 55, 28, 0.95);
    box-shadow: 0 12px 26px rgba(0,0,0,0.6), 0 0 22px rgba(210,169,110,0.45);
    color: #fff;
  }
  .park-bench-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* モーダル */
  .park-bench-modal {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
  }
  .park-bench-modal.open { display: flex; }
  .park-bench-card {
    background: linear-gradient(135deg, rgba(40,28,18,0.98), rgba(20,14,10,0.98));
    border: 2px solid #d2a96e;
    border-radius: 14px;
    padding: 28px 32px;
    min-width: 340px;
    max-width: 90vw;
    color: #ffe8c8;
    font-family: var(--sans);
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(210,169,110,0.3);
    text-align: center;
  }
  .park-bench-title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #ffd99a;
    margin-bottom: 4px;
  }
  .park-bench-sub {
    font-size: 13px;
    color: #c9b294;
    margin-bottom: 22px;
  }
  .park-bench-counter {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    border: 1px solid rgba(210,169,110,0.5);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    margin-bottom: 14px;
  }
  .park-bench-step {
    background: none;
    border: none;
    color: #ffd99a;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 12px;
    transition: color 0.2s, transform 0.15s;
  }
  .park-bench-step:hover { color: #fff; transform: scale(1.15); }
  .park-bench-step:disabled { color: #6b5b48; cursor: not-allowed; transform: none; }
  .park-bench-value {
    font-size: 38px;
    font-weight: bold;
    font-family: 'EB Garamond', serif;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 14px rgba(255, 217, 154, 0.6);
    min-width: 80px;
  }
  .park-bench-range {
    font-size: 12px;
    color: #b09575;
    letter-spacing: 0.08em;
    margin-bottom: 22px;
  }
  .park-bench-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .park-bench-btn-cancel,
  .park-bench-btn-confirm {
    border: none;
    border-radius: 24px;
    padding: 10px 26px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--sans);
  }
  .park-bench-btn-cancel {
    background: rgba(255,255,255,0.08);
    color: #c9b294;
    border: 1px solid rgba(210,169,110,0.4);
  }
  .park-bench-btn-cancel:hover { background: rgba(255,255,255,0.14); color: #fff; }
  .park-bench-btn-confirm {
    background: linear-gradient(135deg, #d2a96e, #b58849);
    color: #2a1810;
    box-shadow: 0 4px 14px rgba(210,169,110,0.4);
  }
  .park-bench-btn-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(210,169,110,0.6);
    filter: brightness(1.08);
  }

  /* ===== Mobile responsive =====
     スマホ縦持ち（body回転後の論理landscape）でも、phone UIは
     「画面の右側に立つ縦長サイドパネル」として表示する。
     掲示板タブだけは別ルールでフルスクリーン化（body.viewing-board）。 */
  @media (max-width: 1024px) and (orientation: portrait) {
    /* 縦持ち端末（body rotated -90°、論理landscape 100vh × 100vw）：
       phone の論理 height = body 論理 height = 100vw（物理viewport width）に合わせる */
    .phone {
      width: 260px;
      height: calc(100vw - 28px);
      max-height: 380px;
      right: 14px;
      bottom: 14px;
    }
  }
  @media (max-height: 600px) and (orientation: landscape) {
    /* 物理横持ち端末（小型landscape：iPhone横向き 812×375 等） */
    /* ★2026-06-12：right を 14px → var(--safe-right) に変更し、内カメラ/ノッチ被りを回避 */
    .phone {
      width: 280px;
      height: calc(100vh - 28px);
      max-height: 380px;
      right: var(--safe-right);
      bottom: 14px;
    }
    /* HUD・場所名は中央配置（PCと統一）。
       ★2026-06-11：以前は左上ボタンと被って見えない問題を「左寄せ」で逃げていたが、
       それでも左上スマホ操作ボタンと衝突するため、中央寄せ＋サイズ縮小で根本対応。 */
    .hud {
      padding: 10px 14px;
      justify-content: center;
    }
    .location-label {
      font-size: 13px;
      padding: 6px 16px;
      letter-spacing: 0.18em;
    }
    /* ★プレイヤー設定の立ち絵：横持ち端末は端だと内カメラ／ノッチに隠れるため、
       safe-area分＋少し内側へ寄せ、幅もわずかに絞って中央ボタンと衝突させない（選択はボタン経由なので影響なし）。 */
    .player-setup-portrait { max-width: 30%; }
    .player-setup-portrait-left  { left:  calc(var(--safe-left) + 2%); }
    .player-setup-portrait-right { right: calc(var(--safe-right) + 2%); }
  }
  /* HUD・ラベルの細部調整。
     ★2026-06-11：左上ボタン群（音量パネル等）と被って見えないため、
     PCと同じく中央上に配置。center位置は要素サイズ縮小で十分干渉しない。 */
  @media (max-width: 700px) {
    .hud {
      padding: 10px 14px;
      justify-content: center;  /* PC同様の中央寄せ */
    }
    .location-label {
      font-size: 13px;
      padding: 6px 16px;
      letter-spacing: 0.18em;        /* 中央表示時に余裕を持つよう少し詰める */
    }
    /* 守衛室戻る／スマホを開く ボタンも小型化 */
    /* ★2026-06-12：right を 14px → var(--safe-right) に変更
       ★2026-06-13：phone-toggle と home-return-btn のサイズを揃える */
    .phone-toggle {
      right: var(--safe-right);
      bottom: 14px;
      height: 44px;
      padding: 0 16px;
      font-size: 11px;
    }
    .phone-toggle svg { width: 18px; height: 18px; }
    .home-return-btn {
      right: var(--safe-right);
      bottom: calc(14px + 44px + 10px);  /* phone-toggle(44) + 10px間隔 */
      height: 44px;
      padding: 0 16px;
      font-size: 11px;
      gap: 8px;
    }
    .home-return-btn svg { width: 18px; height: 18px; }

    /* ===== ★2026-06-11：2ステップ プレイヤー設定モーダル モバイル最適化 =====
       横持ち iPhone（844×390）で、立ち絵は身長感を保ちつつ中央ボタンと衝突しないように。 */
    .player-setup-step1-title { font-size: 24px; top: 10px; }
    .player-setup-portrait {
      height: 92vh;
      max-height: none;
      max-width: 30%;
    }
    /* ★モバイル：端だとノッチ／画面端に隠れるため内側へ寄せる（選択はボタン経由なので影響なし） */
    .player-setup-portrait-left  { left:  calc(var(--safe-left) + 2%); }
    .player-setup-portrait-right { right: calc(var(--safe-right) + 2%); }
    .player-setup-step1-buttons {
      width: 200px;
      gap: 10px;
    }
    .player-setup-choice-btn,
    .player-setup-confirm-btn {
      padding: 11px 14px;
      font-size: 13px;
    }
    .player-setup-step1-hint { font-size: 9px; bottom: 8px; }

    /* STEP 2（中央寄せ＋コンパクト枠。端切れ防止） */
    .player-setup-step2 { padding: 0 16px; gap: clamp(14px, 4vw, 40px); }
    .player-setup-back-btn { font-size: 10px; padding: 3px 9px 3px 7px; margin-left: 8px; }
    .player-setup-step2-portrait {
      height: 100vh;
      max-height: none;
      max-width: 34%;
    }
    .player-setup-step2-form { flex: 0 1 300px; max-width: 300px; margin-left: 0; gap: 8px; }
    .player-setup-step2-title { font-size: 20px; }
    .player-setup-step2-chosen { font-size: 15px; }
    .player-setup-step2-label { font-size: 9px; }
    .player-name-input { font-size: 16px; padding: 8px 11px; }
    .player-setup-start { padding: 9px 14px; font-size: 12px; letter-spacing: 0.2em; }
  }

  /* ============================================================ */
  /* ===== 映画館ふじしろ ショップUI ===== */
  /* ============================================================ */
  /* ===== 映画館ショップUI（v2 リデザイン）=====
     ・背景は半透明（映画館の中にいる感を保持）
     ・中央左：そのターンのヨカ/ヒマ立ち絵（会話と同じVNフレーミング）
     ・中央右：パネル（タブ + 「ポスター大表示 + タイトル縦リスト」 + あらすじ + 買うボタン）
  */
  .cinema-shop {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(8,4,14,0.5) 0%, rgba(8,4,14,0.7) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    display: none;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .cinema-shop.open { display: block; }

  /* === 立ち絵：会話時と同じVNフレーミング ===
     ・height:110lvh / bottom:-20lvh（lvh で iOS キーボード問題回避）
     ・身長スケール（ヨカ 0.886 / ヒマ 0.731）は data-portrait-id 経由で適用 */
  .cinema-shop-portrait {
    --scale: 1.0;
    position: absolute;
    left: 6vw;
    bottom: -20lvh;
    height: 110lvh;
    max-height: 110lvh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
  }
  .cinema-shop-portrait[data-portrait-id="yoka"] { --scale: 0.886; }  /* 155cm */
  .cinema-shop-portrait[data-portrait-id="hima"] { --scale: 0.731; }  /* 128cm */
  /* 名前カード（テロップ風、画面中央下寄りにオーバーレイ） */
  .cinema-shop-name-card {
    position: absolute;
    left: max(12vw, 110px);
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    background: linear-gradient(180deg, rgba(28, 14, 40, 0.92), rgba(18, 8, 30, 0.92));
    border: 1px solid rgba(255, 90, 200, 0.45);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 90, 200, 0.18);
    color: var(--ink-warm);
    padding: 8px 26px;
    border-radius: 22px;
    font-size: 15px;
    letter-spacing: 0.12em;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
  }

  /* ★2026-07-08：ラブコーラ差し入れボタン。従来 CSS が無く、表示時に位置指定なしで
     左上に素のまま出て上部アイコンに隠れ「渡す選択肢が出ない」状態だった。
     店番（ヨカ/ヒマ）の名前カードのすぐ上に、映画館テーマのピル型で配置する。 */
  .cinema-cola-gift-btn {
    position: absolute;
    left: max(12vw, 110px);
    bottom: calc(max(env(safe-area-inset-bottom, 0px), 18px) + 54px);
    z-index: 6;
    background: linear-gradient(180deg, rgba(255,90,200,0.30), rgba(255,90,200,0.14));
    border: 1px solid rgba(255,90,200,0.6);
    color: #ffe3f4;
    padding: 10px 22px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 20px rgba(255,90,200,0.25);
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  }
  .cinema-cola-gift-btn:hover {
    background: linear-gradient(180deg, rgba(255,90,200,0.42), rgba(255,90,200,0.22));
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 26px rgba(255,90,200,0.35);
  }
  .cinema-cola-gift-btn:active { transform: translateY(0); }

  /* === パネル：画面中央配置・横長 === */
  .cinema-shop-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%);  /* 立ち絵の右、画面中央寄り */
    width: min(64vw, 880px);
    /* セーフゾーン基準：ノッチ・下端を避けて確実に収まる範囲（友達のスマホ問題解決） */
    max-height: calc(var(--ui-max-height) - 10px);
    background: linear-gradient(180deg, rgba(20, 10, 30, 0.94), rgba(15, 8, 25, 0.94));
    border: 1px solid rgba(245, 233, 211, 0.18);
    border-radius: 14px;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
  }
  .cinema-shop-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  .cinema-shop-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.22);
    color: var(--ink-warm);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
  }
  .cinema-shop-close:hover { background: rgba(245, 233, 211, 0.18); }

  /* 挨拶テキストは非表示（ユーザー要望で削除） */
  .cinema-shop-greeting-text { display: none; }

  /* === 商品ボックス（左:大ポスター + 右:タブ+リスト） === */
  .cinema-buy-box {
    display: flex;
    gap: 16px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(245, 233, 211, 0.14);
    border-radius: 10px;
    padding: 14px;
    flex-shrink: 0;
  }
  /* 左：選択中ポスター大表示（横長ボックス＋大ポスター） */
  .cinema-buy-poster {
    width: 240px;
    flex-shrink: 0;
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    border: 2px solid rgba(255, 90, 200, 0.5);
    box-shadow: 0 6px 22px rgba(0,0,0,0.5);
    position: relative;
  }
  .cinema-buy-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cinema-buy-poster.purchased::after {
    content: "所有";
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(120, 220, 160, 0.92);
    color: #0a0410;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
  }
  /* 右側：タブ + ペイン内容 */
  .cinema-buy-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* タブ：購入/売却/会話 */
  .cinema-shop-tabs {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .cinema-shop-tab {
    flex: 1;
    padding: 8px 0;
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.18);
    color: rgba(245, 233, 211, 0.72);
    cursor: pointer;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: all 0.2s;
  }
  .cinema-shop-tab:hover { background: rgba(245, 233, 211, 0.12); }
  .cinema-shop-tab.active {
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.35), rgba(157, 78, 255, 0.35));
    color: var(--ink-warm);
    border-color: rgba(255, 90, 200, 0.55);
    box-shadow: 0 0 14px rgba(255, 90, 200, 0.25);
  }
  /* 各ペイン：タブの下に表示 */
  .cinema-shop-pane {
    display: none;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    flex: 1;
  }
  .cinema-shop-pane.active { display: flex; }

  /* タイトル縦リスト */
  .cinema-buy-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 340px;
    padding-right: 4px;
  }
  .cinema-buy-titles::-webkit-scrollbar { width: 6px; }
  .cinema-buy-titles::-webkit-scrollbar-thumb { background: rgba(245, 233, 211, 0.25); border-radius: 3px; }
  .cinema-buy-title-row {
    padding: 9px 14px;
    background: rgba(245, 233, 211, 0.04);
    border: 1px solid rgba(245, 233, 211, 0.12);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(245, 233, 211, 0.88);
    transition: all 0.18s;
    /* 文字切れ対策：折り返しを許可 */
    word-break: break-word;
    line-height: 1.4;
    position: relative;
  }
  /* ★2026-06-11：デスクトップではカード内のポスターサムネを非表示。文字のみ表示。
     モバイル媒体クエリ側で display:block に再上書きされる。 */
  .cinema-card-poster-mini { display: none; }
  .cinema-card-title-text { display: inline; }
  .cinema-buy-title-row:hover {
    background: rgba(245, 233, 211, 0.1);
    border-color: rgba(245, 233, 211, 0.25);
  }
  .cinema-buy-title-row.selected {
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.22), rgba(157, 78, 255, 0.22));
    border-color: rgba(255, 90, 200, 0.55);
    color: var(--ink-warm);
    font-weight: 600;
  }
  .cinema-buy-title-row.purchased::before {
    content: '◉';
    color: rgba(120, 220, 160, 0.95);
    margin-right: 6px;
    font-size: 11px;
  }
  /* 新規追加バッジ（一番上の最新作品に表示） */
  .cinema-buy-title-row.new-arrival::after {
    content: 'NEW';
    position: absolute;
    top: 4px; right: 6px;
    background: rgba(255, 200, 100, 0.9);
    color: #0a0410;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.06em;
  }

  /* ★シート閉じ×はモバイルのボトムシート専用。PCでは枠付きの余計な×に見えるため非表示。 */
  .cinema-sheet-close { display: none; }
  /* あらすじ（タイトル下、大きめテキスト） */
  .cinema-buy-detail {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(245, 233, 211, 0.12);
    border-radius: 10px;
    padding: 14px 18px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cinema-buy-detail-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--neon-magenta);
    letter-spacing: 0.04em;
  }
  .cinema-buy-detail-msg {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(245, 233, 211, 0.94);
    border-left: 2px solid rgba(255, 90, 200, 0.4);
    padding-left: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    white-space: pre-wrap;
  }
  .cinema-buy-detail-empty {
    font-size: 13px;
    color: rgba(245, 233, 211, 0.55);
    text-align: center;
    padding: 22px 0;
  }
  .cinema-buy-detail-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  /* 「買う」ボタン（コイン情報を内包：「買う（1500 C）」） */
  .cinema-buy-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: 1px solid rgba(245, 233, 211, 0.25);
    background: rgba(245, 233, 211, 0.08);
    color: var(--ink-warm);
    transition: background 0.2s;
  }
  .cinema-buy-btn:hover:not(:disabled) { background: rgba(245, 233, 211, 0.16); }
  .cinema-buy-btn.primary {
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.5), rgba(157, 78, 255, 0.5));
    border-color: rgba(255, 90, 200, 0.6);
  }
  .cinema-buy-btn.primary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.7), rgba(157, 78, 255, 0.7));
  }
  .cinema-buy-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* === 売却タブ：プレイヤー自由記入 + 1000C固定 === */
  .cinema-sell-prompt {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.32);
    border-left: 2px solid rgba(255, 200, 100, 0.55);
    padding: 10px 14px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .cinema-sell-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }
  .cinema-sell-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cinema-sell-form-label {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.7);
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .cinema-sell-form-label .count {
    font-size: 11px;
    color: rgba(245, 233, 211, 0.55);
    font-feature-settings: "tnum";
  }
  .cinema-sell-form-input,
  .cinema-sell-form-textarea {
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.22);
    border-radius: 6px;
    color: var(--ink-warm);
    padding: 8px 12px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.55;
    resize: none;
  }
  .cinema-sell-form-input:focus,
  .cinema-sell-form-textarea:focus {
    outline: none;
    border-color: rgba(255, 200, 100, 0.55);
    background: rgba(245, 233, 211, 0.1);
  }
  .cinema-sell-form-textarea { min-height: 92px; }
  .cinema-sell-submit {
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 200, 100, 0.55);
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.4), rgba(255, 140, 60, 0.4));
    color: var(--ink-warm);
    transition: filter 0.2s;
  }
  .cinema-sell-submit:hover:not(:disabled) { filter: brightness(1.18); }
  .cinema-sell-submit:disabled { opacity: 0.4; cursor: not-allowed; }
  .cinema-sell-response {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(245, 233, 211, 0.94);
    border-left: 2px solid rgba(255, 200, 100, 0.55);
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
    white-space: pre-wrap;
    margin-top: 4px;
  }

  /* === 会話タブ：自由入力 + 応答エリア === */
  .cinema-talk-prompt {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.32);
    border-left: 2px solid rgba(255, 90, 200, 0.55);
    padding: 10px 14px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .cinema-talk-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }
  .cinema-talk-form-label {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.7);
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .cinema-talk-form-label .count {
    font-size: 11px;
    color: rgba(245, 233, 211, 0.55);
    font-feature-settings: "tnum";
  }
  .cinema-talk-form-textarea {
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.22);
    border-radius: 6px;
    color: var(--ink-warm);
    padding: 8px 12px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.55;
    resize: none;
    min-height: 80px;
  }
  .cinema-talk-form-textarea:focus {
    outline: none;
    border-color: rgba(255, 90, 200, 0.55);
    background: rgba(245, 233, 211, 0.1);
  }
  .cinema-talk-submit {
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 90, 200, 0.55);
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.4), rgba(157, 78, 255, 0.4));
    color: var(--ink-warm);
    transition: filter 0.2s;
  }
  .cinema-talk-submit:hover:not(:disabled) { filter: brightness(1.18); }
  .cinema-talk-submit:disabled { opacity: 0.4; cursor: not-allowed; }
  .cinema-talk-response {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(245, 233, 211, 0.94);
    border-left: 2px solid rgba(255, 90, 200, 0.55);
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
    white-space: pre-wrap;
    margin-top: 4px;
  }

  /* ★ 売却/会話タブ時は左の大ポスターを非表示（購入タブ専用にする） */
  .cinema-shop-panel.mode-sell .cinema-buy-poster,
  .cinema-shop-panel.mode-talk .cinema-buy-poster { display: none; }
  /* 右側を full 幅に */
  .cinema-shop-panel.mode-sell .cinema-buy-right,
  .cinema-shop-panel.mode-talk .cinema-buy-right { flex: 1; }

  /* === 売却ペイン === */
  .cinema-sell-info {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(245, 233, 211, 0.14);
    border-left: 3px solid rgba(255, 200, 100, 0.6);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(245, 233, 211, 0.88);
    flex-shrink: 0;
  }
  .cinema-sell-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
    min-height: 0;
  }
  .cinema-sell-item {
    background: rgba(20, 10, 30, 0.6);
    border: 1px solid rgba(245, 233, 211, 0.14);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cinema-sell-item-img {
    width: 38px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.4);
  }
  .cinema-sell-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cinema-sell-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-warm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cinema-sell-item-meta {
    font-size: 11px;
    color: rgba(245, 233, 211, 0.6);
  }
  .cinema-sell-item-price {
    color: var(--neon-cyan);
    font-feature-settings: "tnum";
  }
  .cinema-sell-btn {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.35), rgba(255, 140, 60, 0.35));
    border: 1px solid rgba(255, 200, 100, 0.55);
    color: var(--ink-warm);
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.2s;
  }
  .cinema-sell-btn:hover:not(:disabled) { filter: brightness(1.15); }
  .cinema-sell-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .cinema-sell-empty {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.55);
    text-align: center;
    padding: 28px 12px;
    line-height: 1.6;
  }
  /* （旧 .cinema-poster-card / .cinema-poster-img / .cinema-poster-meta /
       .cinema-poster-title / .cinema-poster-price は新 .cinema-buy-card に
       置き換えたので削除した） */
  /* ===== 詳細カード（オーバーレイ on オーバーレイ）===== */
  .cinema-detail {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 75;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .cinema-detail.open { display: flex; }
  .cinema-detail-card {
    background: linear-gradient(180deg, #1a0e2e 0%, #0e0820 100%);
    border: 1px solid rgba(245, 233, 211, 0.2);
    border-radius: 12px;
    max-width: 760px;
    width: 100%;
    /* セーフゾーン基準でノッチ・下端も避けて確実にスクロール可能 */
    max-height: calc(var(--ui-max-height) - 20px);
    overflow-y: auto;
    padding: 22px;
    color: var(--ink-warm);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cinema-detail-top {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
  .cinema-detail-poster {
    width: 160px;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(245, 233, 211, 0.15);
    flex-shrink: 0;
  }
  .cinema-detail-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cinema-detail-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--neon-magenta);
    letter-spacing: 0.03em;
  }
  .cinema-detail-runtime {
    font-size: 13px;
    color: rgba(245, 233, 211, 0.7);
  }
  .cinema-detail-price {
    font-size: 18px;
    color: var(--neon-cyan);
    font-feature-settings: "tnum";
  }
  .cinema-detail-message {
    background: rgba(245, 233, 211, 0.06);
    border-left: 3px solid rgba(255, 90, 200, 0.5);
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
  }
  .cinema-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .cinema-detail-btn {
    flex: 1;
    min-width: 130px;
    background: rgba(245, 233, 211, 0.1);
    border: 1px solid rgba(245, 233, 211, 0.25);
    color: var(--ink-warm);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .cinema-detail-btn:hover { background: rgba(245, 233, 211, 0.18); }
  .cinema-detail-btn.primary {
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.4), rgba(157, 78, 255, 0.4));
    border-color: rgba(255, 90, 200, 0.6);
  }
  .cinema-detail-btn.primary:hover {
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.55), rgba(157, 78, 255, 0.55));
  }
  .cinema-detail-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .cinema-detail-close {
    align-self: flex-end;
    background: transparent;
    border: 1px solid rgba(245, 233, 211, 0.2);
    color: rgba(245, 233, 211, 0.7);
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 12px;
    cursor: pointer;
  }
  /* ===== 朗読オーバーレイ（ヨカ拒否 or ヒマ音読）===== */
  .cinema-reading {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 80;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .cinema-reading.open { display: flex; }
  .cinema-reading-clerk {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 3px solid rgba(245, 233, 211, 0.3);
    margin-bottom: 18px;
    background: rgba(28, 14, 40, 0.5);
  }
  .cinema-reading-bubbles {
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
    min-height: 200px;
  }
  .cinema-reading-bubble {
    background: rgba(245, 233, 211, 0.08);
    border-left: 3px solid rgba(255, 220, 100, 0.6);
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-warm);
    opacity: 0;
    animation: cinema-bubble-in 0.35s ease forwards;
  }
  @keyframes cinema-bubble-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cinema-reading-close {
    background: rgba(245, 233, 211, 0.1);
    border: 1px solid rgba(245, 233, 211, 0.25);
    color: var(--ink-warm);
    padding: 8px 22px;
    border-radius: 22px;
    font-size: 14px;
    cursor: pointer;
  }
  /* ★2026-06-11：スマホ専用 店UI立ち絵を「腰から上」拡大
     PC（横長デスクトップ）の見た目は変えず、モバイル（横持ち約 844x390）でのみ
     立ち絵を 110vh → 200vh に拡大し、bottom を -100vh まで押し下げて
     画面に「腰から上」を大きく見せる。
     対象は店UI モーダル系の立ち絵全てだが、会話シーン（intro-portrait系）と
     セリフ用テロップ（dialogue-portrait）、プレイヤー設定（player-setup-portrait）には適用しない。 */
  @media (max-width: 700px), (max-height: 500px) {
    .cinema-shop-portrait,
    .innocent-greeting-portrait,
    .fukuri-portrait,
    .yanagi-portrait,
    .mm-portrait,
    .pea-portrait,
    .soi-portrait,
    .bait-soi-portrait,
    .daily-portrait,
    .gate-talk-portrait {
      height: 200vh !important;
      max-height: 200vh !important;
      bottom: -100vh !important;
    }
    /* cinema-shop-portrait は lvh 使用なので個別に上書き */
    .cinema-shop-portrait {
      height: 200lvh !important;
      max-height: 200lvh !important;
      bottom: -100lvh !important;
    }

    /* ★2026-06-12：各キャラ個別調整（v5：頭頂Yを全員ヨカ位置に揃える＋ソイ別ルール廃止）
       縦：ヨカ頭頂Y=89px に統一（実機スクショ実測でズレた分だけ bottom を補正）
       横：立ち絵 visual center を name-card 中心に揃える（v4 から継続）
       占有率はほぼ揃っているので scale は身長相当のまま
    */
    /* === ヨカ／ヒマ（cinema-shop-portrait） === */
    .cinema-shop-portrait {
      left: 0.2vw !important;
    }
    .cinema-shop-portrait[data-portrait-id="hima"] {
      bottom: -69lvh !important;
    }
    /* === テンラク === */
    .innocent-greeting-portrait {
      left: -0.74vw !important;
      bottom: -128vh !important;  /* -123→-128：頭頂が19px上ズレを補正 */
    }
    /* === フクリ === */
    .fukuri-portrait {
      --scale: 1.0 !important;
      left: 4.86vw !important;
      bottom: -128vh !important;  /* -123→-128 */
    }
    /* === ヤナギ === */
    .yanagi-portrait {
      left: 1.15vw !important;
      bottom: -129vh !important;
    }
    /* === マモル === */
    .mm-portrait {
      --scale: 0.85 !important;
      left: -0.19vw !important;
      bottom: -97vh !important;  /* -93→-97 */
    }
    /* === ソイ（別ルール廃止、ヨカ位置に揃える） === */
    .soi-portrait {
      left: -4.36vw !important;
      bottom: -90vh !important;  /* -85→-90 */
    }
    /* === ペア（AR 0.61 で他キャラと別系統。scale 1.2拡大 + object-position top で頭ヨカ揃え） === */
    .pea-portrait {
      --scale: 1.2 !important;
      left: -4.36vw !important;
      bottom: -163vh !important;
      object-position: top center !important;  /* 画像 top = box top → 頭ヨカ位置 */
    }
  }

  /* スマホ調整（横画面前提）：立ち絵を少し小さく、右側パネルを広めに */
  @media (max-width: 900px) {
    .cinema-shop-portrait { left: 3vw; max-width: 38vw; }
    .cinema-shop-name-card {
      left: max(10vw, 90px);
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      font-size: 13px;
      padding: 6px 18px;
    }
    .cinema-shop-panel {
      /* ★2026-06-20：右端を記憶メーターの右端（safe-right+4px）に合わせ、スマホのカメラ/ノッチに
         「×」ボタンが隠れないようにする。基底の left:50% + transform:translate(-25%,-50%) だと
         right が無効化されるため、left:auto / transform:translateY(-50%) に上書きして右端アンカー。
         overflow:hidden で閉じたボトムシート（あらすじ）の“見切れ”も防ぐ。 */
      left: auto;
      right: calc(var(--safe-right) + 4px);
      transform: translateY(-50%);
      width: min(64vw, 580px);
      padding: 12px 14px 14px;
      max-height: 94vh;
      overflow: hidden;
    }
    .cinema-shop-greeting-text { font-size: 12px; padding: 7px 10px; }
    .cinema-shop-tab { font-size: 12px; padding: 8px 0; }
    /* ★2026-06-11：案D ボトムシート式に刷新
       - 大ポスター（cinema-buy-poster）を非表示
       - cinema-buy-titles を横スクロールのカード型に
       - 各カード内にポスター画像 + タイトルを縦並びで表示
       - cinema-buy-detail（あらすじ＋買うボタン）を画面下からスライドアップする
         ボトムシートに変換。body.cinema-sheet-open で表示制御。
    */
    .cinema-buy-poster { display: none; }
    .cinema-buy-box { gap: 8px; padding: 8px; flex-shrink: 0; }
    .cinema-buy-right { width: 100%; min-width: 0; }
    .cinema-buy-titles {
      display: flex;
      flex-direction: row;
      gap: 8px;
      max-height: none;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 4px 2px 8px;
      scrollbar-width: thin;
    }
    .cinema-buy-titles::-webkit-scrollbar { height: 4px; width: auto; }
    .cinema-buy-title-row {
      flex: 0 0 90px;
      padding: 0;
      display: flex;
      flex-direction: column;
      background: rgba(0,0,0,0.32);
      border-radius: 6px;
      overflow: hidden;
      font-size: 0; /* clear inline-block whitespace */
    }
    .cinema-card-poster-mini {
      display: block;
      width: 100%;
      height: 115px;
      object-fit: cover;
      background: linear-gradient(135deg, #2a1f3a, #1a1224);
    }
    .cinema-card-title-text {
      display: block;
      padding: 5px 7px 6px;
      font-size: 11px;
      line-height: 1.3;
      color: rgba(245, 233, 211, 0.92);
      text-align: center;
      word-break: break-word;
    }
    .cinema-buy-title-row.selected {
      box-shadow: 0 0 0 2px var(--neon-magenta);
    }
    .cinema-buy-title-row.purchased::before {
      content: '◉';
      position: absolute;
      top: 4px; left: 5px;
      margin-right: 0;
      z-index: 2;
      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    }
    /* NEW バッジ位置をカード内に */
    .cinema-buy-title-row.new-arrival::after { top: 4px; right: 4px; z-index: 2; }

    /* === ボトムシート化 cinema-buy-detail === */
    .cinema-buy-detail {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      transform: translateY(105%);
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.34, 1);
      background: rgba(28, 20, 48, 0.98);
      border: 1px solid rgba(255, 90, 200, 0.35);
      border-top: 2px solid var(--neon-magenta);
      border-radius: 14px 14px 0 0;
      padding: 14px 16px 16px;
      max-height: 80%;
      box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
      z-index: 5;
      flex: 0 0 auto;
      overflow: hidden;
    }
    body.cinema-sheet-open .cinema-buy-detail {
      transform: translateY(0);
    }
    /* ボトムシートのハンドル（つまみ）＆閉じるボタン */
    .cinema-buy-detail::before {
      content: '';
      display: block;
      width: 40px;
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      margin: 0 auto 8px;
      cursor: pointer;
    }
    .cinema-sheet-close {
      display: block;   /* モバイルのボトムシートでは表示（シートを閉じる×） */
      position: absolute;
      top: 4px; right: 8px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      font-size: 22px;
      cursor: pointer;
      padding: 2px 6px;
      line-height: 1;
      z-index: 1;
    }
    .cinema-buy-detail-title { font-size: 14px; }
    .cinema-buy-detail-msg { font-size: 13px; line-height: 1.65; max-height: 130px; }
    .cinema-buy-btn { font-size: 13px; padding: 10px 12px; }
    /* シート開いてる時はカード/タブを少し暗くする（フォーカス強調） */
    body.cinema-sheet-open .cinema-buy-box,
    body.cinema-sheet-open .cinema-shop-tabs { opacity: 0.45; pointer-events: none; }
    .cinema-sell-item-title { font-size: 12px; }
    .cinema-sell-item-meta { font-size: 10px; }
    .cinema-sell-btn { font-size: 11px; padding: 6px 12px; }
    /* 既存の詳細カード（廃止予定だが念のため）*/
    .cinema-detail-top { flex-direction: column; align-items: center; }
    .cinema-detail-poster { width: 60vw; max-width: 200px; }
  }

  /* ============================================================ */
  /* ===== リズムゲームエンジン ===== */
  /* ============================================================ */
  .rhythm-overlay {
    position: fixed; inset: 0;
    background: #050309;
    z-index: 85;
    display: none;
    flex-direction: column;
    color: var(--ink-warm);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  .rhythm-overlay.open { display: flex; }
  /* ヘッダー */
  .rhythm-header {
    flex-shrink: 0;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(20,10,30,0.95) 0%, rgba(20,10,30,0.4) 100%);
    border-bottom: 1px solid rgba(245, 233, 211, 0.15);
    pointer-events: none;
  }
  .rhythm-stats {
    display: flex;
    gap: 18px;
    align-items: baseline;
    font-feature-settings: "tnum";
  }
  .rhythm-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(245, 233, 211, 0.55);
    margin-right: 6px;
  }
  .rhythm-stat-value {
    font-size: 18px;
    color: var(--ink-warm);
  }
  .rhythm-stat-value.combo {
    color: var(--neon-magenta);
    font-weight: 600;
    min-width: 60px;
    display: inline-block;
  }
  .rhythm-genre-label {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }
  /* ===== READY / GO! プレイ前カウントダウン ===== */
  .rhythm-prep-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 72px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--neon-cyan);
    text-shadow:
      0 0 24px rgba(78, 226, 255, 0.85),
      0 0 8px rgba(0, 0, 0, 0.6);
    z-index: 100;
    pointer-events: none;
    animation: rhythm-prep-fade-in 0.25s ease-out;
  }
  .rhythm-prep-text.go {
    color: #ffd750;
    text-shadow:
      0 0 28px rgba(255, 215, 90, 0.95),
      0 0 10px rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.25);
    transition: transform 0.2s ease-out, color 0.15s, text-shadow 0.15s;
  }
  @keyframes rhythm-prep-fade-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  @media (max-width: 700px) {
    .rhythm-prep-text { font-size: 52px; }
  }
  /* ===== ノート種別凡例（rhythm-legend） ===== */
  .rhythm-legend {
    display: flex;
    gap: 10px;
    margin-left: auto;
    align-items: center;
    padding: 4px 10px;
    background: rgba(20, 9, 44, 0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
  }
  .rhythm-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .rhythm-legend-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    border: 1.5px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
  }
  .rhythm-legend-note.legend-special {
    background: radial-gradient(circle, #fff5b0 0%, #ffd864 60%, #c0951c 100%);
    border-color: rgba(255,240,160,0.9);
    color: #6b3500;
  }
  .rhythm-legend-note.legend-combo {
    background: radial-gradient(circle, #c4e0ff 0%, #7eb8ff 60%, #3c70cc 100%);
    border-color: rgba(170,210,255,0.9);
    color: #fff;
  }
  .rhythm-legend-note.legend-trap {
    background: radial-gradient(circle, #ffb0b0 0%, #ff5050 60%, #aa1010 100%);
    border-color: rgba(255,100,100,0.9);
    color: #fff;
  }
  .rhythm-legend-note.legend-hold {
    background: linear-gradient(180deg, #c4ffe0 0%, #6ddb9a 100%);
    border-color: rgba(160,255,200,0.9);
    color: #0a4a26;
    border-radius: 8px;
    height: 26px;
  }
  .rhythm-legend-label {
    font-size: 10px;
    color: rgba(245,233,211,0.75);
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  @media (max-width: 700px) {
    .rhythm-legend { gap: 6px; padding: 3px 8px; }
    .rhythm-legend-note { width: 18px; height: 18px; font-size: 12px; }
    .rhythm-legend-note.legend-hold { height: 22px; }
    .rhythm-legend-label { font-size: 9px; }
  }
  /* レーンステージ */
  .rhythm-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background: radial-gradient(ellipse at 50% 100%, rgba(157, 78, 255, 0.10) 0%, transparent 70%);
  }
  .rhythm-lanes {
    display: flex;
    flex: 1;
    height: 100%;
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
  .rhythm-lane {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* レーン色（--lane-c）をデフォルトで持つ。各レーンが上書き。
       ノート色（白・金・青・赤・緑）を邪魔しない紫系/ピンク系で4色用意。 */
    --lane-c: 78, 226, 255;          /* デフォルト：シアン（フォールバック） */
    --lane-c-strong: 78, 226, 255;
    border-left: 1px solid rgba(var(--lane-c), 0.25);
    border-right: 1px solid rgba(var(--lane-c), 0.25);
    /* 縦全体に淡い色のグラデーション（上は透明、下にいくほど色味） */
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(var(--lane-c), 0.04) 30%,
      rgba(var(--lane-c), 0.10) 70%,
      rgba(var(--lane-c), 0.18) 100%);
  }
  /* === レーン4色（紫〜ピンク系：ノート色と被らない） === */
  .rhythm-lane[data-lane="0"] { --lane-c: 139, 92, 255;  --lane-c-strong: 168, 130, 255; } /* インディゴ紫 */
  .rhythm-lane[data-lane="1"] { --lane-c: 192, 132, 255; --lane-c-strong: 210, 168, 255; } /* バイオレット */
  .rhythm-lane[data-lane="2"] { --lane-c: 255, 110, 180; --lane-c-strong: 255, 150, 200; } /* ローズ */
  .rhythm-lane[data-lane="3"] { --lane-c: 214, 110, 224; --lane-c-strong: 230, 160, 235; } /* マゼンタ */
  .rhythm-lane.active {
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(var(--lane-c), 0.08) 30%,
      rgba(var(--lane-c), 0.18) 70%,
      rgba(var(--lane-c), 0.30) 100%);
  }
  /* ===== ヒットゾーン（2026-06-05 v3：レーン色対応＋輪郭最前面） =====
     線バーは撤去。「穴」の輪郭を z-index で最前面に固定して、
     ノートが穴に重なっても狙う場所が常に見える。
     色はレーン変数（--lane-c）から取って色分け。
     判定 y は JS の tick() で穴の中心を実測する。 */
  .rhythm-hitzone-circle {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    /* 中央は完全透明にしてノートを隠さない。輪郭リング＋発光のみ。
       2026-06-05バグ修正：以前は dark fill(0.65) が z=50 でノートを覆い隠し、
       「ノートが見えないのにMISS判定」というバグになっていた。 */
    background: transparent;
    border: 3px solid rgba(var(--lane-c-strong), 0.95);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
    box-shadow:
      0 0 18px rgba(var(--lane-c), 0.55),
      inset 0 0 8px rgba(var(--lane-c), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;  /* ← ノートより前面（ノートは z-index なし＝0扱い） */
  }
  /* 鼓動アニメで「ここを狙え」感を出す */
  @keyframes rhythm-hz-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(var(--lane-c), 0.40), inset 0 0 12px rgba(var(--lane-c), 0.25); }
    50%      { box-shadow: 0 0 26px rgba(var(--lane-c), 0.85), inset 0 0 14px rgba(var(--lane-c), 0.35); }
  }
  .rhythm-hitzone-circle { animation: rhythm-hz-pulse 1.4s ease-in-out infinite; }

  .rhythm-lane.flash .rhythm-hitzone-circle {
    transform: translateX(-50%) scale(1.18);
    border-color: #fff;
    box-shadow:
      0 0 30px rgba(var(--lane-c-strong), 0.9),
      inset 0 0 14px rgba(var(--lane-c), 0.4);
  }
  /* キー文字を円の中央に配置（レーン色付き） */
  .rhythm-key-label {
    position: absolute;
    left: 50%;
    bottom: 12%;
    transform: translate(-50%, 50%);
    font-size: 22px;
    font-weight: 800;
    color: rgba(var(--lane-c-strong), 1);
    letter-spacing: 0;
    text-shadow:
      0 0 12px rgba(var(--lane-c), 0.85),
      0 0 4px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    line-height: 1;
    z-index: 51;  /* ← 輪郭よりさらに前面 */
  }
  .rhythm-lane.flash .rhythm-key-label {
    color: #fff;
    text-shadow: 0 0 16px rgba(var(--lane-c-strong), 1);
  }
  /* ===== ノーツ（案A：シンボル強化版 2026-06-05） =====
     各種別にアイコンを表示して視認性を上げる。
     通常：無印  特殊：★  コンボ救済：♥  トラップ：✕  長押し：⇡+HOLD */
  .rhythm-note {
    position: absolute;
    left: 50%;
    top: 0;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ddd 60%, #888 100%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    /* シンボル中央配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-weight: 900;
    line-height: 1;
    user-select: none;
  }
  /* 特殊（×2）：金色ボディ＋★ */
  .rhythm-note.special {
    background: radial-gradient(circle, #fff5b0 0%, #ffd864 50%, #c0951c 100%);
    border-color: rgba(255, 240, 160, 0.95);
    box-shadow: 0 0 22px rgba(255, 215, 90, 0.75);
    animation: rhythm-special-pulse 0.7s infinite alternate ease-in-out;
  }
  .rhythm-note.special::before {
    content: "★";
    font-size: 26px;
    color: #6b3500;
    text-shadow: 0 0 4px #fff8c0;
  }
  /* ★2026-06-21：transform(scale)は使わない。CSSアニメのtransformはJSが落下位置に
     設定するインライン transform: translate3d() を上書きしてしまい、スペシャル弾だけ
     落下せず上部で固まる（＝見えないノーツが時刻判定でBADになる）不具合の原因だった。
     光る演出は box-shadow のみで表現する。 */
  @keyframes rhythm-special-pulse {
    from { box-shadow: 0 0 12px rgba(255, 215, 90, 0.5); }
    to   { box-shadow: 0 0 26px rgba(255, 215, 90, 0.95); }
  }
  /* コンボ救済：青色ボディ＋♥ */
  .rhythm-note.combo {
    background: radial-gradient(circle, #c4e0ff 0%, #7eb8ff 50%, #3c70cc 100%);
    border-color: rgba(170, 210, 255, 0.9);
    box-shadow: 0 0 16px rgba(120, 180, 255, 0.6);
  }
  .rhythm-note.combo::before {
    content: "♥";
    font-size: 22px;
    color: #fff;
    text-shadow: 0 0 4px rgba(60, 112, 204, 0.8);
  }
  /* トラップ：赤色ボディ＋✕＋揺れ */
  .rhythm-note.trap {
    background: radial-gradient(circle, #ffb0b0 0%, #ff5050 50%, #aa1010 100%);
    border-color: rgba(255, 100, 100, 0.9);
    box-shadow: 0 0 16px rgba(255, 80, 80, 0.6);
    animation: rhythm-trap-shake 0.4s infinite;
  }
  .rhythm-note.trap::before {
    content: "✕";
    font-size: 28px;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  }
  @keyframes rhythm-trap-shake {
    0%, 100% { box-shadow: 0 0 12px rgba(255,80,80,0.5); }
    50%      { box-shadow: 0 0 22px rgba(255,80,80,0.9); }
  }
  /* 長押し：縦長カプセル＋⇡＋HOLD */
  .rhythm-note.hold {
    border-radius: 22px;
    background: linear-gradient(180deg, #c4ffe0 0%, #6ddb9a 100%);
    border-color: rgba(160, 255, 200, 0.9);
    box-shadow: 0 0 14px rgba(120, 220, 160, 0.55);
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
  }
  .rhythm-note.hold::before {
    content: "⇡";
    font-size: 22px;
    color: #0a4a26;
    margin-top: 2px;
  }
  .rhythm-note.hold::after {
    content: "HOLD";
    font-size: 8px;
    color: #0a4a26;
    letter-spacing: 0.12em;
    margin-bottom: 2px;
  }
  /* 判定フィードバック */
  .rhythm-judgment {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 0 12px currentColor;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
  }
  .rhythm-judgment.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
  }
  .rhythm-judgment[data-type="perfect"] { color: #ffd750; }
  .rhythm-judgment[data-type="good"]    { color: #80e0ff; }
  .rhythm-judgment[data-type="bad"]     { color: #ffa040; }
  .rhythm-judgment[data-type="miss"]    { color: #ff5050; }
  /* スマホタップエリア */
  .rhythm-tap-zone {
    position: absolute;
    bottom: 0;
    top: 60%;
    left: 0; right: 0;
    background: transparent;
    cursor: pointer;
  }
  /* リザルト画面 */
  .rhythm-result {
    position: absolute;
    inset: 0;
    background: rgba(8, 4, 14, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 90;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rhythm-result.open { display: flex; }
  .rhythm-result-rank {
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
    text-shadow: 0 0 30px currentColor;
  }
  .rhythm-result-rank[data-rank="S"] { color: #ffd750; }
  .rhythm-result-rank[data-rank="A"] { color: #80e0ff; }
  .rhythm-result-rank[data-rank="B"] { color: #b0e060; }
  .rhythm-result-rank[data-rank="C"] { color: #ffa040; }
  .rhythm-result-rank[data-rank="D"] { color: #888; }
  .rhythm-result-rank[data-rank="F"] { color: #ff5050; }
  .rhythm-result-score {
    font-size: 28px;
    color: var(--ink-warm);
    margin-bottom: 18px;
    font-feature-settings: "tnum";
  }
  .rhythm-result-stats {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rhythm-result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.15);
    border-radius: 6px;
    padding: 8px 14px;
    min-width: 70px;
  }
  .rhythm-result-stat-label {
    font-size: 10px;
    color: rgba(245, 233, 211, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .rhythm-result-stat-value {
    font-size: 22px;
    color: var(--ink-warm);
    margin-top: 4px;
    font-feature-settings: "tnum";
  }
  .rhythm-result-price {
    font-size: 32px;
    color: var(--neon-cyan);
    margin-bottom: 16px;
    font-feature-settings: "tnum";
  }
  .rhythm-result-comment {
    max-width: 560px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-warm);
    text-align: center;
    margin-bottom: 22px;
    background: rgba(245, 233, 211, 0.05);
    border-left: 3px solid rgba(255, 90, 200, 0.5);
    padding: 12px 16px;
    border-radius: 4px;
  }
  .rhythm-result-btn {
    background: linear-gradient(135deg, rgba(255, 90, 200, 0.4), rgba(157, 78, 255, 0.4));
    border: 1px solid rgba(255, 90, 200, 0.6);
    color: var(--ink-warm);
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: filter 0.2s;
  }
  .rhythm-result-btn:hover { filter: brightness(1.15); }
  /* ★2026-06-22 ファイブ：横向きスマホなど画面が低い時、結果画面が縦に収まらず
     下の「閉じる」ボタンが画面外に出て次に進めない問題への対策。
     幅基準(max-width)は横向きスマホ(幅>720px)に効かないため、高さ基準(max-height)で
     上詰め＋スクロール可にし、各要素を縮小して必ずボタンが画面内に届くようにする。 */
  @media (max-height: 620px) {
    .rhythm-result {
      justify-content: flex-start;
      padding: 14px 16px;
    }
    .rhythm-result-rank { font-size: 52px; margin-bottom: 2px; }
    .rhythm-result-score { font-size: 15px; margin-bottom: 8px; }
    .rhythm-result-stats { gap: 8px; margin-bottom: 10px; }
    .rhythm-result-stat { min-width: 48px; padding: 4px 8px; }
    .rhythm-result-stat-label { font-size: 9px; }
    .rhythm-result-stat-value { font-size: 15px; margin-top: 2px; }
    .rhythm-result-price { font-size: 18px; margin-bottom: 8px; }
    .rhythm-result-comment { font-size: 12px; line-height: 1.45; margin-bottom: 10px; padding: 8px 12px; }
    .rhythm-result-btn { padding: 9px 28px; font-size: 14px; }
  }
  /* スマホ調整 */
  @media (max-width: 720px) {
    .rhythm-header { padding: 8px 12px; }
    .rhythm-stat-value { font-size: 14px; }
    .rhythm-result-rank { font-size: 80px; }
    .rhythm-result-score { font-size: 22px; }
    .rhythm-result-stat { min-width: 56px; padding: 6px 10px; }
    .rhythm-result-stat-value { font-size: 18px; }
    .rhythm-note { width: 40px; height: 40px; margin-left: -20px; }
    .rhythm-note.special::before { font-size: 22px; }
    .rhythm-note.combo::before { font-size: 18px; }
    .rhythm-note.trap::before { font-size: 24px; }
    .rhythm-note.hold::before { font-size: 18px; }
    .rhythm-note.hold::after { font-size: 7px; }
    /* スマホ：穴サイズを縮小（48px）。 hitzoneY は JS 側で動的に判定。
       JS は HZ_SIZE=64 固定だが、誤差は ±8px ≒ ±10ms 程度なので影響は軽微。
       気になる場合は JS 側に viewport 判定を入れる。 */
    .rhythm-hitzone-circle { width: 48px; height: 48px; }
    .rhythm-key-label { font-size: 16px; }
  }

  /* ============================================================ */
  /* ===== ライブハウス Innocent UI v2：ふじしろ風レイアウト ===== */
  /* ============================================================ */
  /* 半透明背景 + 立ち絵左(VN) + 名前カード + 中央右パネル */
  .innocent-shop {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(8,4,14,0.5) 0%, rgba(8,4,14,0.7) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    display: none;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .innocent-shop.open { display: block; }
  /* 立ち絵：VNフレーミング（175cm 相当 scale 1.0 — テンラク男性平均身長として暫定） */
  .innocent-greeting-portrait {
    --scale: 1.0;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
    border-radius: 0;
    border: 0;
    background: transparent;
    width: auto;
  }
  .innocent-name-card {
    position: absolute;
    left: max(12vw, 110px);
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    background: linear-gradient(180deg, rgba(40, 20, 10, 0.92), rgba(28, 14, 6, 0.92));
    border: 1px solid rgba(255, 180, 80, 0.55);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 140, 60, 0.22);
    color: var(--ink-warm);
    padding: 8px 26px;
    border-radius: 22px;
    font-size: 15px;
    letter-spacing: 0.12em;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
  }
  /* 旧ラッパーを無効化（互換のため要素は残すが見えない） */
  .innocent-greeting {
    position: static;
    display: contents;  /* 子要素を直接 .innocent-shop に流す */
  }
  .innocent-greeting-body { display: none; }  /* 旧の挨拶テキスト位置はパネル内へ移行 */
  /* 右側パネル */
  .innocent-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%);
    width: min(58vw, 760px);
    max-height: calc(var(--ui-max-height) - 10px);
    background: linear-gradient(180deg, rgba(36, 18, 8, 0.94), rgba(24, 10, 4, 0.94));
    border: 1px solid rgba(255, 180, 80, 0.28);
    border-radius: 14px;
    padding: 12px 18px max(16px, var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* スクロール末尾の下端クリア確保（iOS Safari の scroll-container padding-bottom 無視対策）。
     2026-06-20：思い出フォームの戻る/次へが角丸下端にめり込む問題への対策。 */
  .innocent-content::after {
    content: '';
    display: block;
    flex: 0 0 6px;
  }
  /* パネル内ヘッダー（×ボタン+挨拶テキスト） */
  .innocent-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  .innocent-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.22);
    color: var(--ink-warm);
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    align-self: auto;
    padding: 0;
  }
  .innocent-close:hover { background: rgba(245, 233, 211, 0.18); }
  /* パネル上部の挨拶枠：2026-06-05 全店で非表示に統一。
     セリフ部分は使わない方針。空いたスペースは下の選択肢/凡例UIに譲る。 */
  .innocent-greeting-text,
  .fukuri-greeting-text,
  .soi-greeting-text,
  .mm-greeting-text,
  .yanagi-greeting-text {
    display: none !important;
  }

  /* ===== 共通：店の自由入力チャット（shop-chat-*）=====
     各店の「会話タブ」内で再利用。
     構成：プロンプト → 入力欄 → 「話す」ボタン → 反応 → 「メニューへ」 */
  .shop-chat-prompt {
    font-size: 15px;
    color: #ffb060;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    font-weight: 700;
  }
  .shop-chat-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .shop-chat-form-label {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.65);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .shop-chat-form-label .count {
    color: rgba(245, 233, 211, 0.45);
    font-feature-settings: "tnum";
    font-size: 11px;
  }
  .shop-chat-form-textarea {
    background: rgba(20, 9, 44, 0.55);
    border: 1px solid rgba(255, 180, 80, 0.3);
    border-radius: 6px;
    color: #f3eaff;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.55;
    font-family: inherit;
    resize: none;
    min-height: 90px;
    width: 100%;
    box-sizing: border-box;
  }
  .shop-chat-form-textarea:focus {
    outline: none;
    border-color: rgba(255, 180, 80, 0.7);
    background: rgba(20, 9, 44, 0.75);
  }
  .shop-chat-submit {
    align-self: flex-end;
    padding: 9px 26px;
    background: linear-gradient(135deg, rgba(255, 180, 80, 0.9), rgba(255, 110, 60, 0.9));
    color: #1a0a30;
    border: 1px solid rgba(255, 200, 120, 0.7);
    border-radius: 6px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 0 10px rgba(255, 180, 80, 0.25);
  }
  .shop-chat-submit:hover:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(-1px);
  }
  .shop-chat-submit:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
  }
  .shop-chat-response {
    background: rgba(255, 180, 80, 0.10);
    border-left: 2px solid rgba(255, 180, 80, 0.55);
    border-radius: 4px;
    padding: 12px 14px;
    margin-top: 10px;
    color: #f3eaff;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-line;
    animation: shopChatResponseFade 0.3s ease-out;
  }
  @keyframes shopChatResponseFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 600px) {
    .shop-chat-prompt { font-size: 13px; }
    .shop-chat-form-textarea { font-size: 16px; min-height: 70px; }
    .shop-chat-submit { font-size: 13px; padding: 8px 20px; }
    .shop-chat-response { font-size: 13px; padding: 10px 12px; }
  }
  /* 各ステップ */
  .innocent-step {
    display: none;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }
  .innocent-step.active { display: flex; }
  /* メニュー（最初の選択肢） */
  .innocent-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .innocent-menu-btn {
    background: linear-gradient(135deg, rgba(255, 180, 80, 0.15), rgba(255, 90, 50, 0.1));
    border: 1px solid rgba(255, 180, 80, 0.3);
    color: var(--ink-warm);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: filter 0.2s, border-color 0.2s;
    line-height: 1.45;
    /* ミニプレビュー埋め込み用に flex 化 */
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .innocent-menu-btn:hover {
    filter: brightness(1.18);
    border-color: rgba(255, 180, 80, 0.6);
  }
  .innocent-menu-btn .text-area {
    flex: 1;
    min-width: 0;
  }
  .innocent-menu-btn .label {
    font-size: 15px;
    font-weight: 600;
    color: #ffb060;
  }
  .innocent-menu-btn .sub {
    font-size: 11px;
    color: rgba(245, 233, 211, 0.65);
    margin-top: 3px;
  }
  .innocent-menu-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* ===== ミニリズムゲームプレビュー（音を売るボタン内） =====
     本番ゲームと同じ見た目で、ノートが落下→穴で PERFECT が出るループ。 */
  .innocent-menu-btn .mini-rhythm {
    flex-shrink: 0;
    width: 100px;
    height: 70px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(10, 6, 18, 0.9) 0%, rgba(20, 9, 44, 0.95) 100%);
    border: 1px solid rgba(78, 226, 255, 0.25);
    overflow: hidden;
    position: relative;
    display: flex;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  }
  .mini-lane {
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  .mini-lane:nth-child(1) {
    --c: 139, 92, 255;
    border-right: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, transparent, rgba(139, 92, 255, 0.15));
  }
  .mini-lane:nth-child(2) {
    --c: 255, 110, 180;
    background: linear-gradient(180deg, transparent, rgba(255, 110, 180, 0.15));
  }
  .mini-hz {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(var(--c), 0.95);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(var(--c), 0.6);
    z-index: 3;
    background: transparent;
    pointer-events: none;
    animation: mini-flash 1.8s linear infinite;
  }
  .mini-lane:nth-child(2) .mini-hz { animation-delay: -0.9s; }
  @keyframes mini-flash {
    0%, 65%   { transform: translateX(-50%) scale(1);
                box-shadow: 0 0 6px rgba(var(--c), 0.6); }
    70%       { transform: translateX(-50%) scale(1.4);
                box-shadow: 0 0 12px rgba(var(--c), 1), 0 0 3px #fff;
                border-color: #fff; }
    85%, 100% { transform: translateX(-50%) scale(1);
                box-shadow: 0 0 6px rgba(var(--c), 0.6);
                border-color: rgba(var(--c), 0.95); }
  }
  .mini-note {
    position: absolute;
    left: 50%;
    top: 0;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ddd 60%, #888 100%);
    border: 1.5px solid rgba(255,255,255,0.7);
    box-shadow: 0 0 4px rgba(255,255,255,0.4);
    animation: mini-fall 1.8s linear infinite;
  }
  .mini-note.special {
    background: radial-gradient(circle, #fff5b0 0%, #ffd864 50%, #c0951c 100%);
    border-color: rgba(255,240,160,0.9);
    box-shadow: 0 0 6px rgba(255,215,90,0.7);
  }
  .mini-lane:nth-child(1) .mini-note { animation-delay: 0s; }
  .mini-lane:nth-child(2) .mini-note { animation-delay: -0.9s; }
  @keyframes mini-fall {
    0%   { transform: translate3d(0, -14px, 0); opacity: 1; }
    70%  { transform: translate3d(0, 44px, 0); opacity: 1; }
    73%  { transform: translate3d(0, 50px, 0); opacity: 0; }
    100% { transform: translate3d(0, 50px, 0); opacity: 0; }
  }
  .mini-judge {
    position: absolute;
    bottom: 32%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 900;
    color: #ffd750;
    text-shadow: 0 0 5px rgba(255, 215, 90, 0.9);
    letter-spacing: 0.05em;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    animation: mini-perfect 1.8s linear infinite;
  }
  .mini-lane:nth-child(2) .mini-judge { animation-delay: -0.9s; }
  @keyframes mini-perfect {
    0%, 68%   { opacity: 0; transform: translate(-50%, 4px); }
    70%       { opacity: 1; transform: translate(-50%, -2px); }
    85%       { opacity: 1; transform: translate(-50%, -6px); }
    100%      { opacity: 0; transform: translate(-50%, -10px); }
  }

  /* ===== ノート種別凡例（難易度選択画面の上部） ===== */
  .innocent-note-legend {
    background: linear-gradient(180deg, rgba(20, 9, 44, 0.55), rgba(10, 6, 18, 0.55));
    border: 1px solid rgba(255, 180, 80, 0.25);
    border-radius: 12px;
    padding: 16px 18px 18px;
    margin-bottom: 18px;
  }
  .innocent-note-legend-title {
    font-size: 13px;
    color: #ffb060;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 700;
  }
  .innocent-note-legend-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  @media (max-width: 600px) {
    .innocent-note-legend-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
  }
  .legend-note-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .legend-note-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    color: #2a1858;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 0 10px rgba(255,255,255,0.25);
  }
  .legend-note-icon.normal {
    background: radial-gradient(circle, #fff 0%, #ddd 60%, #888 100%);
  }
  .legend-note-icon.special {
    background: radial-gradient(circle, #fff5b0 0%, #ffd864 50%, #c0951c 100%);
    border-color: rgba(255,240,160,0.95);
    color: #6b3500;
    box-shadow: 0 0 12px rgba(255,215,90,0.6);
  }
  .legend-note-icon.combo {
    background: radial-gradient(circle, #c4e0ff 0%, #7eb8ff 50%, #3c70cc 100%);
    border-color: rgba(170,210,255,0.9);
    color: #fff;
    box-shadow: 0 0 10px rgba(120,180,255,0.5);
  }
  .legend-note-icon.trap {
    background: radial-gradient(circle, #ffb0b0 0%, #ff5050 50%, #aa1010 100%);
    border-color: rgba(255,100,100,0.9);
    color: #fff;
    box-shadow: 0 0 10px rgba(255,80,80,0.5);
  }
  .legend-note-icon.hold {
    border-radius: 14px;
    background: linear-gradient(180deg, #c4ffe0 0%, #6ddb9a 100%);
    border-color: rgba(160,255,200,0.9);
    color: #0a4a26;
    width: 34px;
    height: 52px;
    font-size: 18px;
    box-shadow: 0 0 12px rgba(120,220,160,0.55);
  }
  .legend-note-name {
    font-size: 12px;
    font-weight: 700;
    color: #f3eaff;
    letter-spacing: 0.06em;
    line-height: 1.25;
    margin-top: 2px;
  }
  .legend-note-effect {
    font-size: 11px;
    color: rgba(245,233,211,0.65);
    line-height: 1.25;
  }
  @media (max-width: 600px) {
    .legend-note-icon { width: 32px; height: 32px; font-size: 18px; }
    .legend-note-icon.hold { width: 24px; height: 40px; font-size: 14px; }
    .legend-note-name { font-size: 10px; }
    .legend-note-effect { font-size: 9px; }
  }
  /* ジャンルグリッド */
  .innocent-genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    max-width: 720px;
    margin: 8px auto;
  }
  .innocent-genre-card {
    background: rgba(20, 10, 30, 0.6);
    border: 1px solid rgba(255, 180, 80, 0.25);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .innocent-genre-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 180, 80, 0.6);
    box-shadow: 0 6px 18px rgba(255, 180, 80, 0.18);
  }
  .innocent-genre-name {
    font-size: 17px;
    font-weight: 700;
    color: #ffb060;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
  }
  .innocent-genre-desc {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.65);
    line-height: 1.5;
    margin-bottom: 6px;
  }
  .innocent-genre-meta {
    font-size: 11px;
    color: rgba(245, 233, 211, 0.5);
    font-feature-settings: "tnum";
  }
  /* 記憶記入フォーム */
  .innocent-memory-form {
    max-width: 100%;
    width: 100%;
    margin: 8px auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .innocent-form-row { display: flex; flex-direction: column; gap: 6px; }
  .innocent-form-label {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.75);
    letter-spacing: 0.05em;
  }
  .innocent-form-label .count {
    color: rgba(255, 180, 80, 0.7);
    font-feature-settings: "tnum";
    margin-left: 6px;
  }
  .innocent-form-input, .innocent-form-textarea {
    width: 100%;
    background: rgba(20, 10, 30, 0.6);
    border: 1px solid rgba(255, 180, 80, 0.3);
    color: var(--ink-warm);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
  }
  .innocent-form-input:focus, .innocent-form-textarea:focus {
    outline: none;
    border-color: rgba(255, 180, 80, 0.7);
    background: rgba(20, 10, 30, 0.8);
  }
  .innocent-form-textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
  /* レーン選択 */
  .innocent-lane-grid {
    /* 凡例 + 内部グリッドの2段構成。グリッドは内側 .innocent-lane-grid-inner で組む。 */
    max-width: 720px;
    margin: 8px auto;
  }
  .innocent-lane-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
  }
  .innocent-lane-card {
    background: rgba(20, 10, 30, 0.6);
    border: 1px solid rgba(255, 180, 80, 0.25);
    border-radius: 12px;
    padding: 22px 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    text-align: center;
  }
  .innocent-lane-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 180, 80, 0.6);
  }
  .innocent-lane-card[disabled],
  .innocent-lane-card.locked {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    border-style: dashed;
  }
  .innocent-lane-num {
    /* 難易度名（EASY / NORMAL / HARD / EXPERT） */
    font-size: 28px;
    font-weight: 800;
    color: #ffb060;
    line-height: 1.1;
    letter-spacing: 0.08em;
  }
  .innocent-lane-mult {
    /* 副題：レーン数 */
    font-size: 13px;
    color: var(--neon-cyan);
    margin-top: 8px;
    letter-spacing: 0.16em;
    font-feature-settings: "tnum";
  }
  .innocent-lane-label {
    /* 状態表示（挑戦可能・クリア済み・解禁条件） */
    font-size: 13px;
    color: rgba(245, 233, 211, 0.7);
    margin-top: 12px;
  }
  /* ナビゲーション */
  .innocent-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 720px;
    margin: 16px auto 0;
    gap: 12px;
    flex-shrink: 0;   /* 下端で潰れず、戻る/次へを枠内に保つ（2026-06-20）。 */
  }
  .innocent-nav-btn {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.2);
    color: var(--ink-warm);
    padding: 9px 18px;
    border-radius: 22px;
    font-size: 13px;
    cursor: pointer;
  }
  .innocent-nav-btn:hover { background: rgba(245, 233, 211, 0.15); }
  .innocent-nav-btn.primary {
    background: linear-gradient(135deg, rgba(255, 180, 80, 0.5), rgba(255, 100, 50, 0.4));
    border-color: rgba(255, 180, 80, 0.7);
  }
  .innocent-nav-btn.primary:hover { filter: brightness(1.15); }
  .innocent-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  /* バブル表示（誕生日・雑談） */
  .innocent-bubbles {
    max-width: 560px;
    margin: 12px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .innocent-bubble {
    background: rgba(255, 180, 80, 0.1);
    border-left: 3px solid rgba(255, 180, 80, 0.6);
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-warm);
    opacity: 0;
    animation: innocent-bubble-in 0.35s ease forwards;
  }
  @keyframes innocent-bubble-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .innocent-bubble.birthday {
    background: linear-gradient(135deg, rgba(255, 220, 100, 0.18), rgba(255, 100, 200, 0.12));
    border-left-color: #ffd750;
    font-weight: 600;
  }
  /* 売却完了画面 */
  .innocent-complete {
    max-width: 560px;
    margin: 32px auto 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .innocent-complete-coin {
    font-size: 36px;
    color: var(--neon-cyan);
    font-feature-settings: "tnum";
  }
  .innocent-complete-msg {
    font-size: 15px;
    color: var(--ink-warm);
    line-height: 1.65;
    background: rgba(255, 180, 80, 0.08);
    border-left: 3px solid rgba(255, 180, 80, 0.5);
    padding: 12px 16px;
    border-radius: 4px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
  }
  /* スマホ調整 */
  @media (max-width: 720px) {
    /* v2 ふじしろ風レイアウト用 */
    .innocent-greeting-portrait { left: 3vw; max-width: 38vw; }
    .innocent-name-card {
      left: max(10vw, 90px);
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      font-size: 13px;
      padding: 6px 18px;
    }
    .innocent-content {
      /* ★2026-06-20：右端を記憶メーター右端（safe-right+4px）に合わせ×をノッチから出す。
         基底の left:50%+transform だと right 無効化のため left:auto / transform で右端アンカー。 */
      left: auto;
      right: calc(var(--safe-right) + 4px);
      transform: translateY(-50%);
      width: min(64vw, 580px);
      padding: 10px 14px 14px;
      max-height: 94vh;
    }
    .innocent-greeting-text { font-size: 12px; padding: 7px 10px; }
    .innocent-content { padding: 14px 16px 24px; }
    .innocent-menu-btn { padding: 14px 16px; font-size: 14px; }
    .innocent-genre-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .innocent-genre-name { font-size: 15px; }
    .innocent-lane-grid-inner { grid-template-columns: repeat(2, 1fr); }
    .innocent-lane-num { font-size: 18px; letter-spacing: 0.06em; }
    .innocent-lane-mult { font-size: 10px; }
  }

  /* ============================================================ */
  /* ===== 職業習得所（フクリ）UI v2：ふじしろ風レイアウト ===== */
  /* ============================================================ */
  /* 半透明背景 + 立ち絵左(VN) + 名前カード + 中央右パネル */
  .fukuri-shop {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(8,4,14,0.5) 0%, rgba(8,4,14,0.7) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    display: none;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .fukuri-shop.open { display: block; }
  /* 立ち絵：VNフレーミング（仕様書記載なし → 163cm相当 scale 0.931） */
  .fukuri-portrait {
    --scale: 0.931;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
  }
  .fukuri-name-card {
    position: absolute;
    left: max(12vw, 110px);
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    background: linear-gradient(180deg, rgba(40, 32, 20, 0.92), rgba(28, 22, 14, 0.92));
    border: 1px solid rgba(200, 184, 144, 0.55);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(180, 160, 120, 0.18);
    color: var(--ink-warm);
    padding: 8px 26px;
    border-radius: 22px;
    font-size: 15px;
    letter-spacing: 0.12em;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
  }
  .fukuri-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%);
    width: min(58vw, 760px);
    max-height: calc(var(--ui-max-height) - 10px);
    background: linear-gradient(180deg, rgba(30, 24, 16, 0.94), rgba(20, 16, 10, 0.94));
    border: 1px solid rgba(200, 184, 144, 0.28);
    border-radius: 14px;
    padding: 12px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    overflow-y: auto;
  }
  .fukuri-panel-header {
    display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;
  }
  .fukuri-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.22);
    color: var(--ink-warm);
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
  }
  .fukuri-close:hover { background: rgba(245, 233, 211, 0.18); }
  .fukuri-greeting-text {
    font-size: 13px; line-height: 1.65; color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.28);
    border-left: 2px solid rgba(200, 184, 144, 0.55);
    padding: 9px 12px; border-radius: 4px;
    flex-shrink: 0;
  }
  .fukuri-greeting-text .bubble { display: block; margin-bottom: 3px; }
  .fukuri-tabs {
    display: flex; gap: 6px; flex-shrink: 0;
  }
  .fukuri-tab {
    flex: 1;
    padding: 8px 0;
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.18);
    color: rgba(245, 233, 211, 0.72);
    cursor: pointer;
    border-radius: 7px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    transition: all 0.2s;
  }
  .fukuri-tab:hover { background: rgba(245, 233, 211, 0.12); }
  .fukuri-tab.active {
    background: linear-gradient(135deg, rgba(200, 184, 144, 0.35), rgba(160, 130, 90, 0.35));
    color: var(--ink-warm);
    border-color: rgba(200, 184, 144, 0.55);
    box-shadow: 0 0 14px rgba(200, 184, 144, 0.22);
  }
  .fukuri-pane {
    display: none;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }
  .fukuri-pane.active { display: flex; }
  /* ギフトボタン（缶コーヒー渡す） */
  .fukuri-gift-btn {
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 200, 100, 0.55);
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.35), rgba(220, 140, 60, 0.35));
    color: var(--ink-warm);
    transition: filter 0.2s;
    flex-shrink: 0;
  }
  .fukuri-gift-btn:hover { filter: brightness(1.18); }
  /* 闇医者使用ボタン */
  .fukuri-dark-doctor-btn {
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(200, 80, 80, 0.55);
    background: linear-gradient(135deg, rgba(180, 60, 60, 0.35), rgba(120, 40, 40, 0.35));
    color: var(--ink-warm);
    transition: filter 0.2s;
    flex-shrink: 0;
  }
  .fukuri-dark-doctor-btn:hover { filter: brightness(1.18); }
  /* 商品リスト（パネル内に縦並び） */
  .fukuri-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 420px;
    padding-right: 4px;
  }
  .fukuri-products::-webkit-scrollbar { width: 6px; }
  .fukuri-products::-webkit-scrollbar-thumb { background: rgba(245, 233, 211, 0.25); border-radius: 3px; }
  .fukuri-product {
    background: rgba(20, 10, 30, 0.6);
    border: 1px solid rgba(180, 160, 120, 0.25);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
  }
  .fukuri-product:hover {
    transform: translateY(-3px);
    border-color: rgba(180, 160, 120, 0.6);
    box-shadow: 0 6px 18px rgba(180, 160, 120, 0.15);
  }
  .fukuri-product.purchased {
    border-color: rgba(120, 220, 160, 0.5);
    opacity: 0.65;
  }
  .fukuri-product.purchased::after {
    content: "購入済";
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(120, 220, 160, 0.85);
    color: #0a0410;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .fukuri-product.affordless {
    border-style: dashed;
  }
  .fukuri-product-name {
    font-size: 17px;
    font-weight: 700;
    color: #c8b890;
    letter-spacing: 0.03em;
  }
  .fukuri-product-effect {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.7);
    line-height: 1.55;
    min-height: 32px;
  }
  .fukuri-product-effect.locked {
    color: rgba(245, 233, 211, 0.35);
    font-style: italic;
  }
  .fukuri-product-price {
    font-size: 14px;
    color: var(--neon-cyan);
    font-feature-settings: "tnum";
    margin-top: auto;
  }
  /* ナビ */
  .fukuri-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 920px;
    margin: 16px auto 0;
    gap: 12px;
  }
  .fukuri-nav-btn {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.2);
    color: var(--ink-warm);
    padding: 9px 18px;
    border-radius: 22px;
    font-size: 13px;
    cursor: pointer;
  }
  .fukuri-nav-btn:hover { background: rgba(245, 233, 211, 0.15); }
  /* 愚痴/雑談バブル */
  .fukuri-bubbles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
  .fukuri-bubble {
    background: rgba(180, 160, 120, 0.1);
    border-left: 3px solid rgba(180, 160, 120, 0.6);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-warm);
    opacity: 0;
    animation: innocent-bubble-in 0.35s ease forwards;
  }
  .fukuri-vent-another {
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid rgba(245, 233, 211, 0.25);
    background: rgba(245, 233, 211, 0.08);
    color: var(--ink-warm);
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .fukuri-vent-another:hover { background: rgba(245, 233, 211, 0.16); }
  /* 確認ダイアログ（贈り物・購入） */
  .fukuri-confirm {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 5;
  }
  .fukuri-confirm.open { display: flex; }
  .fukuri-confirm-card {
    background: linear-gradient(180deg, #1a1410 0%, #0a0810 100%);
    border: 1px solid rgba(180, 160, 120, 0.4);
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    padding: 22px;
    text-align: center;
    color: var(--ink-warm);
  }
  .fukuri-confirm-text {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .fukuri-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .fukuri-confirm-btn {
    background: rgba(245, 233, 211, 0.1);
    border: 1px solid rgba(245, 233, 211, 0.25);
    color: var(--ink-warm);
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  .fukuri-confirm-btn.primary {
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.4), rgba(220, 140, 60, 0.3));
    border-color: rgba(255, 200, 100, 0.6);
  }
  .fukuri-confirm-btn:hover { filter: brightness(1.15); }
  /* スマホ調整（横画面前提） */
  @media (max-width: 900px) {
    .fukuri-portrait { left: 3vw; max-width: 38vw; }
    .fukuri-name-card {
      left: max(10vw, 90px);
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      font-size: 13px;
      padding: 6px 18px;
    }
    .fukuri-panel {
      /* ★2026-06-20：右端を記憶メーター右端に合わせて×をノッチから出す（右端アンカー） */
      left: auto;
      right: calc(var(--safe-right) + 4px);
      transform: translateY(-50%);
      width: min(64vw, 580px);
      padding: 10px 14px 14px;
      max-height: 94vh;
    }
    .fukuri-greeting-text { font-size: 12px; padding: 7px 10px; }
    .fukuri-tab { font-size: 12px; padding: 8px 0; }
    .fukuri-product-name { font-size: 14px; }
    .fukuri-product-effect { font-size: 11px; }
    .fukuri-bubble { font-size: 13px; padding: 8px 12px; }
  }

  /* ============================================================ */
  /* ===== 隠し贈り物プロンプト（汎用、フクリ等で使用）===== */
  /* ============================================================ */
  .gift-prompt {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .gift-prompt.open { display: flex; }
  .gift-prompt-card {
    background: linear-gradient(180deg, #2a1a08 0%, #1a1408 100%);
    border: 2px solid rgba(255, 200, 100, 0.45);
    border-radius: 12px;
    max-width: 460px;
    width: 100%;
    padding: 24px;
    text-align: center;
    color: var(--ink-warm);
    box-shadow: 0 0 30px rgba(255, 180, 80, 0.2);
  }
  .gift-prompt-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }
  .gift-prompt-text {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .gift-prompt-sub {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.6);
    margin-bottom: 22px;
  }
  .gift-prompt-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .gift-prompt-btn {
    background: rgba(245, 233, 211, 0.1);
    border: 1px solid rgba(245, 233, 211, 0.25);
    color: var(--ink-warm);
    padding: 10px 26px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  .gift-prompt-btn.primary {
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.5), rgba(220, 140, 60, 0.4));
    border-color: rgba(255, 200, 100, 0.7);
  }
  .gift-prompt-btn:hover { filter: brightness(1.15); }

  /* ============================================================ */
  /* ===== 自動販売機（rukem-vendor）UI ===== */
  /* ============================================================ */
  .vending-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 4, 14, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 70;
    display: none;
    flex-direction: column;
    color: var(--ink-warm);
  }
  .vending-overlay.open { display: flex; }
  .vending-header {
    flex-shrink: 0;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(120, 200, 220, 0.25);
    display: flex;
    justify-content: flex-end;   /* 閉じるを右端へ。タイトルは絶対配置で中央（2026-06-20） */
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgba(20, 30, 40, 0.4) 0%, transparent 100%);
  }
  .vending-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
    color: #80c8e0;
    letter-spacing: 0.1em;
  }
  .vending-coin {
    font-size: 14px;
    color: var(--neon-cyan);
    font-feature-settings: "tnum";
  }
  .vending-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.2);
    color: var(--ink-warm);
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
  }
  .vending-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* === 商品棚アップ画像（開いたら即表示） === */
  /* ★2026-06-12：max-height で高さ制約すると wrap の AR が壊れて
     「買う」ボタンの left:% が画像内位置とずれる（スマホで右列が右に逃げる現象の元凶）。
     高さ制約は width に変換することで AR を保つ。
     width = min(95vw, 1400px, height制約 × 1.778) で aspect-ratio が常に画像と一致する。 */
  .vending-shelf-wrap {
    display: block;
    position: relative;
    width: min(95vw, 1400px, calc((var(--ui-max-height) - 80px) * 1.7768));
    aspect-ratio: 1672 / 941;  /* shelf.webp の元比率 (1.7768) */
    margin: 0 auto;
  }
  .vending-shelf-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
    pointer-events: none;
  }
  /* === 「買う」ボタン（各「500 coin」ラベルの右側、可視化） === */
  .vending-buy-btn {
    position: absolute;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ffe680 0%, #d8a86a 100%);
    color: #2a1810;
    border: 1.5px solid #fff8e1;
    border-radius: 6px;
    padding: clamp(4px, 0.7vw, 8px) clamp(8px, 1.3vw, 16px);
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: clamp(10px, 1.15vw, 14px);
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 12px rgba(255, 216, 74, 0.35);
    transition: all 0.18s;
    z-index: 2;
    min-width: clamp(56px, 6vw, 80px);
  }
  .vending-buy-btn:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 22px rgba(255, 216, 74, 0.7);
    filter: brightness(1.08);
  }
  .vending-buy-btn:active {
    transform: translateY(-50%) scale(0.97);
  }
  .vending-buy-btn.sold-out {
    background: linear-gradient(135deg, #888 0%, #555 100%);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.4);
    cursor: not-allowed;
    box-shadow: none;
    text-decoration: line-through;
  }
  .vending-buy-btn.sold-out:hover {
    transform: translateY(-50%);
    filter: none;
  }
  .vending-buy-btn.affordless {
    background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%);
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,80,80,0.5);
    cursor: not-allowed;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .vending-buy-btn.affordless:hover {
    transform: translateY(-50%);
    filter: none;
  }
  /* === 購入確認ダイアログ === */
  .vending-confirm {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .vending-confirm.open { display: flex; }
  .vending-confirm-card {
    background: linear-gradient(180deg, #1a0e2e 0%, #0e0820 100%);
    border: 1px solid rgba(255, 216, 74, 0.4);
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 32px rgba(0,0,0,0.6), 0 0 40px rgba(255, 216, 74, 0.15);
  }
  .vending-confirm-text {
    color: var(--text);
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 22px;
  }
  .vending-confirm-text strong {
    color: #ffe680;
    font-size: 18px;
    letter-spacing: 0.06em;
  }
  .vending-confirm-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
  }
  .vending-confirm-btn {
    flex: 1;
    max-width: 160px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(245, 233, 211, 0.3);
    background: rgba(30, 18, 50, 0.8);
    color: var(--text);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .vending-confirm-btn.primary {
    background: linear-gradient(135deg, #ffe680 0%, #d8a86a 100%);
    color: #2a1810;
    border-color: #fff8e1;
    font-weight: 600;
  }
  .vending-confirm-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
  /* === 旧 vending-grid（残置だが未使用） === */
  .vending-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 220px));
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
    max-width: 720px;
    width: 100%;
  }
  .vending-item {
    background: linear-gradient(180deg, #1a2230 0%, #0a121a 100%);
    border: 2px solid rgba(120, 200, 220, 0.35);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 180px;
  }
  .vending-item:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 200, 220, 0.7);
    box-shadow: 0 6px 18px rgba(120, 200, 220, 0.18);
  }
  .vending-item.sold-out {
    opacity: 0.4;
    cursor: not-allowed;
    border-style: dashed;
  }
  .vending-item.sold-out::after {
    content: "SOLD OUT";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    color: rgba(255, 100, 100, 0.85);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.2em;
    pointer-events: none;
  }
  .vending-item.affordless {
    opacity: 0.55;
    border-style: dashed;
  }
  .vending-num {
    position: absolute;
    top: 8px; right: 10px;
    background: rgba(120, 200, 220, 0.85);
    color: #0a121a;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    font-feature-settings: "tnum";
  }
  .vending-name {
    font-size: 15px;
    font-weight: 700;
    color: #80c8e0;
    line-height: 1.4;
    margin-top: 4px;
  }
  .vending-desc {
    font-size: 11px;
    color: rgba(245, 233, 211, 0.75);
    line-height: 1.55;
    flex: 1;
  }
  .vending-price {
    font-size: 14px;
    color: var(--neon-cyan);
    font-feature-settings: "tnum";
    margin-top: auto;
  }
  /* 結果モーダル（買った直後の演出） */
  .vending-result {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 3;
  }
  .vending-result.open { display: flex; }
  .vending-result-card {
    background: linear-gradient(180deg, #1a2230 0%, #0a121a 100%);
    border: 1px solid rgba(120, 200, 220, 0.5);
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    padding: 22px;
    text-align: center;
    color: var(--ink-warm);
  }
  .vending-result-icon {
    font-size: 42px;
    margin-bottom: 10px;
  }
  .vending-result-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .vending-result-btn {
    background: linear-gradient(135deg, rgba(120, 200, 220, 0.45), rgba(80, 140, 200, 0.35));
    border: 1px solid rgba(120, 200, 220, 0.6);
    color: var(--ink-warm);
    padding: 9px 26px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  /* スマホ調整 */
  @media (max-width: 720px) {
    .vending-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: none; }
    .vending-item { min-height: 140px; padding: 10px; }
    .vending-name { font-size: 13px; }
    .vending-desc { font-size: 10px; }
    .vending-price { font-size: 12px; }
  }

  /* ============================================================ */
  /* ===== レストランtogeru ソイショップ v2：ふじしろ風レイアウト ===== */
  /* ============================================================ */
  /* 構造：半透明背景 + 立ち絵左(VN) + 名前カード + 中央右パネル */
  .soi-shop {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(8,4,14,0.5) 0%, rgba(8,4,14,0.7) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    display: none;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .soi-shop.open { display: block; }
  /* 立ち絵：VNフレーミング（仕様書記載なし → 170cm相当の scale 0.971） */
  .soi-portrait {
    --scale: 0.971;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
  }
  .soi-name-card {
    position: absolute;
    left: max(12vw, 110px);
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    background: linear-gradient(180deg, rgba(60, 30, 10, 0.92), rgba(40, 20, 8, 0.92));
    border: 1px solid rgba(255, 140, 60, 0.55);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 140, 60, 0.22);
    color: var(--ink-warm);
    padding: 8px 26px;
    border-radius: 22px;
    font-size: 15px;
    letter-spacing: 0.12em;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
  }
  .soi-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%);
    width: min(58vw, 760px);
    max-height: calc(var(--ui-max-height) - 10px);
    background: linear-gradient(180deg, rgba(38, 18, 10, 0.94), rgba(28, 10, 6, 0.94));
    border: 1px solid rgba(255, 140, 60, 0.28);
    border-radius: 14px;
    padding: 12px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    overflow-y: auto;
  }
  .soi-panel-header {
    display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;
  }
  .soi-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.22);
    color: var(--ink-warm);
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
  }
  .soi-close:hover { background: rgba(245, 233, 211, 0.18); }
  .soi-greeting-text {
    font-size: 13px; line-height: 1.65; color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.28);
    border-left: 2px solid rgba(255, 140, 60, 0.55);
    padding: 9px 12px; border-radius: 4px;
    flex-shrink: 0;
  }
  .soi-greeting-text .bubble { display: block; margin-bottom: 3px; }
  .soi-tabs {
    display: flex; gap: 6px; flex-shrink: 0;
  }
  .soi-tab {
    flex: 1;
    padding: 8px 0;
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.18);
    color: rgba(245, 233, 211, 0.72);
    cursor: pointer;
    border-radius: 7px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    transition: all 0.2s;
  }
  .soi-tab:hover { background: rgba(245, 233, 211, 0.12); }
  .soi-tab.active {
    background: linear-gradient(135deg, rgba(255, 140, 60, 0.4), rgba(220, 80, 40, 0.4));
    color: var(--ink-warm);
    border-color: rgba(255, 140, 60, 0.6);
    box-shadow: 0 0 14px rgba(255, 140, 60, 0.25);
  }
  .soi-pane {
    display: none;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }
  .soi-pane.active { display: flex; }
  /* バイトペイン */
  .soi-work-info {
    background: rgba(0, 0, 0, 0.32);
    border-left: 2px solid rgba(255, 200, 100, 0.55);
    padding: 9px 14px;
    border-radius: 4px;
    font-size: 13px; line-height: 1.65;
    color: rgba(245, 233, 211, 0.88);
    flex-shrink: 0;
  }
  .soi-work-btn {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
    cursor: pointer;
    border: 1px solid rgba(245, 233, 211, 0.25);
    background: rgba(245, 233, 211, 0.08);
    color: var(--ink-warm);
    transition: filter 0.2s;
  }
  .soi-work-btn.primary {
    background: linear-gradient(135deg, rgba(255, 140, 60, 0.45), rgba(220, 80, 40, 0.45));
    border-color: rgba(255, 140, 60, 0.6);
  }
  .soi-work-btn.gift {
    background: linear-gradient(135deg, rgba(255, 200, 100, 0.35), rgba(220, 140, 60, 0.35));
    border-color: rgba(255, 200, 100, 0.5);
  }
  .soi-work-btn:hover:not(:disabled) { filter: brightness(1.15); }
  .soi-work-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  /* ★2026-06-10：ソイバイトボタンに「注文がポコポコ」ミニプレビュー埋め込み
     テンラクの .mini-rhythm と同じ思想。視覚的にゲーム内容を伝える */
  .soi-work-btn.primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
  }
  .soi-work-btn.primary .work-text { flex: 1; }
  .soi-work-btn .mini-bait {
    flex-shrink: 0;
    width: 100px;
    height: 70px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(40, 25, 15, 0.95) 0%, rgba(20, 12, 6, 0.95) 100%);
    border: 1px solid rgba(255, 140, 60, 0.35);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  }
  /* お客さんの口元シルエット（下部）— 吹き出しがここから出る */
  .mini-bait::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 14px;
    border-radius: 50% 50% 40% 40%;
    background: rgba(255, 140, 60, 0.5);
    border: 1px solid rgba(255, 200, 120, 0.6);
  }
  .mini-bubble {
    position: absolute;
    bottom: 22px;
    width: 28px;
    height: 22px;
    background: #fff;
    color: #222;
    border-radius: 12px;
    font-size: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%) scale(0);
    opacity: 0;
    animation: mini-bait-pop 1.8s ease-in-out infinite;
  }
  .mini-bubble::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #fff;
  }
  .mini-bubble.b1 { left: 25%; animation-delay: 0s; }
  .mini-bubble.b2 { left: 50%; animation-delay: 0.6s; }
  .mini-bubble.b3 { left: 75%; animation-delay: 1.2s; }
  @keyframes mini-bait-pop {
    0%   { transform: translateX(-50%) translateY(8px) scale(0.4); opacity: 0; }
    18%  { transform: translateX(-50%) translateY(-2px) scale(1.1); opacity: 1; }
    25%  { transform: translateX(-50%) translateY(0) scale(1);     opacity: 1; }
    65%  { transform: translateX(-50%) translateY(0) scale(1);     opacity: 1; }
    75%  { transform: translateX(-50%) translateY(-4px) scale(0.95); opacity: 0.7; }
    100% { transform: translateX(-50%) translateY(-12px) scale(0.5); opacity: 0; }
  }
  /* 会話ペイン */
  .soi-chat-prompt {
    font-size: 14px; line-height: 1.65;
    color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.32);
    border-left: 2px solid rgba(255, 140, 60, 0.55);
    padding: 10px 14px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .soi-chat-topics {
    display: flex; flex-direction: column; gap: 6px;
    flex-shrink: 0;
  }
  .soi-chat-topic-btn {
    padding: 10px 14px;
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.18);
    border-radius: 6px;
    color: var(--ink-warm); cursor: pointer;
    font-size: 13px; text-align: left; line-height: 1.45;
    transition: all 0.2s;
  }
  .soi-chat-topic-btn:hover {
    background: linear-gradient(135deg, rgba(255, 140, 60, 0.18), rgba(220, 80, 40, 0.18));
    border-color: rgba(255, 140, 60, 0.4);
  }
  .soi-chat-response {
    font-size: 15px; line-height: 1.75;
    color: rgba(245, 233, 211, 0.94);
    border-left: 2px solid rgba(255, 140, 60, 0.55);
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
    white-space: pre-wrap;
    margin-top: 4px;
  }

  /* ============================================================ */
  /* ===== バイトゲーム本体 ===== */
  /* ============================================================ */
  .bait-overlay {
    position: fixed; inset: 0;
    background: #1a0f08;
    z-index: 85;
    display: none;
    flex-direction: column;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .bait-overlay.open { display: flex; }
  /* ヘッダー：ラウンド・席・累計ミス */
  .bait-header {
    flex-shrink: 0; padding: 12px 22px;
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(180deg, rgba(40, 25, 15, 0.95) 0%, rgba(40, 25, 15, 0.4) 100%);
    border-bottom: 1px solid rgba(255, 140, 60, 0.25);
  }
  .bait-stats { display: flex; gap: 18px; align-items: baseline; font-feature-settings: "tnum"; }
  .bait-stat-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
    color: rgba(245, 233, 211, 0.55); margin-right: 6px;
  }
  .bait-stat-value { font-size: 18px; color: var(--ink-warm); }
  .bait-stat-value.miss { color: #ff7050; }
  .bait-phase-label {
    font-size: 12px; color: rgba(245, 233, 211, 0.7);
    text-transform: uppercase; letter-spacing: 0.15em;
  }
  /* 観察ステージ */
  .bait-stage {
    flex: 1; position: relative; overflow: hidden;
    background:
      radial-gradient(ellipse at 50% 80%, rgba(255, 140, 60, 0.12) 0%, transparent 60%),
      linear-gradient(180deg, #2a1a0c 0%, #1a0f08 100%);
  }
  /* 背景画像レイヤー（店内 or お客シーン） */
  .bait-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease, background-image 0.4s ease;
    opacity: 0;
  }
  .bait-bg.show { opacity: 1; }
  /* お客シーン時、底部に暗いグラデで吹き出しを読みやすく */
  .bait-bg.show::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
  }
  /* ソイ紹介オーバーレイ（通常背景＋ソイ立ち絵＋セリフ）
     — 会話モード（.intro-portrait + .intro-textbox）と同じ仕様に統一 — */
  .bait-soi-intro {
    position: absolute; inset: 0;
    display: none;
    z-index: 5;
    cursor: pointer;
  }
  .bait-soi-intro.show { display: block; }
  /* ソイ立ち絵：身長170cm基準で scale 0.971（既存 .soi-portrait と同じ）
     bottom: -20vh + height: 110vh で足元カット → 顔が画面上部に来る VN フレーミング */
  .bait-soi-portrait {
    --scale: 0.971;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
    animation: baitSoiFadeIn 0.5s ease;
  }
  @keyframes baitSoiFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* セリフ枠：会話モードの .intro-textbox と同等スタイル（CSS変数で機種対応） */
  .bait-soi-bubble {
    position: absolute;
    left: 50%;
    bottom: var(--safe-bottom);
    transform: translateX(-50%);
    width: var(--textbox-max-width);
    background: linear-gradient(180deg, rgba(10, 6, 18, 0.78), rgba(8, 4, 14, 0.92));
    border: 1px solid rgba(255, 180, 100, 0.55);
    border-radius: 14px;
    padding: 14px 26px;
    color: var(--ink-warm, #f5e9d3);
    font-size: 15px;
    line-height: 1.7;
    box-shadow: 0 0 30px rgba(255, 180, 100, 0.16), 0 -8px 38px rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 2;
    animation: baitBubbleFadeIn 0.4s 0.2s ease both;
  }
  .bait-soi-bubble::before { content: '「'; opacity: 0.55; margin-right: -2px; }
  .bait-soi-bubble::after  { content: '」'; opacity: 0.55; margin-left: -2px; }
  @keyframes baitBubbleFadeIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  @media (min-width: 900px) {
    .bait-soi-bubble { padding: 16px 30px; font-size: 16px; }
  }
  /* タップで進む ヒント（バブル右上にひっそり） */
  .bait-soi-tap {
    position: absolute;
    bottom: calc(var(--safe-bottom) + 4px);
    right: 20px;
    font-size: 11px;
    color: rgba(255, 220, 170, 0.7);
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 3;
    animation: baitTapPulse 1.4s infinite;
  }
  @keyframes baitTapPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
  }
  .bait-customer {
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    height: 60%;
    max-height: 70vh;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: none;
  }
  .bait-customer.show { opacity: 1; }
  .bait-customer img {
    height: 100%;
    width: auto;
    display: block;
  }
  .bait-seat-label { display: none; }
  /* 観察用カウントダウンバー */
  .bait-countdown {
    position: absolute;
    top: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff8040, #ffcc60);
    transition: width 0.1s linear;
    width: 100%;
  }
  /* 吹き出し */
  .bait-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    color: #2a1a0c;
    padding: 10px 16px;
    border-radius: 16px;
    border: 2px solid rgba(255, 180, 100, 0.8);
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    max-width: 220px;
    text-align: center;
    line-height: 1.4;
  }
  .bait-bubble.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .bait-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 24px;
    width: 0; height: 0;
    border: 8px solid transparent;
    border-top-color: rgba(255, 180, 100, 0.8);
  }
  .bait-bubble.change { border-color: rgba(255, 200, 80, 1); background: #fff8dd; }
  .bait-bubble.replace { border-color: rgba(255, 120, 80, 1); background: #ffe8dd; }
  /* 入力フェーズ */
  .bait-input {
    position: absolute; inset: 0;
    background: rgba(20, 12, 6, 0.97);
    display: none;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
  }
  .bait-input.open { display: flex; }
  .bait-input-title {
    text-align: center;
    font-size: 18px;
    color: #ffac6c;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
  }
  .bait-input-sub {
    text-align: center;
    font-size: 12px;
    color: rgba(245, 233, 211, 0.6);
    margin-bottom: 16px;
  }
  .bait-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-width: 900px;
    margin: 0 auto 16px;
    width: 100%;
  }
  .bait-input-card {
    background: rgba(40, 24, 12, 0.7);
    border: 1px solid rgba(255, 140, 60, 0.35);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
  }
  .bait-input-card:hover { background: rgba(60, 36, 18, 0.8); border-color: rgba(255, 140, 60, 0.7); }
  .bait-input-card:active { transform: scale(0.96); }
  .bait-input-card.has-count {
    border-color: rgba(255, 200, 80, 0.9);
    background: rgba(70, 42, 20, 0.85);
  }
  .bait-input-card-name {
    font-size: 14px;
    color: var(--ink-warm);
    font-weight: 500;
  }
  .bait-input-card-cat {
    font-size: 10px;
    color: rgba(245, 233, 211, 0.5);
  }
  .bait-input-card-count {
    position: absolute;
    top: 6px; right: 8px;
    background: rgba(255, 200, 80, 0.9);
    color: #2a1a0c;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    font-feature-settings: "tnum";
    min-width: 22px;
    text-align: center;
  }
  .bait-input-card-reset {
    position: absolute;
    bottom: 4px; right: 6px;
    background: rgba(255, 80, 80, 0.5);
    color: white;
    border: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    display: none;
  }
  .bait-input-card.has-count .bait-input-card-reset { display: inline-flex; align-items: center; justify-content: center; }
  .bait-input-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
  }
  .bait-input-btn {
    background: linear-gradient(135deg, rgba(255, 140, 60, 0.5), rgba(200, 80, 40, 0.4));
    border: 1px solid rgba(255, 140, 60, 0.7);
    color: var(--ink-warm);
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
  }
  .bait-input-btn:hover { filter: brightness(1.15); }
  /* 採点フェーズ */
  .bait-result {
    position: absolute; inset: 0;
    background: rgba(20, 12, 6, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 上から積む（比較表のため） */
    padding: 20px 18px;
    overflow-y: auto; /* 比較表が長いとスクロール */
  }
  .bait-result.open { display: flex; }
  .bait-result-round {
    font-size: 14px;
    color: rgba(255, 200, 100, 0.7);
    letter-spacing: 0.15em;
    margin-bottom: 6px;
  }
  .bait-result-mistakes {
    font-size: 56px;
    font-weight: 800;
    color: #ffac6c;
    margin-bottom: 8px;
    font-feature-settings: "tnum";
  }
  .bait-result-mistakes-label {
    font-size: 12px;
    color: rgba(245, 233, 211, 0.6);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
  }
  .bait-result-comment {
    max-width: 520px;
    background: rgba(255, 140, 60, 0.1);
    border-left: 3px solid rgba(255, 140, 60, 0.6);
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-warm);
    margin-bottom: 22px;
    text-align: center;
    white-space: pre-line; /* \n を改行として描画（複数セリフ分離） */
  }
  .bait-result-btn {
    background: linear-gradient(135deg, rgba(255, 140, 60, 0.5), rgba(200, 80, 40, 0.4));
    border: 1px solid rgba(255, 140, 60, 0.7);
    color: var(--ink-warm);
    padding: 11px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
  }
  .bait-result-btn:hover { filter: brightness(1.15); }
  /* 3ラウンド比較セクション：注文 vs 入力をひと目で */
  .bait-result-rounds {
    width: 100%;
    max-width: 880px;
    margin: 4px auto 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .bait-round-card {
    background: rgba(30, 18, 8, 0.6);
    border: 1px solid rgba(255, 140, 60, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .bait-round-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .bait-round-card-thumb {
    width: 50px; height: 28px;
    background-size: cover; background-position: center;
    border-radius: 4px;
    border: 1px solid rgba(255, 180, 100, 0.35);
    flex-shrink: 0;
  }
  .bait-round-card-num {
    font-size: 10px;
    color: rgba(255, 200, 100, 0.9);
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 2px 7px;
    background: rgba(255, 140, 60, 0.15);
    border-radius: 9px;
    flex-shrink: 0;
  }
  .bait-round-card-miss {
    font-size: 10px;
    color: rgba(245, 233, 211, 0.55);
    margin-left: auto;
    flex-shrink: 0;
  }
  .bait-round-card-miss .num {
    color: #ff7050;
    font-size: 13px;
    font-weight: 700;
    margin-left: 3px;
  }
  .bait-round-card-miss.perfect .num { color: #5ee8b8; }
  /* 顧客名は別行：narrow card でも読める */
  .bait-round-card-customer {
    font-size: 13px;
    color: var(--ink-warm);
    font-weight: 600;
    margin: 0 0 6px 2px;
    line-height: 1.3;
  }
  .bait-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-feature-settings: "tnum";
  }
  .bait-compare-table th {
    text-align: left;
    color: rgba(245, 233, 211, 0.45);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 140, 60, 0.18);
  }
  .bait-compare-table th.num { text-align: center; width: 48px; }
  .bait-compare-table th.judge { text-align: center; width: 56px; }
  .bait-compare-table td {
    padding: 4px 6px;
    border-bottom: 1px dashed rgba(255, 140, 60, 0.08);
    color: var(--ink-warm);
  }
  .bait-compare-table td.num { text-align: center; }
  .bait-compare-table td.judge { text-align: center; font-weight: 700; font-size: 11px; }
  .bait-compare-table tr.ok td.judge    { color: #5ee8b8; }
  .bait-compare-table tr.ok td.user     { color: #5ee8b8; }
  .bait-compare-table tr.short td.judge { color: #ff7050; }
  .bait-compare-table tr.short td.user  { color: #ff7050; }
  .bait-compare-table tr.over td.judge  { color: #ffd24a; }
  .bait-compare-table tr.over td.user   { color: #ffd24a; }
  .bait-compare-table tr:last-child td { border-bottom: 0; }
  .bait-compare-empty {
    text-align: center;
    color: rgba(245, 233, 211, 0.4);
    font-size: 11px;
    padding: 8px 0;
  }
  /* PC：余裕があればカードを横並びで一覧化 */
  @media (min-width: 900px) {
    .bait-result-rounds {
      flex-direction: row;
      align-items: flex-start;
    }
    .bait-round-card { flex: 1; min-width: 0; }
    .bait-compare-table { font-size: 13px; }
    .bait-compare-table th { font-size: 11px; }
  }
  /* 最終リザルト */
  .bait-final-coin {
    font-size: 42px;
    color: var(--neon-cyan);
    margin-bottom: 8px;
    font-feature-settings: "tnum";
  }
  /* スマホ調整（横画面前提） */
  @media (max-width: 900px) {
    .soi-portrait { left: 3vw; max-width: 38vw; }
    .soi-name-card {
      left: max(10vw, 90px);
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      font-size: 13px;
      padding: 6px 18px;
    }
    .soi-panel {
      /* ★2026-06-20：右端を記憶メーター右端に合わせて×をノッチから出す（右端アンカー） */
      left: auto;
      right: calc(var(--safe-right) + 4px);
      transform: translateY(-50%);
      width: min(64vw, 580px);
      padding: 10px 14px 14px;
      max-height: 94vh;
    }
    .soi-greeting-text { font-size: 12px; padding: 7px 10px; }
    .soi-tab { font-size: 12px; padding: 8px 0; }
    .soi-work-btn { font-size: 13px; padding: 10px 12px; }
    .soi-chat-prompt { font-size: 12px; }
    .soi-chat-topic-btn { font-size: 12px; padding: 8px 12px; }
    .soi-chat-response { font-size: 13px; line-height: 1.65; }
  }
  @media (max-width: 720px) {
    .bait-bubble { font-size: 13px; padding: 8px 12px; max-width: 180px; }
    .bait-input-grid { grid-template-columns: repeat(2, 1fr); }
    .bait-result-mistakes { font-size: 44px; }
  }

  /* ============================================================ */
  /* ===== Sweet Memory（ジュリ）募金UI／両親の記憶ムービー =====
       2026-06-10 廃止：4段階訪問シーケンス（JURI_VISIT_STEPS_*）へ移行。
       残置されているのはカーネーション獲得演出のみ（B案で再利用）。
     ============================================================ */
  /* カーネーション獲得演出 */
  .carnation-prize {
    position: fixed; inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 100, 130, 0.25), rgba(0,0,0,0.95));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .carnation-prize.open { display: flex; }
  .carnation-card {
    background: linear-gradient(180deg, #3a1820 0%, #1a0810 100%);
    border: 2px solid rgba(255, 100, 130, 0.6);
    border-radius: 14px;
    padding: 32px 28px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    color: var(--ink-warm);
    box-shadow: 0 0 40px rgba(255, 100, 130, 0.4);
  }
  .carnation-icon {
    font-size: 80px;
    margin-bottom: 12px;
    animation: carnation-bloom 1.2s ease-out;
  }
  @keyframes carnation-bloom {
    0% { transform: scale(0.1) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(15deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
  }
  .carnation-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffb0c0;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  .carnation-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-warm);
    margin-bottom: 20px;
  }
  .carnation-btn {
    background: linear-gradient(135deg, rgba(255, 100, 130, 0.5), rgba(180, 60, 100, 0.4));
    border: 1px solid rgba(255, 100, 130, 0.7);
    color: var(--ink-warm);
    padding: 11px 30px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  /* 横向きスマホ等・低い画面（高さ620px以下）：中央寄せだと「受け取る」ボタンが
     画面外に出るため、上詰め＋スクロール可にして各要素を縮小（2026-06-22 ファイブ）。
     幅720px超の横向き端末では下の max-width:720px が効かないので高さ基準で対応する。
     ※rhythm-result と同方針（TP開発知見メモ §15）。 */
  @media (max-height: 620px) {
    .carnation-prize { align-items: flex-start; padding: 12px 14px; }
    .carnation-card { padding: 16px 22px; }
    .carnation-card img { width: 64px !important; margin-bottom: 6px !important; }
    .carnation-icon { font-size: 44px; margin-bottom: 6px; }
    .carnation-title { font-size: 16px; margin-bottom: 6px; }
    .carnation-text { font-size: 12px; line-height: 1.45; margin-bottom: 12px; }
    .carnation-btn { padding: 9px 26px; font-size: 13px; }
  }
  /* スマホ調整（カーネーション演出のみ） */
  @media (max-width: 720px) {
    .carnation-icon { font-size: 60px; }
    .carnation-title { font-size: 18px; }
  }

  /* ============================================================ */
  /* ===== 記憶市（ペア）ショップ v1：ふじしろ風レイアウト（2026-06-10） ===== */
  /* MMオークションUIをベースに、ペアテーマカラー（ピンク／紫系）でカスタマイズ */
  .pea-shop {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(20,8,18,0.5) 0%, rgba(20,8,18,0.7) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    display: none;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .pea-shop.open { display: block; }
  .pea-portrait {
    --scale: 0.94;  /* 165cm相当 */
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
    border-radius: 0; border: 0; background: transparent; width: auto;
  }
  .pea-name-card {
    position: absolute;
    left: max(12vw, 110px);
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    background: linear-gradient(180deg, rgba(40, 20, 50, 0.92), rgba(28, 14, 38, 0.92));
    border: 1px solid rgba(220, 150, 200, 0.55);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(220, 150, 200, 0.20);
    color: var(--ink-warm);
    padding: 8px 26px;
    border-radius: 22px;
    font-size: 15px;
    letter-spacing: 0.12em;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
  }
  .pea-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%);
    width: min(58vw, 760px);
    max-height: calc(var(--ui-max-height) - 10px);
    background: linear-gradient(180deg, rgba(36, 22, 46, 0.94), rgba(22, 14, 32, 0.94));
    border: 1px solid rgba(220, 150, 200, 0.32);
    border-radius: 14px;
    padding: 12px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    overflow-y: auto;
  }
  .pea-panel-header {
    display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;
  }
  .pea-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.22);
    color: var(--ink-warm);
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; align-self: auto; padding: 0;
  }
  .pea-close:hover { background: rgba(245, 233, 211, 0.18); }
  .pea-greeting-text {
    font-size: 13px; line-height: 1.7; color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.28);
    border-left: 2px solid rgba(220, 150, 200, 0.55);
    padding: 9px 12px; border-radius: 4px;
    flex-shrink: 0;
  }
  .pea-greeting-text .bubble { display: block; margin-bottom: 3px; }
  .pea-items {
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px;
  }
  .pea-items::-webkit-scrollbar { width: 6px; }
  .pea-items::-webkit-scrollbar-thumb { background: rgba(245, 233, 211, 0.25); border-radius: 3px; }
  .pea-item {
    background: rgba(40, 20, 48, 0.55);
    border: 1px solid rgba(220, 150, 200, 0.3);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: stretch;
    position: relative;
  }
  .pea-item.bought { border-color: rgba(180, 220, 140, 0.6); }
  .pea-item-thumb {
    flex: 0 0 110px; width: 110px;
    background: linear-gradient(180deg, rgba(50,30,60,0.5), rgba(20,10,30,0.5));
    border: 1px solid rgba(220, 150, 200, 0.18);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
  }
  .pea-item-thumb img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  }
  .pea-item-body {
    flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  }
  .pea-item-name {
    font-size: 16px; font-weight: 700;
    color: #f5c8de; letter-spacing: 0.05em;
  }
  .pea-item-price {
    font-size: 18px; font-weight: 700; color: #ffcc70;
    font-feature-settings: "tnum"; letter-spacing: 0.04em;
  }
  .pea-item-price-unit { font-size: 12px; color: rgba(245, 233, 211, 0.55); margin-left: 4px; }
  .pea-item-desc {
    font-size: 12px; line-height: 1.5;
    color: rgba(245, 233, 211, 0.75); min-height: 42px;
  }
  .pea-item-status {
    font-size: 12px; padding: 4px 10px; border-radius: 10px;
    background: rgba(245, 233, 211, 0.08); color: rgba(245, 233, 211, 0.75);
    display: inline-block; align-self: flex-start; margin-top: 4px;
  }
  .pea-item-status.bought {
    background: rgba(180, 220, 140, 0.18); color: #b8e090;
  }
  .pea-item-status.noCoin {
    background: rgba(255, 100, 100, 0.18); color: #ff8080;
  }
  .pea-item-action { margin-top: 8px; display: flex; gap: 8px; }
  .pea-item-btn {
    flex: 1;
    background: rgba(220, 150, 200, 0.18);
    border: 1px solid rgba(220, 150, 200, 0.5);
    color: var(--ink-warm);
    padding: 8px 12px; border-radius: 6px;
    font-size: 13px; cursor: pointer;
  }
  .pea-item-btn:hover { background: rgba(220, 150, 200, 0.32); }
  .pea-item-btn.primary {
    background: linear-gradient(135deg, rgba(220, 150, 200, 0.5), rgba(180, 120, 180, 0.4));
    border-color: rgba(240, 180, 220, 0.7);
  }
  .pea-item-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  /* 購入確認モーダル */
  .pea-bid {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none; align-items: center; justify-content: center;
    padding: 24px; z-index: 5;
  }
  .pea-bid.open { display: flex; }
  .pea-bid-card {
    background: linear-gradient(180deg, #2a1838 0%, #1a0a28 100%);
    border: 1px solid rgba(220, 150, 200, 0.5);
    border-radius: 10px;
    max-width: 420px; width: 100%; padding: 22px;
    color: var(--ink-warm);
  }
  .pea-bid-title {
    font-size: 16px; color: #f5c8de; margin-bottom: 14px; text-align: center;
  }
  .pea-bid-actions { display: flex; gap: 10px; justify-content: center; }
  .pea-bid-btn {
    background: rgba(245, 233, 211, 0.1);
    border: 1px solid rgba(245, 233, 211, 0.25);
    color: var(--ink-warm);
    padding: 9px 22px; border-radius: 6px;
    font-size: 14px; cursor: pointer;
  }
  .pea-bid-btn.primary {
    background: linear-gradient(135deg, rgba(220, 150, 200, 0.5), rgba(180, 120, 180, 0.4));
    border-color: rgba(240, 180, 220, 0.7);
  }
  .pea-bid-btn:hover { filter: brightness(1.15); }
  /* 素顔解禁演出 */
  .pea-unmask-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 8, 18, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 90;
    display: none; align-items: center; justify-content: center; padding: 24px;
  }
  .pea-unmask-overlay.open { display: flex; }
  .pea-unmask-card {
    background: linear-gradient(180deg, #2a1838 0%, #1a0a28 100%);
    border: 1px solid rgba(220, 150, 200, 0.55);
    border-radius: 12px;
    max-width: 480px; width: 100%; padding: 26px; text-align: center;
    color: var(--ink-warm);
  }
  .pea-unmask-icon { font-size: 56px; margin-bottom: 8px; color: #f5c8de; }
  .pea-unmask-title {
    font-size: 22px; color: #f5c8de; margin-bottom: 14px;
    letter-spacing: 0.12em;
  }
  .pea-unmask-msg {
    font-size: 14px; line-height: 1.65; color: rgba(245, 233, 211, 0.85);
    margin-bottom: 18px; text-align: left;
    background: rgba(220, 150, 200, 0.10);
    border-left: 3px solid rgba(220, 150, 200, 0.6);
    padding: 12px 14px; border-radius: 4px;
  }
  .pea-unmask-btn {
    background: linear-gradient(135deg, rgba(220, 150, 200, 0.5), rgba(180, 120, 180, 0.4));
    border: 1px solid rgba(240, 180, 220, 0.7);
    color: var(--ink-warm);
    padding: 11px 28px; border-radius: 6px;
    font-size: 14px; cursor: pointer;
  }
  @media (max-width: 900px) {
    .pea-portrait { left: 3vw; max-width: 38vw; }
    .pea-name-card {
      left: max(10vw, 90px);
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      font-size: 13px; padding: 6px 18px;
    }
    .pea-content {
      /* ★2026-06-20：右端を記憶メーター右端に合わせて×をノッチから出す（右端アンカー） */
      left: auto; right: calc(var(--safe-right) + 4px); transform: translateY(-50%); width: min(64vw, 580px);
      padding: 10px 14px 14px; max-height: 94vh;
    }
    .pea-greeting-text { font-size: 12px; padding: 7px 10px; }
    .pea-item { padding: 12px; }
    .pea-item-thumb { flex-basis: 80px; width: 80px; }
    .pea-item-name { font-size: 14px; }
    .pea-item-price { font-size: 15px; }
  }

  /* ===== オークションMM（マモル）UI v2：ふじしろ風レイアウト ===== */
  /* ============================================================ */
  /* 半透明背景 + 立ち絵左(VN) + 名前カード + 中央右パネル */
  .mm-shop {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(8,4,14,0.5) 0%, rgba(8,4,14,0.7) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    display: none;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .mm-shop.open { display: block; }
  /* 立ち絵：VNフレーミング（マモル175cm相当 scale 1.0） */
  .mm-portrait {
    --scale: 1.0;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
    border-radius: 0;
    border: 0;
    background: transparent;
    width: auto;
  }
  .mm-name-card {
    position: absolute;
    left: max(12vw, 110px);
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    background: linear-gradient(180deg, rgba(20, 20, 40, 0.92), rgba(14, 14, 28, 0.92));
    border: 1px solid rgba(180, 180, 220, 0.55);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(160, 160, 220, 0.18);
    color: var(--ink-warm);
    padding: 8px 26px;
    border-radius: 22px;
    font-size: 15px;
    letter-spacing: 0.12em;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
  }
  /* 旧 greeting ラッパー無効化（互換のため要素は残すが透過） */
  .mm-greeting {
    position: static;
    display: contents;
    padding: 0;
    background: none;
    border: 0;
  }
  .mm-body { display: none; }
  .mm-name { display: none; }
  /* 右側パネル */
  .mm-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%);
    width: min(58vw, 760px);
    max-height: calc(var(--ui-max-height) - 10px);
    background: linear-gradient(180deg, rgba(22, 22, 36, 0.94), rgba(14, 14, 24, 0.94));
    border: 1px solid rgba(180, 180, 220, 0.28);
    border-radius: 14px;
    padding: 12px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    overflow-y: auto;
  }
  .mm-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  .mm-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.22);
    color: var(--ink-warm);
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    align-self: auto;
    padding: 0;
  }
  .mm-close:hover { background: rgba(245, 233, 211, 0.18); }
  .mm-greeting-text {
    font-size: 13px; line-height: 1.7; color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.28);
    border-left: 2px solid rgba(180, 180, 220, 0.55);
    padding: 9px 12px; border-radius: 4px;
    flex-shrink: 0;
  }
  .mm-greeting-text .bubble { display: block; margin-bottom: 3px; }
  /* 商品リスト（パネル内に縦並び） */
  .mm-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 4px;
  }
  .mm-items::-webkit-scrollbar { width: 6px; }
  .mm-items::-webkit-scrollbar-thumb { background: rgba(245, 233, 211, 0.25); border-radius: 3px; }
  .mm-item {
    background: rgba(20, 20, 40, 0.55);
    border: 1px solid rgba(180, 180, 220, 0.3);
    border-radius: 10px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
  }
  .mm-item.won { border-color: rgba(180, 220, 140, 0.6); }
  .mm-item.lost { opacity: 0.55; border-style: dashed; }
  .mm-item.pending { border-color: rgba(255, 200, 100, 0.45); }
  .mm-item-name {
    font-size: 16px;
    font-weight: 700;
    color: #c8d0e8;
    letter-spacing: 0.05em;
  }
  .mm-item-turn {
    font-size: 11px;
    color: rgba(245, 233, 211, 0.55);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-feature-settings: "tnum";
  }
  .mm-item-desc {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(245, 233, 211, 0.75);
    min-height: 42px;
  }
  .mm-item-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(245, 233, 211, 0.08);
    color: rgba(245, 233, 211, 0.75);
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;
  }
  .mm-item-status.bid {
    background: rgba(255, 200, 100, 0.18);
    color: #ffcc70;
  }
  .mm-item-status.won {
    background: rgba(180, 220, 140, 0.18);
    color: #b8e090;
  }
  .mm-item-status.lost {
    background: rgba(255, 100, 100, 0.18);
    color: #ff8080;
  }
  .mm-item-action {
    margin-top: 8px;
    display: flex; gap: 8px;
  }
  .mm-item-btn {
    flex: 1;
    background: rgba(180, 180, 220, 0.18);
    border: 1px solid rgba(180, 180, 220, 0.45);
    color: var(--ink-warm);
    padding: 8px 12px; border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
  }
  .mm-item-btn:hover { background: rgba(180, 180, 220, 0.32); }
  .mm-item-btn.primary {
    background: linear-gradient(135deg, rgba(180, 180, 220, 0.5), rgba(140, 140, 180, 0.4));
    border-color: rgba(200, 200, 240, 0.7);
  }
  .mm-item-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  /* ===== 商品画像 + 価格表示（購入権取得方式 v3, 2026-06-10）===== */
  .mm-item {
    flex-direction: row;
    gap: 14px;
    align-items: stretch;
  }
  .mm-item-thumb {
    flex: 0 0 110px;
    width: 110px;
    background: linear-gradient(180deg, rgba(30,30,50,0.5), rgba(15,15,28,0.5));
    border: 1px solid rgba(180, 180, 220, 0.18);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .mm-item-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  }
  .mm-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .mm-item-price {
    font-size: 18px;
    font-weight: 700;
    color: #ffcc70;
    font-feature-settings: "tnum";
    letter-spacing: 0.04em;
  }
  .mm-item-price-unit { font-size: 12px; color: rgba(245, 233, 211, 0.55); margin-left: 4px; }
  .mm-item-status.reserved {
    background: rgba(255, 200, 100, 0.22);
    color: #ffcc70;
  }
  @media (max-width: 900px) {
    .mm-item-thumb { flex-basis: 80px; width: 80px; }
    .mm-item-price { font-size: 15px; }
  }
  /* 入札モーダル */
  .mm-bid {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 5;
  }
  .mm-bid.open { display: flex; }
  .mm-bid-card {
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0a18 100%);
    border: 1px solid rgba(180, 180, 220, 0.5);
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    padding: 22px;
    color: var(--ink-warm);
  }
  .mm-bid-title {
    font-size: 16px;
    color: #c8d0e8;
    margin-bottom: 14px;
    text-align: center;
  }
  .mm-bid-input-row {
    display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
  }
  .mm-bid-input {
    flex: 1;
    background: rgba(10, 10, 20, 0.6);
    border: 1px solid rgba(180, 180, 220, 0.4);
    color: var(--ink-warm);
    padding: 10px 12px; border-radius: 6px;
    font-size: 16px;
    font-feature-settings: "tnum";
  }
  .mm-bid-actions {
    display: flex; gap: 10px; justify-content: center;
  }
  .mm-bid-btn {
    background: rgba(245, 233, 211, 0.1);
    border: 1px solid rgba(245, 233, 211, 0.25);
    color: var(--ink-warm);
    padding: 9px 22px; border-radius: 6px;
    font-size: 14px; cursor: pointer;
  }
  .mm-bid-btn.primary {
    background: linear-gradient(135deg, rgba(180, 180, 220, 0.5), rgba(140, 140, 180, 0.4));
    border-color: rgba(200, 200, 240, 0.7);
  }
  .mm-bid-btn:hover { filter: brightness(1.15); }
  /* 結果通知モーダル */
  .mm-result-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 4, 14, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .mm-result-overlay.open { display: flex; }
  .mm-result-card {
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0a18 100%);
    border: 1px solid rgba(180, 180, 220, 0.55);
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    padding: 26px;
    text-align: center;
    color: var(--ink-warm);
  }
  .mm-result-icon {
    font-size: 48px;
    margin-bottom: 8px;
  }
  .mm-result-title {
    font-size: 22px;
    color: #c8d0e8;
    margin-bottom: 6px;
    letter-spacing: 0.1em;
  }
  .mm-result-item {
    font-size: 16px;
    color: #ffcc70;
    margin-bottom: 14px;
  }
  .mm-result-msg {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(245, 233, 211, 0.85);
    margin-bottom: 18px;
    text-align: left;
    background: rgba(180, 180, 220, 0.08);
    border-left: 3px solid rgba(180, 180, 220, 0.5);
    padding: 12px 14px;
    border-radius: 4px;
  }
  .mm-result-btn {
    background: linear-gradient(135deg, rgba(180, 180, 220, 0.5), rgba(140, 140, 180, 0.4));
    border: 1px solid rgba(200, 200, 240, 0.7);
    color: var(--ink-warm);
    padding: 11px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  /* 結果モーダル内の商品画像（2026-06-10） */
  .mm-result-thumb {
    max-width: 180px;
    max-height: 220px;
    object-fit: contain;
    margin: 0 auto 14px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
  }
  /* スマホ調整（横画面前提） */
  @media (max-width: 900px) {
    .mm-portrait { left: 3vw; max-width: 38vw; }
    .mm-name-card {
      left: max(10vw, 90px);
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      font-size: 13px;
      padding: 6px 18px;
    }
    .mm-content {
      /* ★2026-06-20：右端を記憶メーター右端に合わせて×をノッチから出す（右端アンカー） */
      left: auto;
      right: calc(var(--safe-right) + 4px);
      transform: translateY(-50%);
      width: min(64vw, 580px);
      padding: 10px 14px 14px;
      max-height: 94vh;
    }
    .mm-greeting-text { font-size: 12px; padding: 7px 10px; }
    .mm-item { padding: 12px; }
    .mm-item-name { font-size: 14px; }
  }
  @media (max-width: 720px) {
    .mm-result-title { font-size: 18px; }
  }

  /* ============================================================ */
  /* ===== BAR「秘密基地」ヤナギUI v2：ふじしろ風レイアウト ===== */
  /* ============================================================ */
  /* 半透明背景 + 立ち絵左(VN) + 名前カード + 中央右パネル */
  .yanagi-shop {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, rgba(8,4,14,0.55) 0%, rgba(8,4,14,0.75) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    display: none;
    color: var(--ink-warm);
    overflow: hidden;
  }
  .yanagi-shop.open { display: block; }
  /* 立ち絵：VNフレーミング（180cm相当 scale 1.029） */
  .yanagi-portrait {
    --scale: 1.029;
    position: absolute;
    left: 6vw;
    bottom: -20vh;
    height: 110vh;
    max-height: 110vh;
    max-width: 42vw;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 1;
    border-radius: 0;
    border: 0;
    background: transparent;
    width: auto;
  }
  .yanagi-name-card {
    position: absolute;
    left: max(12vw, 110px);
    bottom: max(env(safe-area-inset-bottom, 0px), 18px);
    background: linear-gradient(180deg, rgba(60, 30, 15, 0.92), rgba(40, 18, 8, 0.92));
    border: 1px solid rgba(200, 144, 96, 0.55);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(200, 140, 80, 0.18);
    color: var(--ink-warm);
    padding: 8px 26px;
    border-radius: 22px;
    font-size: 15px;
    letter-spacing: 0.12em;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
  }
  /* 旧 greeting 無効化（互換のため要素は残す） */
  .yanagi-greeting {
    position: static;
    display: contents;
    padding: 0;
    background: none;
    border: 0;
  }
  .yanagi-body { display: none; }
  .yanagi-name { display: none; }
  /* 右側パネル */
  .yanagi-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-25%, -50%);
    width: min(58vw, 760px);
    max-height: calc(var(--ui-max-height) - 10px);
    background: linear-gradient(180deg, rgba(36, 18, 10, 0.94), rgba(24, 10, 6, 0.94));
    border: 1px solid rgba(200, 144, 96, 0.28);
    border-radius: 14px;
    padding: 12px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.45);
    z-index: 3;
    overflow-y: auto;
  }
  .yanagi-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  .yanagi-close {
    background: rgba(245, 233, 211, 0.08);
    border: 1px solid rgba(245, 233, 211, 0.22);
    color: var(--ink-warm);
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    align-self: auto;
    padding: 0;
  }
  .yanagi-close:hover { background: rgba(245, 233, 211, 0.18); }
  .yanagi-greeting-text {
    font-size: 13px; line-height: 1.65; color: rgba(245, 233, 211, 0.92);
    background: rgba(0, 0, 0, 0.28);
    border-left: 2px solid rgba(200, 144, 96, 0.55);
    padding: 9px 12px; border-radius: 4px;
    flex-shrink: 0;
  }
  .yanagi-greeting-text .bubble { display: block; margin-bottom: 3px; }
  /* 話題ボタン縦リスト */
  .yanagi-menu {
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 4px;
  }
  .yanagi-menu-btn {
    background: rgba(245, 233, 211, 0.06);
    border: 1px solid rgba(245, 233, 211, 0.18);
    color: var(--ink-warm); padding: 10px 14px; border-radius: 6px;
    font-size: 13px; cursor: pointer; text-align: left;
    transition: all 0.2s; line-height: 1.45;
  }
  .yanagi-menu-btn:hover {
    background: linear-gradient(135deg, rgba(200, 144, 96, 0.18), rgba(140, 90, 50, 0.18));
    border-color: rgba(200, 144, 96, 0.4);
  }
  .yanagi-menu-btn .label { font-size: 14px; font-weight: 600; color: #c89060; }
  .yanagi-menu-btn .sub { font-size: 11px; color: rgba(245, 233, 211, 0.6); margin-top: 3px; }

  /* ============================================================ */
  /* ===== 鍵ロック通知 ===== */
  /* ============================================================ */
  .lock-notice {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .lock-notice.open { display: flex; }
  .lock-notice-card {
    background: linear-gradient(180deg, #1a0a04 0%, #0a0402 100%);
    border: 2px solid rgba(120, 80, 60, 0.5);
    border-radius: 12px;
    max-width: 380px;
    width: 100%;
    padding: 30px 26px;
    text-align: center;
    color: var(--ink-warm);
    box-shadow: 0 0 30px rgba(80, 40, 20, 0.4);
  }
  .lock-notice-icon {
    font-size: 56px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 12px rgba(180, 100, 60, 0.5));
  }
  .lock-notice-text {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(245, 233, 211, 0.85);
    margin-bottom: 20px;
  }
  .lock-notice-btn {
    background: rgba(245, 233, 211, 0.1);
    border: 1px solid rgba(245, 233, 211, 0.3);
    color: var(--ink-warm);
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  /* スマホ調整（横画面前提） */
  @media (max-width: 900px) {
    .yanagi-portrait { left: 3vw; max-width: 38vw; }
    .yanagi-name-card {
      left: max(10vw, 90px);
      bottom: max(env(safe-area-inset-bottom, 0px), 12px);
      font-size: 13px;
      padding: 6px 18px;
    }
    .yanagi-content {
      /* ★2026-06-20：右端を記憶メーター右端に合わせて×をノッチから出す（右端アンカー） */
      left: auto;
      right: calc(var(--safe-right) + 4px);
      transform: translateY(-50%);
      width: min(64vw, 580px);
      padding: 10px 14px 14px;
      max-height: 94vh;
    }
    .yanagi-greeting-text { font-size: 12px; padding: 7px 10px; }
    .yanagi-menu-btn { padding: 8px 12px; font-size: 12px; }
  }
  @media (max-width: 720px) {
    .lock-notice-icon { font-size: 44px; }
    .lock-notice-text { font-size: 14px; }
  }

  /* ===== 共通：画面中央の確認モーダル（gameConfirm） ===== */
  .game-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 4, 16, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: gameConfirmFade 0.18s ease-out;
  }
  .game-confirm-overlay[hidden] { display: none !important; }
  .game-confirm-modal {
    background: linear-gradient(180deg, rgba(28, 14, 56, 0.96) 0%, rgba(14, 7, 30, 0.96) 100%);
    border: 1px solid rgba(255, 180, 80, 0.4);
    border-radius: 16px;
    padding: 28px 32px 22px;
    max-width: 90vw;
    width: 420px;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.6),
      0 0 24px rgba(255, 180, 80, 0.15),
      inset 0 0 0 1px rgba(255,255,255,0.04);
    font-family: 'M PLUS Rounded 1c', system-ui, sans-serif;
    animation: gameConfirmPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }
  .game-confirm-message {
    color: #f3eaff;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
    margin-bottom: 22px;
    white-space: pre-line;
  }
  .game-confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .game-confirm-btn {
    flex: 1;
    max-width: 160px;
    padding: 11px 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s, border-color 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .game-confirm-btn.cancel {
    background: rgba(40, 22, 70, 0.85);
    border: 1px solid rgba(245, 233, 211, 0.25);
    color: rgba(245, 233, 211, 0.85);
  }
  .game-confirm-btn.cancel:hover {
    border-color: rgba(245, 233, 211, 0.5);
    filter: brightness(1.15);
  }
  .game-confirm-btn.ok {
    background: linear-gradient(135deg, rgba(255, 180, 80, 0.85) 0%, rgba(255, 110, 60, 0.85) 100%);
    border: 1px solid rgba(255, 200, 120, 0.7);
    color: #1a0a30;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 14px rgba(255, 180, 80, 0.35);
  }
  .game-confirm-btn.ok:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(255, 180, 80, 0.55);
  }
  .game-confirm-btn:active { transform: translateY(0); }
  @keyframes gameConfirmFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes gameConfirmPop {
    from { opacity: 0; transform: scale(0.88) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  @media (max-width: 600px) {
    .game-confirm-modal { padding: 22px 22px 18px; width: 92vw; }
    .game-confirm-message { font-size: 14px; margin-bottom: 18px; }
    .game-confirm-btn { font-size: 13px; padding: 10px 14px; }
  }

  /* ★2026-06-11：グローバル 入力モーダル（スマホ専用）
     全 freetext 入力欄をタップした時に表示される。
     ゲーム画面を完全に覆い、上にinput/textarea＋送信/閉じる、下に
     iOS ネイティブキーボードが入るレイアウト。 */
  .input-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 4, 14, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    /* セーフエリア分を確保し、内容が物理的な画面端／ノッチに触れないようにする */
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    gap: 10px;
    animation: inputModalIn 0.28s cubic-bezier(0.32, 0.72, 0.34, 1);
  }
  .input-modal-overlay[hidden] { display: none; }
  @keyframes inputModalIn {
    from { transform: translateY(100%); opacity: 0.4; }
    to   { transform: translateY(0); opacity: 1; }
  }
  body.input-modal-open { overflow: hidden; }
  /* ★2026-06-19：閉じる/送信を中央配置に。
     端に置くと iOS 横画面のキーボード出現時にビューポートがずれて
     ボタンが画面外に切れ、押せなくなる。中央なら多少ずれても押せて、
     押せばモーダルが閉じてビューが正常化する。 */
  .input-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    text-align: center;
  }
  .input-modal-title {
    color: var(--neon-magenta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    /* タイトルが長くても改行せず省略 */
    flex: none;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
  }
  .input-modal-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    justify-content: center;
  }
  .input-modal-btn {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    padding: 9px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .input-modal-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(245, 233, 211, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .input-modal-cancel:hover { background: rgba(255, 255, 255, 0.14); }
  .input-modal-submit {
    background: linear-gradient(135deg, rgba(157, 78, 255, 0.7), rgba(255, 90, 200, 0.7));
    color: #fff;
    border: 1px solid rgba(255, 90, 200, 0.6);
    box-shadow: 0 2px 10px rgba(255, 90, 200, 0.3);
  }
  .input-modal-submit:hover {
    background: linear-gradient(135deg, rgba(157, 78, 255, 0.9), rgba(255, 90, 200, 0.9));
  }
  .input-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
  }
  .input-modal-input,
  .input-modal-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 90, 200, 0.5);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--ink-warm, #f5e9d3);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    outline: none;
    resize: none;
    box-sizing: border-box;
  }
  .input-modal-input { flex: 0 0 auto; }
  .input-modal-textarea { flex: 1; min-height: 60px; }
  .input-modal-input:focus,
  .input-modal-textarea:focus {
    border-color: var(--neon-magenta);
    box-shadow: 0 0 12px rgba(255, 90, 200, 0.35);
  }
  .input-modal-counter {
    text-align: right;
    color: rgba(245, 233, 211, 0.55);
    font-size: 11px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  /* スマホでない時：トリガー設置されてもネイティブ動作を維持。
     CSS から readonly スタイルが効くのを防ぐ。 */
  @media (min-width: 701px) and (min-height: 501px) {
    /* PCでは readonly が付かない（JS側で max-width で判定）ので何もしない */
  }
  /* スマホ時のトリガーinput見た目（タップしても無効感を出さない） */
  @media (max-width: 700px), (max-height: 500px) {
    [data-modal-trigger-installed] {
      cursor: pointer !important;
    }
    /* readonly でも色味が薄くならないように */
    input[readonly][data-modal-trigger-installed],
    textarea[readonly][data-modal-trigger-installed] {
      opacity: 1 !important;
      color: var(--ink-warm, #f5e9d3) !important;
    }
  }

/* ===== ★Phase2（2026-06-30）無料版：映画館 会話トピック選択肢 ===== */
.cinema-talk-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cinema-talk-choice {
  text-align: left;
  background: rgba(245,233,211,0.08);
  border: 1px solid rgba(255,220,100,0.4);
  border-left: 3px solid rgba(255,220,100,0.7);
  color: var(--ink-warm, #f5e9d3);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cinema-talk-choice:hover { background: rgba(245,233,211,0.16); }

/* ===== ★Phase2 無料版：店内VN会話プレイヤー（1人立ち絵中央・タップ送り） ===== */
.shop-talk-vn {
  position: fixed; inset: 0;
  z-index: 120;
  display: none;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.shop-talk-vn.open { display: block; }
.shop-talk-vn-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0a0610;
}
.shop-talk-vn-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,4,14,0.32) 0%, rgba(8,4,14,0.78) 78%, rgba(8,4,14,0.92) 100%);
}
.shop-talk-vn-portrait {
  /* ★2026-07-04：本編会話(intro-portrait)と同じ身長正規化＋右寄せ配置に統一 */
  --scale: 1.0;
  position: absolute;
  bottom: -20lvh; left: 50%; right: auto;
  height: 110lvh; max-height: 110lvh; max-width: 60vw;
  object-fit: contain; object-position: bottom center;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: bottom center;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
  z-index: 1;
  animation: shop-talk-portrait-in 0.5s ease both;
}
@keyframes shop-talk-portrait-in { from { opacity: 0; } to { opacity: 1; } }
/* 各キャラの身長（intro-portrait と同値・175cm=1.0 基準） */
.shop-talk-vn-portrait[data-portrait-id="yanagi"]  { --scale: 1.029; }
.shop-talk-vn-portrait[data-portrait-id="tenraku"] { --scale: 1.000; }
.shop-talk-vn-portrait[data-portrait-id="soi"]     { --scale: 0.971; }
.shop-talk-vn-portrait[data-portrait-id="fukuri"]  { --scale: 0.931; }
.shop-talk-vn-portrait[data-portrait-id="aim"]     { --scale: 0.886; }
.shop-talk-vn-portrait[data-portrait-id="yoka"]    { --scale: 0.886; }  /* 155cm */
.shop-talk-vn-portrait[data-portrait-id="juri"]    { --scale: 0.857; }  /* 150cm */
.shop-talk-vn-portrait[data-portrait-id="hima"]    { --scale: 0.731; }  /* 128cm */
.shop-talk-vn-portrait[data-portrait-id="boy"]     { --scale: 0.731; }  /* 128cm */
.shop-talk-vn-namecard {
  /* ★intro-speaker と同じ見た目。テロップ枠の中に置く（HTML側で textbar 内へ移動） */
  position: static; transform: none;
  background: none; border: none; border-radius: 0; white-space: normal;
  padding: 0 0 6px; margin-bottom: 8px;
  font-family: var(--sans, sans-serif);
  font-size: 11px; letter-spacing: 0.25em;
  color: var(--neon-cyan, #4ee2ff);
  border-bottom: 1px solid rgba(78,226,255,0.25);
  text-shadow: 0 0 6px rgba(78,226,255,0.5);
}
.shop-talk-vn-textbar {
  /* ★intro-textbox と同じ枠デザインに統一（cyan枠・下部中央） */
  position: absolute;
  left: 50%; right: auto; bottom: var(--safe-bottom, 24px);
  transform: translateX(-50%);
  width: var(--textbox-max-width, min(880px, 92vw));
  z-index: 2;
  padding: 12px 24px 12px;
  background: linear-gradient(180deg, rgba(10,6,18,0.78), rgba(8,4,14,0.92));
  border: 1px solid rgba(78,226,255,0.45);
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(78,226,255,0.18), 0 -8px 38px rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
}
body:not(.phone-closed) .shop-talk-vn-textbar {
  left: calc(var(--safe-left, 0px) + 60px);
  right: var(--phone-reserved, 0px);
  transform: none; width: auto; max-width: 720px;
}
.shop-talk-vn-text {
  max-width: none; margin: 0;
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  color: var(--text, #f5e9d3);
  font-size: 17px; line-height: 1.95; letter-spacing: 0.04em;
  white-space: pre-wrap; min-height: 36px;
}
.shop-talk-vn-hint {
  max-width: none; margin: 8px 0 0;
  text-align: right;
  font-size: 12px;
  color: rgba(245,233,211,0.6);
  animation: shop-talk-hint-blink 1.6s ease-in-out infinite;
}
@keyframes shop-talk-hint-blink { 0%,100%{opacity:0.4;} 50%{opacity:0.9;} }
.shop-talk-vn-close {
  position: absolute; top: 14px; right: 14px;
  z-index: 4;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(28,14,40,0.7);
  border: 1px solid rgba(245,233,211,0.3);
  color: var(--ink-warm, #f5e9d3);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
@media (max-width: 860px) {
  .shop-talk-vn-text { font-size: 15px; line-height: 1.85; }
  .shop-talk-vn-textbar { padding: 12px 20px; }
}

/* ============================================================
   ★2026-07-09：ストーリー版 開始地点セレクト＋簡易セットアップ
   ============================================================ */
.story-overlay {
  /* ★確認モーダル(game-confirm-overlay: z-index 9000)より下に置く。
     地点選択の確認ダイアログがこのオーバーレイの前面に出るようにするため。 */
  position: fixed; inset: 0; z-index: 8900;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(20,26,40,0.96), rgba(6,8,14,0.98));
  padding: 24px; overflow-y: auto;
}
.story-overlay[hidden] { display: none; }
.story-panel {
  width: min(92vw, 460px);
  background: linear-gradient(180deg, rgba(18,22,34,0.96), rgba(10,12,20,0.98));
  border: 1px solid rgba(110, 231, 168, 0.4);
  border-radius: 16px; padding: 22px 20px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 26px rgba(110,231,168,0.15);
  color: #f2efe6;
}
.story-panel[hidden] { display: none; }
.story-title { font-size: 20px; font-weight: 700; text-align: center; letter-spacing: 0.06em; }
.story-subtitle { font-size: 11px; letter-spacing: 0.3em; text-align: center; color: rgba(110,231,168,0.8); margin-top: 2px; }
.story-desc { font-size: 12.5px; line-height: 1.7; color: rgba(242,239,230,0.75); margin: 12px 2px 16px; }
.story-btns { display: flex; flex-direction: column; gap: 10px; }
.story-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 16px; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16);
  color: #f2efe6; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.story-btn:hover:not(:disabled) { transform: translateY(-1px); background: rgba(110,231,168,0.14); border-color: rgba(110,231,168,0.6); }
.story-btn-main { font-size: 15px; font-weight: 600; }
.story-btn-sub { font-size: 11.5px; color: rgba(242,239,230,0.6); }
.story-btn-continue { background: rgba(110,231,168,0.18); border-color: rgba(110,231,168,0.6); }
.story-btn-soon, .story-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* setup */
.story-setup-chars { display: flex; gap: 12px; justify-content: center; margin: 14px 0 6px; }
.story-char-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; border-radius: 12px; cursor: pointer; width: 46%;
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.14); color: #f2efe6;
}
.story-char-btn img { width: 100%; height: 120px; object-fit: contain; object-position: bottom center; }
.story-char-btn span { font-size: 12.5px; }
.story-char-btn.is-selected { border-color: #6ee7a8; box-shadow: 0 0 14px rgba(110,231,168,0.5); background: rgba(110,231,168,0.12); }
.story-field-label { display: block; font-size: 12px; color: rgba(242,239,230,0.8); margin: 12px 2px 5px; letter-spacing: 0.08em; }
.story-input {
  width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.3); color: #f2efe6;
}
.story-input:focus { outline: none; border-color: #6ee7a8; }
.story-boy-field[hidden] { display: none; }
.story-setup-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.story-back {
  padding: 10px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,0.28); color: rgba(242,239,230,0.85); font-size: 13px;
}
.story-start {
  flex: 1; padding: 12px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 14px;
  background: #6ee7a8; color: #06281a; border: none; box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 16px rgba(110,231,168,0.4);
}
.story-start:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ★2026-07-09：ストーリー版「やり直す」ボタン（中断するの下） */
.profile-restart-btn { margin-top: 8px; }
.profile-restart-btn[hidden] { display: none; }

/* ★2026-07-09：エイム朝会話が流れるターンのみ、ターン表示〜エイムの話し始めの間だけ
   下部ボタン（エイムの名前タブ／スマホ）を触れないようにロックする（誤タップ防止）。 */
body.aim-morning-lock #roomNpcs,
body.aim-morning-lock .phone-toggle {
  pointer-events: none !important;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}