/* ════════════════════════════════════════════════════════
       画面遷移システム
    ════════════════════════════════════════════════════════ */

    /* 全画面ラッパー */
    .screen {
      display:none;
      position:fixed;inset:0;
      flex-direction:column;
      align-items:center;
      overflow-y:auto;
      z-index:100;
    }
    .screen.active { display:flex; }

    /* アニメーション */
    @keyframes screenIn  { from { opacity:0; transform:scale(.96) translateY(10px); } to { opacity:1; transform:none; } }
    @keyframes screenOut { from { opacity:1; } to { opacity:0; } }
    .screen.entering { animation: screenIn  .32s cubic-bezier(.34,1.56,.64,1) forwards; }
    .screen.leaving  { animation: screenOut .2s ease forwards; }
    /* leaving終了後に opacity が残らないよう active時に明示的にリセット */
    .screen.active   { opacity: 1; }

    /* ─── タイトル画面 ───
       #screen-title 内部の見た目（背景・タイトル文言・キャラクター・
       タップヒント）は styles/title-screen.css へ分離した。
       ここには画面遷移共通の .screen / .active / entering・leaving のみ残す。 */

    /* ════════════════════════════════════════
       ゲーム選択画面 — Netflix Kids / YouTube Kids 風
    ════════════════════════════════════════ */
    /* タイトル画面・プレイ画面と同じ暖色系で世界観をつなぐ
       （旧: ダークネイビーの Netflix 風 → 子ども向けの明るいトーンへ） */
    #screen-gameselect {
      background: linear-gradient(160deg, #fff8e7 0%, #ffe9c4 55%, #ffddb0 100%);
      overflow: hidden;
    }

    /* ─── ヘッダー ─── */
    .gs-header {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      flex-shrink: 0;
    }
    .gs-title {
      font-size: clamp(1rem, 4vw, 1.25rem);
      font-weight: 900;
      color: #8a6a4a;
      letter-spacing: .04em;
    }
    .gs-title span { color: var(--orange); }
    /* 戻るボタン: プレイ画面の共通 .btn-back（styles/games.css）と同じ
       「白地＋オレンジ縁＋min-height:44px」ルールに統一する */
    .btn-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-height: 44px;
      padding: 8px 20px;
      border-radius: 24px;
      border: 2px solid var(--orange);
      background: #fff;
      font-family: inherit;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      color: var(--orange);
      box-shadow: 0 2px 6px rgba(224,123,57,.2);
      transition: background .15s, color .15s, transform .12s;
    }
    .btn-back:hover { background: var(--orange); color: #fff; }
    .btn-back:active { transform: scale(.95); }

    /* ─── レーン構造（将来の複数カテゴリに対応） ─── */
    .gs-lanes {
      width: 100%;
      max-width: 100%;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-bottom: 200px;
    }
    .gs-lane {
      width: 100%;
      max-width: 100%;
      padding: 8px 0 4px;
    }
    .gs-lane-label {
      font-size: .78rem;
      font-weight: bold;
      color: rgba(138,106,74,.65);
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 0 20px;
      margin-bottom: 10px;
    }

    /* ─── カルーセルトラック ─── */
    .carousel-wrap {
      position: relative;
      width: 100%;
      max-width: 100%;
      /* 横方向のクリップは .gs-lanes の overflow-x:hidden に委ねる。
         active カードは内部に説明文を含み高さが可変になるため、
         ここで overflow:hidden にすると縦方向に見切れてしまう。 */
      touch-action: pan-y;    /* 縦スクロール許可・横はJS制御 */
    }
    /* カード描画領域（Issue #102: 左右矢印ガターでは制限せず、カルーセルの
       利用可能横幅いっぱいを使う）。横方向だけクリップし（overflow-x: hidden）、
       縦方向は auto にすることで、選択中カードの説明文で高さが変わっても
       見切れない（overflow-x/overflow-y の一方だけ hidden にすると、もう一方は
       auto として計算される仕様を利用。高さを固定していないので実質クリップは
       発生しない）。幅は Carousel.inline.js の _layout() が JS 側で決める
       （左右マージンは設けない＝矢印ボタンは .carousel-btn として
       この上に透過overlayで重なる）。 */
    .carousel-viewport {
      overflow-x: hidden;
      overflow-y: auto;
    }
    .carousel-track {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 0 28px;
      /* 中央パディング: 先頭・末尾のカードも中央に来られるよう */
      will-change: transform;
      cursor: grab;
      /* Pointer Eventsを実際に登録しているのはこの要素（.carousel-wrap ではない）。
         未設定だとタッチ操作中にブラウザ側の縦スクロール判定と競合して
         pointercancel が発生しやすくなり、スワイプ方向の誤判定につながる
         （Issue #180）。横方向はJS側（drag処理）で制御し、縦スクロールは許可する。 */
      touch-action: pan-y;
    }
    .carousel-track.grabbing { cursor: grabbing; }

    /* ─── ゲームカード（カルーセル版） ─── */
    .gc-card {
      flex-shrink: 0;
      border-radius: 20px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: transform .38s cubic-bezier(.34,1.38,.64,1),
                  opacity  .38s ease,
                  box-shadow .38s ease;
      /* デフォルト: 非選択（選択中との差をはっきりさせて「いま選ばれているのはこれ」を伝える）。
         scale自体は Carousel.inline.js が画面中央からの連続距離に応じて --gc-scale へ
         毎フレーム書き込む（Issue #352）。--gc-scale未設定時（初期レイアウト前）は
         このデフォルト値にフォールバックする。 */
      transform: scale(var(--gc-scale, .78));
      opacity: .45;
      filter: saturate(.7);
      box-shadow: 0 4px 16px rgba(138,106,74,.18);
      background: #fff;
    }
    .gc-card.active {
      opacity: 1;
      filter: none;
      z-index: 2;
      box-shadow: 0 12px 36px rgba(224,123,57,.35), 0 0 0 4px var(--orange), 0 0 0 9px rgba(224,123,57,.18);
    }
    .gc-card.coming-soon { cursor: default; }

    /* 誤タップ（準備中ゲームの開始操作）に対するフィードバック */
    @keyframes gcShake {
      0%, 100% { transform: translateX(0)    scale(1.05); }
      20%      { transform: translateX(-6px) scale(1.05); }
      40%      { transform: translateX(6px)  scale(1.05); }
      60%      { transform: translateX(-4px) scale(1.05); }
      80%      { transform: translateX(4px)  scale(1.05); }
    }
    .gc-card.gc-shake { animation: gcShake .35s ease; }

    /* サムネイル */
    .gc-thumb {
      width: 100%;
      aspect-ratio: 3/4;
      background: linear-gradient(135deg, #fff3d6, #ffe2b8);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4.5rem;
      position: relative;
      overflow: hidden;
    }
    .gc-thumb img {
      width: 100%;
      height: auto;
      display: block;
    }
    .gc-thumb .gc-emoji {
      font-size: clamp(3rem, 10vw, 5rem);
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
    }
    /* Coming Soon オーバーレイ */
    .gc-coming-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.55);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 6px;
    }
    .gc-coming-overlay .soon-icon { font-size: 2rem; }
    .gc-coming-overlay .soon-text {
      font-size: .72rem; color: #fff; font-weight: bold;
      background: rgba(255,255,255,.15);
      padding: 3px 10px; border-radius: 12px;
      letter-spacing: .04em;
    }
    /* カードタイトル帯 */
    .gc-label {
      background: #fff;
      padding: 8px 10px 10px;
    }
    .gc-label-title {
      font-size: clamp(.8rem,3.4vw,.98rem);
      font-weight: bold; color: #5a4632;
      text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ─── カード内詳細（選択中＝.gc-card.active のみ表示） ───
       下部の独立した情報パネルを廃止し、選択中カードに統合した部分。 */
    .gc-detail { display: none; }
    .gc-card.active .gc-detail {
      display: block;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(90,70,50,.1);
      white-space: normal;
    }

    /* ── 子ども向けメイン導線: ▶ あそぶ！ ──
       文字が読めなくても押せるよう「大きい・オレンジ・脈打つ」の3点で目立たせる。
       クリック処理は Carousel の既存タップ判定に委ねる（Carousel.inline.js 参照）。 */
    .gc-play-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 52px;
      border-radius: 26px;
      background: linear-gradient(135deg, var(--orange), #f0a060);
      color: #fff;
      font-size: 1.1rem;
      font-weight: 900;
      letter-spacing: .04em;
      box-shadow: 0 5px 16px rgba(224,123,57,.45);
      animation: gcPlayPulse 1.5s ease-in-out infinite;
    }
    .gc-play-btn .gc-play-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(255,255,255,.28);
      font-size: .85rem;
      padding-left: 2px; /* ▶ の光学中央合わせ */
    }
    @keyframes gcPlayPulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.05); }
    }
    @media (prefers-reduced-motion: reduce) {
      .gc-play-btn { animation: none; }
    }

    /* ── 起動中（in-flight guard）のローディング表示 ──
       Carousel._activate() が in-flight の間、あそぶ！ボタンをスピナー表示に
       差し替える（Carousel.inline.js の _setLaunchingUI() 参照）。 */
    .gc-play-btn.gc-play-btn-loading { animation: none; }
    .gc-play-icon.gc-play-spinner {
      background: transparent;
      border: 3px solid rgba(255,255,255,.45);
      border-top-color: #fff;
      padding-left: 0;
      animation: gcPlaySpin .7s linear infinite;
    }
    @keyframes gcPlaySpin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .gc-play-icon.gc-play-spinner { animation: none; }
    }

    /* 起動中であることをカーソルでも示す。操作抑止は Carousel.inline.js の
       goTo()/_activate() で行う（pointer-events を切ると、pointerup直後に
       Playwrightや支援技術の操作完了判定を妨げるため）。 */
    .gs-lane-launching { cursor: wait; }

    /* ── 保護者向け補足情報（▶あそぶ！より下に小さく） ── */
    .gc-detail-grownup {
      margin-top: 8px;
      opacity: .75;
    }
    .gc-detail-desc {
      font-size: .7rem;
      color: #8a7a66;
      line-height: 1.5;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .gc-detail-meta {
      font-size: .66rem;
      color: #a08c74;
    }

    /* じゅんびちゅうゲーム用の案内（開始できないことを伝える） */
    .gc-detail-hint {
      display: inline-block;
      font-size: .78rem; font-weight: bold;
      padding: 8px 12px; border-radius: 14px;
    }
    .gc-detail-hint-soon {
      background: rgba(90,70,50,.08);
      color: #a08c74;
      width: 100%;
      text-align: center;
      box-sizing: border-box;
    }

    /* バッジ */
    .gc-badge-wrap {
      position: absolute; top: 8px; left: 8px;
      display: flex; gap: 4px; flex-wrap: wrap;
    }
    .gc-badge {
      font-size: .62rem; font-weight: bold;
      padding: 2px 7px; border-radius: 8px;
      backdrop-filter: blur(4px);
    }
    .gc-badge-new     { background: #ff4757; color: #fff; }
    .gc-badge-beta    { background: #747de8; color: #fff; }
    .gc-badge-soon    { background: rgba(90,70,50,.55); color: #fff; }
    .gc-badge-featured{ background: #ffa502; color: #fff; }

    /* ─── ナビゲーションボタン ─── */
    /* 子どもの指でも押せるよう 56px 以上を確保する。
       Issue #102: 隣接カードのpeekが矢印の背面まで描画されるようになったため、
       背景を透過して背面カードを視認できるようにする。backdrop-filterで
       軽くぼかすことで、どんなカード（写真サムネイル等）が背面に来ても
       矢印記号自体の視認性を保つ。タップ矩形（width/height）自体は変更しない。 */
    .carousel-btn {
      position: absolute; top: 50%; z-index: 5;
      transform: translateY(-50%);
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 3px solid var(--orange);
      background: rgba(255,255,255,.4);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      color: var(--orange); font-size: 1.7rem; font-weight: bold;
      text-shadow: 0 1px 3px rgba(255,255,255,.8);
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(224,123,57,.3);
      transition: background .15s, transform .15s;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
    }
    .carousel-btn:hover { background: rgba(255,243,224,.7); }
    .carousel-btn:active { transform: translateY(-50%) scale(.9); }
    .carousel-btn-prev { left: 8px; }
    .carousel-btn-next { right: 8px; }
    .carousel-btn.hidden { opacity: 0; pointer-events: none; }
    .carousel-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }

    /* 幅の狭いスマホ縦画面では矢印ボタンを少し小さくする。
       Carousel.inline.js の _layout() はこのブレークポイント（420px）と同じ値を
       境に card sizing用の想定gutter幅（arrowGutter）を切り替えるため、
       ここでサイズを変える場合は JS 側の arrowGutter も合わせて調整すること
       （Issue #102以降、この値は描画viewportの幅そのものには使われない）。 */
    @media (max-width: 420px) {
      .carousel-btn { width: 44px; height: 44px; font-size: 1.4rem; }
      .carousel-btn-prev { left: 4px; }
      .carousel-btn-next { right: 4px; }
    }

    /* ─── ドットインジケーター ─── */
    .carousel-dots {
      display: flex; gap: 6px;
      justify-content: center;
      padding: 0 0 8px;
    }
    /* 見た目は 10px の丸、透明 border でタップ判定を約 26px に広げる */
    .carousel-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(138,106,74,.28);
      border: 8px solid transparent;
      background-clip: padding-box;
      box-sizing: content-box;
      cursor: pointer;
      transition: all .3s;
    }
    .carousel-dot.active {
      background: var(--orange);
      background-clip: padding-box;
      width: 24px; border-radius: 6px;
    }

    /* ─── メタタグ（年齢／所要時間／カテゴリ） ───
       旧・下部情報パネル用に定義されていたが、現在は選択中カード内の
       .gc-detail-meta から参照される（gs-info-panel 自体は廃止済み）。 */
    .gs-meta-tag {
      font-size: .7rem;
      padding: 3px 9px; border-radius: 12px;
      background: rgba(90,70,50,.08);
      color: #8a7a66;
    }
    .gs-meta-tag.age   { background: rgba(255,165,0,.15);  color: #cf8030; }
    .gs-meta-tag.time  { background: rgba(100,200,100,.15); color: #55a04a; }
    .gs-meta-tag.cat   { background: rgba(150,150,255,.15); color: #7880d8; }

    /* ─── 補助機能アイコン（常駐・背景透過ベース） ───
       旧「せってい」テキストボタン＋常時展開の大型ボタン4つを廃止し、
       ヘッダー直下に常駐する透過アイコン列へ統一した（Issue #144）。
       ここに置くことで、画面端に固定配置のカルーセル矢印・実況キャラクター・
       吹き出し・LOG表示のいずれとも重ならず、.gs-lanes の表示領域を
       最大限確保できる。中身（画像/絵文字・aria-label・ツールチップ）は
       platform/QuickActionIcons.inline.js が設定データから注入する。 */
    .gs-quick-actions {
      position: relative;
      z-index: 15;
      flex-shrink: 0;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 8px;
      flex-wrap: wrap;
      padding: 0 16px 8px;
    }
    /* アイコンボタン共通の見た目。48px角のタップ領域は buttons.css の
       .ui-icon-button（子ども向け共通サイズ）に委ね、ここでは円形・透過・
       浮遊感（box-shadow）だけを定義する。 */
    .gs-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,.68);
      box-shadow: 0 4px 14px rgba(138,106,74,.22);
      color: #8a6a4a;
      font-size: 1.25rem;
      cursor: pointer;
      padding: 0;
      position: relative;
      transition: background .15s, transform .12s, box-shadow .15s;
    }
    .gs-icon-btn:hover { background: #fff; }
    .gs-icon-btn:active { transform: scale(.9); }
    .gs-icon-btn:focus-visible {
      outline: 3px solid var(--orange);
      outline-offset: 2px;
    }
    /* 開いている状態（歯車トグル）を色で示す */
    .gs-icon-btn.open {
      background: var(--orange);
      color: #fff;
      box-shadow: 0 4px 16px rgba(224,123,57,.4);
    }
    .gs-icon-btn__glyph { line-height: 1; }
    .gs-icon-btn__glyph img { width: 60%; height: 60%; object-fit: contain; }

    /* 歯車（せってい）だけ、選択中ゲームに設定項目がある時だけ表示する
       （selectGame() が capabilities に応じて .show を付け外しする、既存ロジックのまま）。 */
    #gs-settings-toggle { display: none; }
    #gs-settings-toggle.show { display: flex; }

    /* 長押しツールチップ（QuickActionIcons.inline.js が表示/非表示を制御） */
    .gs-icon-btn-tooltip {
      position: fixed;
      transform: translate(-50%, calc(-100% - 10px));
      background: rgba(40,30,20,.9);
      color: #fff;
      font-size: .72rem;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 10px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 2000;
      box-shadow: 0 4px 10px rgba(0,0,0,.25);
    }

    /* 設定パネル：歯車アイコンの下に浮かぶポップオーバー。
       .gs-quick-actions（position:relative）の右端に揃えて配置するため、
       行内でのアイコンの並び順が変わっても画面外にはみ出さない。
       レーン領域を押し下げず、開いている間だけカードの上に重ねて表示する。 */
    .gs-settings-panel {
      display: none;
      flex-direction: column;
      gap: 8px;
      position: absolute;
      top: 100%;
      right: 16px;
      margin-top: 8px;
      width: min(320px, 86vw);
      max-height: min(60vh, 420px);
      overflow-y: auto;
      padding: 10px;
      background: rgba(255, 250, 240, .97);
      border: 1px solid rgba(138,106,74,.18);
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(90,70,50,.25);
    }
    .gs-settings-panel.show { display: flex; }
    .settings-section {
      background: rgba(255,255,255,.65);
      border-radius: 14px;
      border: 1px solid rgba(138,106,74,.18);
      padding: 12px 14px;
    }
    .settings-section h3 {
      font-size: .76rem; color: #9b8871;
      margin-bottom: 9px; letter-spacing: .05em;
    }
    .settings-row { display: flex; gap: 6px; flex-wrap: wrap; }

    /* スマホ横（短い高さ）では余白だけ詰め、48pxのタップ領域は維持する */
    @media (max-height: 520px) and (orientation: landscape) {
      .gs-quick-actions { padding: 0 10px 4px; gap: 6px; }
    }

    /* diff-btn / series-tab / char-tab の明背景用スタイル調整 */
    .diff-btn, .series-tab, .char-tab, .cursor-tab {
      background: #fff !important;
      border-color: rgba(138,106,74,.3) !important;
      color: #8a7a66 !important;
    }
    .diff-btn.active, .series-tab.active, .char-tab.active, .cursor-tab.active {
      background: var(--orange) !important;
      border-color: var(--orange) !important;
      color: #fff !important;
    }

    /* ─── 結果画面（既存オーバーレイを置き換え） ─── */
    #screen-result {
      background:rgba(0,0,0,.55);
      justify-content:center;
      z-index:500;
    }
    #result-box {
      background:#fff;border-radius:28px;
      padding:32px 28px;max-width:340px;width:90%;
      display:flex;flex-direction:column;align-items:center;gap:10px;
      box-shadow:0 12px 40px rgba(0,0,0,.22);
    }
    .re { font-size:3.6rem;line-height:1; }
    #result-title { font-size:1.5rem;color:var(--orange); }
    #result-moves { font-size:.95rem;color:#888; }
    #result-actions {
      display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px;
    }
    .btn-result {
      width:100%;padding:13px;border:none;border-radius:24px;
      font-family:inherit;font-size:.95rem;font-weight:bold;cursor:pointer;transition:.14s;
    }
    .btn-result-primary { background:linear-gradient(135deg,var(--orange),#f0a060);color:#fff;box-shadow:0 4px 14px rgba(224,123,57,.35); }
    .btn-result-secondary { background:#f5f5f5;color:#666; }
    .btn-result:hover { transform:translateY(-1px); }

    /* ─── ゲームプレイ画面 ─── */
    #screen-play {
      background: var(--cream);
    }
    /* game-rootをscreen-play内に移動するため既存スタイルを調整 */
    #game-root {
      display:flex;flex-direction:column;align-items:center;
      padding:20px 16px 160px;
      min-height:100%;width:100%;
    }

    /* ─── サウンドせってい（フローティングボタン＋モーダル） ─── */
    #sound-settings-toggle {
      position: fixed; bottom: 14px; left: 12px; z-index: 600;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(0,0,0,.35); border: 1.5px solid rgba(255,255,255,.5);
      color: #fff; font-size: 1.1rem; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      padding: 0;
    }
    body.screen-title #sound-settings-toggle,
    body.screen-gameselect #sound-settings-toggle {
      display: flex;
    }
    #sound-settings-toggle:active { transform: scale(.92); }

    /* ─── 全画面表示切り替えボタン（共通基盤 / FullscreenController） ───
       ゲームプレイ中のみ右上に表示。notch/safe-area を考慮し、既存の
       右上UI（ゲームタイトル等は左寄せのためここでは非衝突）と重ならないようにする。 */
    .fullscreen-toggle-btn {
      position: fixed;
      top:   calc(10px + env(safe-area-inset-top, 0px));
      right: calc(10px + env(safe-area-inset-right, 0px));
      z-index: 950;
      width: 40px; height: 40px; min-width: 40px; min-height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,.30); border: 1.5px solid rgba(255,255,255,.5);
      color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background .15s, transform .12s;
    }
    body.screen-play .fullscreen-toggle-btn,
    body.screen-title .fullscreen-toggle-btn,
    body.screen-gameselect .fullscreen-toggle-btn { display: flex; }
    .fullscreen-toggle-btn:active   { transform: scale(.9); }
    .fullscreen-toggle-btn.is-active { background: rgba(0,0,0,.45); }

    /* ─── 疑似全画面（Fullscreen API 非対応環境向けフォールバック） ───
       iPhone Safari など requestFullscreen が使えない環境で、可能な限り
       ゲーム領域を大きく表示するための代替手段。#screen-play は元々
       position:fixed;inset:0 だが、アドレスバー分の余白吸収や最前面化のため
       html/body 側にも同様の指定を重ねる。 */
    html.is-pseudo-fullscreen,
    html.is-pseudo-fullscreen body {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100dvh !important;
      margin: 0 !important;
      overflow: hidden !important;
      background: var(--cream, #fff8e7);
    }
    html.is-pseudo-fullscreen body {
      z-index: 2147483647;
    }

    #sound-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.62); z-index: 900;
      align-items: center; justify-content: center; padding: 16px;
    }
    #sound-modal.open { display: flex; }
    #sound-box {
      background: #fff; border-radius: 24px;
      padding: 22px 20px 18px; width: 100%; max-width: 360px;
      animation: popIn .35s cubic-bezier(.34,1.56,.64,1);
    }
    #sound-box h2 { font-size: 1.15rem; color: var(--orange); margin-bottom: 16px; }
    .sound-row { margin-bottom: 18px; }
    .sound-row-label {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px; font-size: .92rem; color: #555; font-weight: bold;
    }
    .sound-enable-toggle {
      padding: 5px 16px; border-radius: 14px; border: none;
      font-family: inherit; font-size: .78rem; font-weight: bold; cursor: pointer;
      background: var(--orange); color: #fff; transition: .15s;
      min-width: 52px;
    }
    .sound-enable-toggle.off { background: #ddd; color: #888; }
    .sound-slider {
      width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
      background: #eee; border-radius: 4px; cursor: pointer; outline: none;
    }
    .sound-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 20px; height: 20px;
      background: var(--orange); border-radius: 50%; box-shadow: 0 2px 6px rgba(224,123,57,.5);
    }
    .sound-slider::-moz-range-thumb {
      width: 20px; height: 20px; border: none; border-radius: 50%;
      background: var(--orange); box-shadow: 0 2px 6px rgba(224,123,57,.5);
    }
    #sound-modal-close {
      width: 100%; margin-top: 6px; padding: 10px; background: #eee; color: #555;
      border: none; border-radius: 20px; font-family: inherit; font-size: .9rem;
      cursor: pointer; font-weight: bold;
    }

/* ══════════════════════════════════════════════════════════
   難易度フッター（platform/DifficultyUI.inline.js が描画）
══════════════════════════════════════════════════════════ */
#difficulty-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 6px 0 10px;
}
.difficulty-footer__inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.difficulty-btn {
  min-width: 92px;
  padding: 8px 14px;
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 20px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: .9rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1.2;
  transition: transform .1s, background .15s;
}
.difficulty-btn:active { transform: scale(.95); }
.difficulty-btn.active {
  background: var(--game-theme, #F0C040);
  border-color: transparent;
  color: #fff;
}
.difficulty-btn.locked {
  background: #eee;
  color: #999;
  cursor: default;
  opacity: .85;
}
.difficulty-btn.locked:active { transform: none; }
.difficulty-btn__sub {
  display: block;
  font-size: .68rem;
  font-weight: normal;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   難易度選択モーダル（core/DifficultyModal.js が描画）
   Issue #195: おつかい・ふくわらいの「あそぶ！」→難易度選択で共通利用する。
   ボタン自体の配色は上の .difficulty-btn / .difficulty-btn.locked を流用し、
   #difficulty-footer と見た目を統一する。
══════════════════════════════════════════════════════════ */
.difficulty-select-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 12px;
  box-sizing: border-box;
  animation: difficulty-select-modal-fade-in 0.2s ease;
}
@keyframes difficulty-select-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.difficulty-select-modal {
  background: #fff8f0;
  border: 3px solid #f0c840;
  border-radius: 22px;
  padding: 22px 26px;
  max-width: min(86%, 340px);
  width: min(86%, 340px);
  /* スマホ横画面等、利用可能な縦幅が狭い場合はタイトル＋3ボタン＋閉じるボタンが
     画面からはみ出しうる。overlay側のpaddingぶんを差し引いた高さを上限にし、
     収まらない場合はモーダル内だけスクロールできるようにする（閉じるボタンが
     見切れて到達不能にならないようにするため。PRレビュー対応）。 */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 10px 32px rgba(0,0,0,0.3);
  animation: difficulty-select-modal-pop 0.3s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes difficulty-select-modal-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

.difficulty-select-modal-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #3a2a10;
  margin-bottom: 14px;
}

.difficulty-select-modal-btn-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

/* モーダル内では横幅いっぱい・押しやすい高さ・アイコン込みの2行レイアウトにする
   （フッターの小さい横並びボタンとは配置だけ変える。配色は.difficulty-btn共通）。 */
.difficulty-select-modal-btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 1rem;
}

.difficulty-select-modal-btn-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.difficulty-select-modal-btn-icon img {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
  display: block;
}

.difficulty-select-modal-btn-label {
  flex: 1;
  text-align: left;
}

.difficulty-select-modal-close-btn {
  width: 100%;
  border: 2px solid #e0c9a6;
  background: #fff;
  color: #a06840;
  border-radius: 18px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s;
}
.difficulty-select-modal-close-btn:active { transform: scale(0.95); }

/* 低いviewport（スマホ横画面・ブラウザUI表示中など）では、そもそも詰めて
   スクロール自体を極力不要にする。同一詳細度の通常ルールより後ろに置かないと
   カスケードで上書きされてしまうため、このメディアクエリは対象セレクタの
   通常スタイル定義（上のブロック群）より必ず後ろに置くこと（PRレビュー対応）。 */
@media (max-height: 420px) {
  .difficulty-select-modal {
    padding: 12px 18px;
  }
  .difficulty-select-modal-title {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .difficulty-select-modal-btn-col {
    gap: 6px;
    margin-bottom: 8px;
  }
  .difficulty-select-modal-btn {
    min-height: 40px;
    padding: 6px 14px;
    font-size: 0.9rem;
  }
  .difficulty-select-modal-btn-icon {
    font-size: 1.2rem;
  }
  .difficulty-select-modal-close-btn {
    padding: 8px 20px;
  }
}

/* ── 難易度解放モーダル ── */
#difficulty-unlock-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 3000;
}
#difficulty-unlock-modal.show { display: flex; }
#difficulty-unlock-box {
  background: #fff;
  border-radius: 20px;
  padding: 26px 30px;
  max-width: 320px;
  width: calc(100% - 48px);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  animation: difficulty-unlock-pop .3s ease-out;
}
@keyframes difficulty-unlock-pop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.difficulty-unlock-emoji { font-size: 3rem; }
#difficulty-unlock-box h2 { margin: 8px 0 4px; color: #444; }
#difficulty-unlock-text  { margin: 4px 0 16px; color: #666; }
#difficulty-unlock-close {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 24px;
  background: var(--game-theme, #F0C040);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
    .difficulty-unlock-emoji {
      font-size: 3rem;
      line-height: 1;
    }
    #difficulty-unlock-box h2 {
      font-size: 1.4rem;
      color: var(--orange, #E07B39);
      margin: 0;
    }
    #difficulty-unlock-text {
      font-size: 1rem;
      color: #555;
      margin: 0;
    }
    #difficulty-unlock-close {
      margin-top: 8px;
      padding: 11px 32px;
      border-radius: 24px;
      border: none;
      background: linear-gradient(135deg, var(--orange, #E07B39), #f0a060);
      color: #fff;
      font-family: inherit;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(224,123,57,.35);
      transition: transform .1s;
    }
    #difficulty-unlock-close:active {
      transform: scale(.94);
    }

/* ✨きらきらショップ: 動的CSS注入前でも初期非表示を保証する最低限のフォールバック。
   詳細スタイルは KiraKiraShop.inline.js の injectShopStyles() が担当する。 */
#shop-modal,
#shop-confirm-modal {
  display: none;
}