/**
 * mobile.css — スマホ縦向き専用UI（フェーズ1・設計書 §8）
 *
 * ここで定義するのは新規UI部品（下部バー・縦タブ・重ね表示・アクションシート・
 * 詳細パネル・簡易メニュー）の見た目のみ。レイアウトの骨格（1カラム化・
 * display:contents・order 並べ替え）は responsive.css 側が担当する。
 *
 * ファイル全体を「≤767px かつ縦向き」に閉じる（PC・横向きスマホへの影響ゼロ・制約1）。
 */
@media (max-width: 767px) and (orientation: portrait) {

  /* タスクB-3: 下部固定領域の予約量（main.js fitFieldToViewport が参照する）。
     既定は下部バー52px分。再生モード中は mobile-ui.js がこれを88px（バー52px＋帯36px）へ
     書き換えて resize を発火し、盤面を再フィットさせる（終了時に52pxへ戻す）。 */
  :root {
    --sol-mobile-bottom-reserve: 52px;
  }

  /* ════════ 第2次実機検収 追加修正（2026-09-03）: 固定分の圧縮 ════════
     A-2で行数が3行→4行（墓地/除外が別行化）に増えたことでカード幅が48pxまで
     低下したため、縦向きスマホ限定で gap/padding を圧縮して52px以上を確保する。
     縦タブ幅・重ね表示（-28px）・.sol-hand-area/#imagePool2/.side-slots-container の
     縦タブ内 gap:4px（カード列とラベルの間）は対象外（変更しない）。
     - .sol-field-area の要素間gap: 10→6px（盤面/手札/墓地/除外/EXの間、4箇所）
     - .custom-layout の盤面3段間gap: 10→8px（カード視認性への影響を抑えるため6ではなく8）
     - 手札/墓地/除外/EXの各行の上下padding: 4〜6px→2px に圧縮
       （指示は「5→3px程度」だが、375×660実測で3pxでは51pxまでしか届かず、
       あと1px分を2pxまで詰めて52pxへ到達させた。B-8のmin-height式も追随済み）
     - .sol-field-area の padding-bottom: 4→2px（52px到達のための最終調整。指示に
       明記のない項目だが、盤面下の余白でカード視認性には影響しない） */
  /* 第5次検収②: 墓地｜除外の隙間（layout.css の gap 10px）を他の行間 6px に揃える */
  .side-slots-container {
    gap: 6px;
  }
  .sol-field-area {
    gap: 6px;
    padding-bottom: 2px; /* 767pxブロックの4pxを縦向きのみ2pxに詰める（52px到達のための最終調整） */
  }
  /* .custom-layout の gap（盤面3段間）は 2026-09-04 5列化セクション（下記）で
     display:grid とあわせて gap: 8px 10px として指定する（縦8px・横10pxを維持）。 */
  .sol-hand-area,
  .side-slots-container .sol-side-area,
  #imagePool2 {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  /* ════════ 縦タブ（設計書 §3.6 L-1・制約8） ════════ */

  .sol-hand-area {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
  }
  #imagePool2 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
  }
  .side-slots-container .sol-side-area {
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
  }

  /* デッキ編集（deck-edit-ui.js）: PC 用のデッキ欄見出しの保存行・サイドバーの「カードを追加」は、
     縦書きの小タブ・デッキ読込シートに置けないので隠す。スマホはデッキシートの「編集」で同じことをする */
  .pool-label .sol-deck-bar,
  .sol-deck-add-section { display: none !important; }

  .pool-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 16px;
    flex: 0 0 16px;
    white-space: nowrap;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
  }
  /* 墓地・除外のラベルはタップで全幅展開できる（設計書 a-3） */
  .side-slots-container .pool-label {
    cursor: pointer;
  }
  /* 枚数バッジは既存の .zone-count（solitaire-brand.css）を縦タブ内に寄せ、数字だけ横向きに戻す */
  .zone-count {
    writing-mode: horizontal-tb;
    margin-left: 0;
    margin-top: 4px;
  }

  .sol-hand-area .center-slot {
    flex: 1;
    width: auto;
    min-width: 0;
    margin-left: 0;
  }
  #imagePool2 .tier-row {
    flex: 1;
    min-width: 0;
  }

  /* ════════ 墓地｜除外: 重ね表示（設計書 a-1・制約9） ════════ */

  .side-slots-container .sol-side-area .side-slot {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .side-slots-container .sol-side-area .side-slot .tier-item-wrapper {
    /* flex子のデフォルト(flex-shrink:1)だとカードが必要以上に圧縮されるため固定幅を維持し、
       収まらない分は .side-slot の overflow-x:auto で横スクロールに回す（設計書 a-1）。 */
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: calc(-1 * (var(--slot-width) - 28px));
  }
  .side-slots-container .sol-side-area .side-slot .tier-item-wrapper:first-child {
    margin-left: 0;
  }

  /* ════════ 2026-09-04 5列化（盤面を6列→5列グリッドへ・DOMは動かさない） ════════
     フィールド魔法（slot3）をEXモンスターゾーン2つ（slot1・slot2）の間、最上段の
     中央へ移動。中段=モンスターゾーン slot4〜8（5列）、下段=魔法罠ゾーン slot10〜14（5列）。
     .row-top/.row-middle/.row-bottom を display:contents にし、.custom-layout を
     5列グリッド化した上で、各 .custom-slot に data-slot 基準で grid-row/grid-column を
     直接指定する（layout.css の nth-child ベースの配置は上書きされる。詳細度が同じでも
     mobile.css が solitaire.html で responsive.css より後に読まれるため後勝ちで確実に上書きできる）。
     PC・横向きスマホは layout.css の6列グリッドのまま（このブロックの外・変更なし）。 */
  .row-top,
  .row-middle,
  .row-bottom {
    display: contents;
  }
  .custom-layout {
    display: grid;
    grid-template-columns: repeat(5, var(--slot-width));
    grid-auto-rows: var(--slot-height);
    gap: 8px 10px;
    justify-content: center;
  }
  /* 最上段: [slot1][slot3][slot2]（EXモンスターゾーン2つの間にフィールド魔法） */
  .custom-layout .custom-slot[data-slot="1"] { grid-row: 1; grid-column: 2; }
  .custom-layout .custom-slot[data-slot="3"] { grid-row: 1; grid-column: 3; }
  .custom-layout .custom-slot[data-slot="2"] { grid-row: 1; grid-column: 4; }
  /* 中段: モンスターゾーン5個（slot4〜8） */
  .custom-layout .custom-slot[data-slot="4"] { grid-row: 2; grid-column: 1; }
  .custom-layout .custom-slot[data-slot="5"] { grid-row: 2; grid-column: 2; }
  .custom-layout .custom-slot[data-slot="6"] { grid-row: 2; grid-column: 3; }
  .custom-layout .custom-slot[data-slot="7"] { grid-row: 2; grid-column: 4; }
  .custom-layout .custom-slot[data-slot="8"] { grid-row: 2; grid-column: 5; }
  /* 下段: 魔法罠ゾーン5個（slot10〜14。10・14はペンデュラムのアイコン付き） */
  .custom-layout .custom-slot[data-slot="10"] { grid-row: 3; grid-column: 1; }
  .custom-layout .custom-slot[data-slot="11"] { grid-row: 3; grid-column: 2; }
  .custom-layout .custom-slot[data-slot="12"] { grid-row: 3; grid-column: 3; }
  .custom-layout .custom-slot[data-slot="13"] { grid-row: 3; grid-column: 4; }
  .custom-layout .custom-slot[data-slot="14"] { grid-row: 3; grid-column: 5; }
  /* slot9（フィールド魔法の下・PCではEXデッキ位置の空きマス）は既定で非表示。
     PCで記録された共有リプレイが slot9 にカードを置くことがあるため、カードが
     入っている間だけ盤面の下に単独表示する（崩れ防止のため6列目には出さない）。
     :has() 非対応ブラウザでは常に非表示のまま（フォールバックとして許容）。 */
  .custom-layout .custom-slot[data-slot="9"] {
    display: none;
  }
  .custom-layout .custom-slot[data-slot="9"]:has(.tier-item-wrapper) {
    display: flex;
    grid-row: 4;
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* ════════ タップ操作の状態機械（設計書 §8.3・制約10） ════════ */

  .tier-item-wrapper.touching {
    transform: scale(1.15);
    z-index: 500;
    box-shadow: 0 0 0 3px var(--accent), 0 8px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  .tier-item-wrapper.selected {
    box-shadow: 0 0 0 3px var(--gold), 0 8px 20px rgba(0, 0, 0, 0.5);
    z-index: 400;
  }

  .custom-slot.drop-hint,
  .center-slot.drop-hint,
  .side-slot.drop-hint,
  #poolRow.drop-hint {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    animation: solDropHintPulse 1s ease-in-out infinite;
  }
  @keyframes solDropHintPulse {
    0%, 100% { background-color: rgba(74, 124, 255, 0.05); }
    50%      { background-color: rgba(74, 124, 255, 0.22); }
  }

  #solTouchLabel {
    position: fixed;
    transform: translateX(-50%);
    background: rgba(10, 16, 36, 0.92);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2000;
    display: none;
  }

  /* ════════ B-11: セッション復元トースト（main.js _showToast）が下部バーに重なるのを防ぐ ════════
     .sol-toast 自体（main.js の実装、bottom:24px）は変更せず、CSS の上書きだけで対応する。 */
  .sol-toast {
    /* 再生モード中は下部の予約量が 88px に増える（mobile-ui.js enterPlaybackMode）ので、それに合わせて上げる */
    bottom: calc(var(--sol-mobile-bottom-reserve, 52px) + 12px);
  }

  /* ════════ C-2: 移動の演出（設計書 §C）════════
     mobile-ui.js の _flyCardClone が body 直下に生成する fixed クローン。
     left/top/width/height を JS 側でアニメさせるため、これらに transition を効かせる。 */
  .sol-fly-clone {
    position: fixed;
    z-index: 3500;
    pointer-events: none;
    border-radius: 6px;
    object-fit: cover; /* img版のみ有効。div版（Low-9: プロキシ）には無害 */
    overflow: hidden; /* Low-9: プロキシ版は cardEl.cloneNode(true) を内包するため、はみ出しを隠す */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transition: left 0.3s cubic-bezier(0.4,0,0.2,1), top 0.3s cubic-bezier(0.4,0,0.2,1),
                width 0.3s cubic-bezier(0.4,0,0.2,1), height 0.3s cubic-bezier(0.4,0,0.2,1);
    background: var(--bg-card);
  }
  /* Low-9: プロキシ版クローン内の cloneNode(true) をクローン全体にフィットさせる */
  .sol-fly-clone > .tier-item {
    width: 100%;
    height: 100%;
  }

  /* ════════ 下部固定バー（制約4・§8.1） ════════ */

  .sol-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    z-index: 200;
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    box-sizing: border-box;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
  }
  .sol-mobile-bar[hidden] { display: none; }
  /* タスクA-2/B-2: 通常モード・再生モードの行。#solMobileBar は常に1行だけを表示する
     （もう一方は hidden）。gap/padding は親 .sol-mobile-bar 側で既に確保しているため
     ここでは flex:1 で幅いっぱいに広げるだけでよい。 */
  .sol-mobile-bar-row {
    display: flex;
    flex: 1;
    gap: 6px;
    min-width: 0;
  }
  .sol-mobile-bar-row[hidden] { display: none; }
  .sol-mobile-bar-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0 4px;
  }
  .sol-mobile-bar-btn[hidden] { display: none; }
  /* タスクA: デッキ読込の進捗表示（多重防止のバグ修正）。中身を隠して文言だけ差し替える */
  .sol-mobile-bar-btn.sol-loading {
    position: relative;
    color: transparent;
  }
  .sol-mobile-bar-btn.sol-loading > * {
    visibility: hidden;
  }
  .sol-mobile-bar-btn.sol-loading::after {
    content: '読込中…';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    font-size: 0.82rem;
    font-weight: 600;
  }
  /* タスクB: 演出の間だけデッキボタンを光らせる（400ms・.sol-loading とは別クラス） */
  @keyframes solDeckBtnPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px var(--accent); background: var(--accent); color: #fff; }
  }
  /* 第6次実機検収-2a: 再生モード中は #solMobilePlayDeckBadge がデッキ演出の錨になるため
     同じパルス演出を適用する（.sol-mobile-bar-btn 以外にも当たるようセレクタを追加）。 */
  .sol-mobile-bar-btn.sol-pulse,
  .sol-mobile-play-deck-badge.sol-pulse {
    animation: solDeckBtnPulse 0.4s ease-in-out;
  }
  /* 再生（2026-10-16 案A）: 明るい面＋accent の ▶。1手戻す は印だけの細いボタン */
  .sol-mobile-bar-play { font-weight: 700; background: var(--border); }
  .sol-mobile-bar-play::before { content: '▶'; color: var(--accent); font-size: 0.72em; }
  .sol-mobile-bar-icon { flex: 0 0 40px; font-size: 1.15rem; }
  /* 6つ並ぶので、⋯ も少し細くし、デッキの「デッキ N」が途中で折り返さないようにする */
  #solMobileBarNormal .sol-mobile-bar-menu { flex-basis: 40px; }
  #solMobileDeckBtn { white-space: nowrap; flex-grow: 1.3; } /* 「デッキ N」は他より文字が多いので少し広く */
  /* 範囲を選んでいる間・決まった後は「■ N手」「✂ N手」になるので、範囲ボタンも少し広く */
  .sol-mobile-record-btn.recording, .sol-mobile-record-btn.has-range { flex-grow: 1.25; }
  .sol-mobile-bar-menu {
    flex: 0 0 46px;
    font-size: 1.3rem;
    position: relative;
  }

  /* ════════ 範囲ボタン（下部バー。旧「録画」。2026-10-15 整理③） ════════
     選んでいる間・範囲が決まった後は accent（青系）で示す。赤は危険操作専用のため使わない。
     L-10: ラベルは「■ N手」「範囲 s〜e」と短くし、375px幅で折り返さないよう nowrap を付ける。 */
  .sol-mobile-record-btn { font-weight: 700; }
  .sol-mobile-record-btn.recording {
    border-color: var(--accent);
    color: var(--accent);
  }
  .sol-mobile-record-btn.has-range {
    color: var(--accent);
    background: rgba(174, 197, 255, 0.12);
  }
  #solMobileRecordLabel {
    white-space: nowrap;
    color: inherit; /* 別の規則で span に #333 が当たり暗いグレーになるため明示（第5次検収①） */
  }
  .sol-mobile-save-btn { font-weight: 700; }

  /* ════════ 範囲を選ぶ画面（2026-10-20 案A。mobile-ui.js openRangePicker） ════════
     表示中は body.sol-range-pick。下部バー・再生の帯の代わりに画面下へ出す。高さは JS が測って
     --sol-mobile-bottom-reserve に入れ、盤面をその上に収める。 */
  body.sol-range-pick #solMobileBar,
  body.sol-range-pick #solMobileReplayStrip { display: none !important; }
  .sol-mobile-range-panel[hidden] { display: none; }
  .sol-mobile-range-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    padding: 8px 10px 10px;
    box-sizing: border-box;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    font-family: var(--font);
  }
  .sol-mobile-range-head { display: flex; align-items: baseline; gap: 8px; }
  .sol-mobile-range-label { flex: 1; min-width: 0; color: var(--main-color); font-size: 0.85rem; font-weight: 700; }
  .sol-mobile-range-now { flex: none; color: #a8b4c9; font-size: 0.72rem; }
  .sol-mobile-range-band { position: relative; height: 4px; margin: 8px 9px 0; border-radius: 2px; background: var(--border); }
  .sol-mobile-range-band > i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 2px; background: var(--gold); }
  .sol-mobile-range-slider { display: block; width: 100%; height: 24px; margin: 2px 0 6px; }
  .sol-mobile-range-btns { display: flex; gap: 6px; }
  .sol-mobile-range-btns + .sol-mobile-range-btns { margin-top: 6px; }
  .sol-mobile-range-btns button {
    flex: 1;
    min-width: 0;
    height: 38px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
  }
  .sol-mobile-range-btns button:disabled { opacity: .45; }
  /* 主操作は黄（site-theme.css の主操作と同じ色） */
  .sol-mobile-range-btns button.is-primary { flex: 2; background: #f3ce46; color: #242013; border-color: transparent; font-weight: 700; }

  /* ════════ タスクB-2/C: 再生モードのスライダー帯・下部バー ════════ */

  .sol-mobile-replay-strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 52px;
    height: 36px;
    z-index: 200;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
  }
  .sol-mobile-replay-strip[hidden] { display: none; }
  .sol-mobile-replay-strip-slider {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
  }
  /* 第7次実機検収: 範囲再生中の「録画範囲を再生中（s〜e手目）」表示。
     デッキバッジ・スライダーと1行に収める小さな表示（375px幅では省略記号で収める）。 */
  .sol-mobile-play-range-badge {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font);
    font-size: 0.68rem;
    color: #94a3b8;
  }
  .sol-mobile-play-range-badge[hidden] { display: none; }
  .sol-mobile-play-toggle-btn {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
  }
  .sol-mobile-play-counter {
    flex: 0 0 auto;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--main-color);
    white-space: nowrap;
  }
  /* 第6次実機検収-1: 再生バーの「共有」ボタン（終了の左・小さめ） */
  .sol-mobile-play-share-btn {
    flex: 0 0 auto;
    padding: 0 10px;
  }
  /* 第6次実機検収-2a: 再生モードの帯の左端「デッキ N」バッジ。
     #solMobileDeckBtn が非表示（矩形0）になる再生モード中のデッキ演出の錨として使う
     （replay-service.js _getDeckAnchorRect が参照）。ボタンと似た見た目にして違和感を減らす。 */
  .sol-mobile-play-deck-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin-right: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
  }
  /* 第6次実機検収-2c: デッキ演出クローンに影を付けて出発点を目立たせる（大きさは card-effects.js flyBetweenRects が札の大きさから縮小で出す）。
     .sol-flip-clone 自体（PC の flipMoveClone とも共有）は変更せず、追加クラスのみで対応する。 */
  .sol-deck-fly-clone {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  }

  /* ════════ H-3: 再生モード中は盤面への入力を完全に無効化 ════════
     drag-drop.js のタップ選択・ドラッグのガード（setMobilePlaybackMode）に加え、
     盤面（カードのタップ・カウンターのクリック・ダブルクリック効果発動）を丸ごと
     pointer-events:none にして二重に防御する。下部バー・帯・シート類は対象外
     （body.sol-playback の子孫を個別指定するため、それらは無関係のまま操作できる）。 */
  body.sol-playback .custom-layout,
  body.sol-playback .sol-hand-area,
  body.sol-playback .side-slots-container,
  body.sol-playback #imagePool2 {
    pointer-events: none;
  }

  /* ════════ 旧リプレイバー: 縦向きスマホでは完全非表示（A-4・司令塔決定） ════════
     実走で #replayBarContainer が sticky のまま残って下部バーの裏に半分見え「取消」が
     二重になる不具合が確認された。responsive.css の #replayBarContainer.replay-bar
     { position:sticky; ... } と同じ詳細度（ID+class）のセレクタで、mobile.css が
     solitaire.html の <link> で後段に来ることを利用して確実に上書きする。
     タスクB-1: 旧オーバーレイ（.sol-mobile-fullbar-open）は廃止。#replayBack/#replayPlay/
     #replayFwd/#replaySlider/#replayCounter は再生モードのバー・帯から .click()／
     textContent 追従で使うため、DOM 自体は残し常時 display:none のままにする
     （非表示要素でも .click() やプロパティ読み取りは機能する）。 */
  #replayBarContainer.replay-bar {
    display: none;
  }

  /* ════════ カード詳細パネル（スマホ・A-2で「既定は閉」のオーバーレイに変更） ════════
     選択時には出さない。アクションシートの「詳細」ボタンからのみ開く。
     top:0・max-height:70vh・スクリムタップ/×で閉じる。開閉は記憶しない。
     アクションシート(z-index:250)より前面に出す必要があるため z-index を上げる。 */

  .sol-mobile-cip {
    position: fixed;
    inset: 0;
    z-index: 300;
  }
  .sol-mobile-cip[hidden] { display: none; }
  .sol-mobile-cip-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }
  .sol-mobile-cip-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    gap: 8px;
    padding: 16px 34px 16px 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
  }
  .sol-mobile-cip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--main-color);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }
  .sol-mobile-cip-body {
    flex: 1;
    min-width: 0;
  }
  /* card-info-panel.js の描画クラス(.cip-*)をスマホパネル幅に合わせて上書き（画像100px＋テキストスクロール） */
  .sol-mobile-cip-body .cip-header {
    align-items: flex-start;
  }
  .sol-mobile-cip-body .cip-img {
    width: 100px;
    flex: 0 0 100px;
  }
  .sol-mobile-cip-body .cip-effect {
    font-size: 0.78rem;
    max-height: none;
  }
  /* B-12: showPrice=false で呼ぶため通常は生成されないが、フェイルセーフとして隠す */
  .sol-mobile-cip-body .cip-price {
    display: none;
  }

  /* ════════ 選択中カードのアクションシート（A-3で再構成） ════════
     ヘッダ行（カード名＋詳細ボタン）＋操作行の3行以内・高さ110px以下。
     操作は守備表示｜セット｜墓地へ｜除外へ｜デッキに戻す｜効果発動の6つ（削除は外す＝長押しメニューに残す）。 */

  .sol-mobile-action-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 52px;
    z-index: 250;
    max-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
  }
  .sol-mobile-action-sheet[hidden] { display: none; }

  .sol-mobile-action-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 26px;
    flex-shrink: 0;
  }
  .sol-mobile-action-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--main-color);
  }
  .sol-mobile-action-detail-btn {
    flex: 0 0 auto;
    padding: 3px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: var(--font);
    font-size: 0.76rem;
    font-weight: 600;
  }

  /* 選択をやめる ✕（詳細ボタンと同じ地・枠。他のシートの閉じるボタンと同じ印） */
  .sol-mobile-action-close-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 26px;
    margin-left: -4px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.9rem;
    line-height: 1;
  }
  /* 手札のカードの「場に出すとき」。見た目はデッキシートの「回す｜編集」（.sol-deck-mode-tabs）と同じ */
  .sol-mobile-place-row[hidden] { display: none; }
  .sol-mobile-place-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .sol-mobile-place-label { flex: none; font-size: 0.76rem; color: #a8b4c9; }
  .sol-mobile-place-seg {
    display: flex;
    flex: 1;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-color);
  }
  .sol-mobile-place-seg button {
    flex: 1;
    padding: 4px 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #a8b4c9;
    font: inherit;
    font-size: 0.8rem;
  }
  .sol-mobile-place-seg button[aria-pressed="true"] {
    background: #202c42;
    color: #eff3fb;
    font-weight: 700;
  }
  /* 「場に出すとき」の行がある間は1段ぶん高くする（ボタンは手札では守備表示・セットを隠すので2段のまま） */
  .sol-mobile-action-sheet.has-place-row { max-height: 146px; }
  .sol-mobile-action-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .sol-mobile-action-ops[hidden] { display: none; }
  .sol-mobile-action-btn[hidden] { display: none; }
  .sol-mobile-action-btn {
    /* 整理④で「吹き出し」を足して7つになったため、1段4つ・2段に収める
       （3段目は max-height:110px を超えて下部バーに重なっていた） */
    flex: 1 1 22%;
    min-width: 60px;   /* 幅320pxでも1段4つに収める（4×60+隙間12+左右の余白16=268px） */
    padding: 6px 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.76rem;
    font-weight: 600;
  }

  /* ════════ 汎用シート（⋯メニュー・共通スタイル） ════════ */

  .sol-mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 900;
  }
  .sol-mobile-sheet[hidden] { display: none; }
  .sol-mobile-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }
  .sol-mobile-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border-radius: 14px 14px 0 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
  }
  .sol-mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--main-color);
    font-weight: 700;
  }
  /* components.css の `p, span, li { color:#333 }` が見出しの span に直接効き、
     暗い灰色で読めなかったため、見出しの文字色を引き継がせる（2026-10-15 整理③で発見） */
  .sol-mobile-sheet-header > span { color: inherit; }
  .sol-mobile-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px 24px;
  }
  .sol-mobile-menu-item {
    padding: 12px 10px;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.92rem;
    position: relative;
  }

  /* ⋯メニュー項目の下に出す1行の説明（小さめ・控えめ色） */
  .sol-mobile-menu-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    color: #94a3b8;
  }

  .sol-mobile-sheet-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--main-color);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ════════ デッキ読込ボトムシート（#solSidebar 再利用・制約7） ════════ */

  /* B-1: localStorage の sol-panel-state で #solSidebar に .collapsed が付いたままだと、
     solitaire-brand.css の .sol-sidebar.collapsed { width:0; border-width:0; overflow:hidden }
     .sol-sidebar.collapsed > * { display:none } が効いたままになり、× だけの空シートになる
     （実走で確認。sidebar-toggle.js が縦向きスマホでは左右トグル自体を隠すため .collapsed の
     解除操作ができず、過去に一度でも畳んだ状態を localStorage に持つ端末で必ず再現する）。
     .sol-sheet-open 側の指定で collapsed 由来の値を明示的に打ち消す。 */
  #solSidebar.sol-sheet-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 85vh;
    max-height: 85vh;
    min-height: 0;
    z-index: 910;
    border-radius: 14px 14px 0 0;
    border: none;
    border-top: 1px solid var(--border);
    border-width: 1px 0 0 0; /* .collapsed の border-width:0 を明示的に打ち消す */
    overflow-y: auto;        /* .collapsed の overflow:hidden を打ち消す */
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
  }
  #solSidebar.sol-sheet-open > * {
    display: block; /* .collapsed > * { display:none } を打ち消す */
  }
  #solSidebarScrim {
    position: fixed;
    inset: 0;
    z-index: 905;
    background: rgba(0, 0, 0, 0.55);
  }
  #solSidebarScrim[hidden] { display: none; }
  #solSidebar .sol-mobile-sheet-close-btn {
    display: none;
  }
  #solSidebar.sol-sheet-open .sol-mobile-sheet-close-btn {
    display: block;
    align-self: flex-end;
    position: sticky;
    top: 0;
    margin: 8px 8px 0 0;
    z-index: 2;
  }

  /* ════════ 操作方法シート（右パネルの .sol-ops-details を流用・制約6） ════════ */

  /* .sol-ops-details は display:none の #solRightPanel の子孫にあるため、
     details 自身を fixed 化するだけでは祖先の display:none に隠れる。
     祖先2段（#solRightPanel と直接の親 .sol-right-section）だけ一時的に表示に戻す。
     他の .sol-right-section（盤面操作・カウンター等）は隠したままにする。 */
  /* M-6: .collapsed が付いていない端末（localStorage に right:false が残存）でも
     #solRightPanel が盤面幅を占有しないよう固定サイズで浮かせる。 */
  #solRightPanel.sol-mobile-help-active {
    display: block !important;
    position: fixed;
    width: 0;
    min-height: 0;
    border: none;
  }
  #solRightPanel.sol-mobile-help-active > .sol-right-section {
    display: none;
  }
  #solRightPanel.sol-mobile-help-active > .sol-right-section.sol-mobile-help-section-active {
    display: block;
  }

  .sol-ops-details.sol-mobile-help-open {
    display: block !important;
    position: fixed !important;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 910;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    padding: 14px;
    box-sizing: border-box;
  }
  .sol-mobile-help-scrim {
    position: fixed;
    inset: 0;
    z-index: 905;
    background: rgba(0, 0, 0, 0.55);
  }

  /* ════════ M-7: touch-action で方向を宣言する（根治） ════════
     スクロール領域（手札・EX・墓地/除外）とその中のカードは横スクロールを許可(pan-x)。
     盤面スロット内のカードは方向宣言なし(none)＝JS のドラッグ判定に完全に委ねる。 */
  .sol-hand-area .center-slot,
  #imagePool2 .tier-row,
  .side-slot {
    touch-action: pan-x;
  }
  .sol-hand-area .center-slot .tier-item-wrapper,
  #imagePool2 .tier-row .tier-item-wrapper,
  .side-slot .tier-item-wrapper {
    touch-action: pan-x;
  }
  .custom-slot .tier-item-wrapper {
    touch-action: none;
  }

  /* ════════ E-2: デッキ読込シート内のページナビ非表示＋⋯メニューへの導線追加 ════════
     実走で「価格/マイデッキ/環境デッキ/最新弾/購入候補/一人回し」のナビが縦幅を食うことが判明。
     シート内では非表示にし、代わりに ⋯メニュー末尾の「強欲なラボ トップへ」で導線を確保する。 */
  #solSidebar.sol-sheet-open .sol-sidebar-nav {
    display: none;
  }
  .sol-mobile-menu-link {
    display: block;
    text-decoration: none;
  }
  .sol-mobile-menu-link[hidden] { display: none; }

  /* ════════ デッキ一覧シート（フェーズ2・設計書 §3.3） ════════ */

  .sol-mobile-deck-sheet {
    position: fixed;
    inset: 0;
    z-index: 950;
  }
  .sol-mobile-deck-sheet[hidden] { display: none; }
  .sol-mobile-deck-sheet .sol-mobile-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }
  .sol-mobile-deck-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-radius: 14px 14px 0 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
  }
  .sol-mobile-deck-search-row {
    flex-shrink: 0;
    padding: 8px 14px;
  }
  .sol-mobile-deck-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.9rem;
  }
  .sol-mobile-deck-empty {
    flex: 1;
    padding: 30px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
  }
  .sol-mobile-deck-empty[hidden] { display: none; }
  /* デッキ0枚のときはグリッド自体を隠す（空メッセージと二重表示させない） */
  .sol-mobile-deck-grid[hidden] { display: none; }
  .sol-mobile-deck-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* grid-auto-rows:auto のままだと、コンテナの高さが flex:1 で確定しているために
       行が自動計算されず各セルが重なるバグがあった（実測で確認）。min-content で
       各行をセルの自然な高さ（aspect-ratio由来）に固定し、align-content:start で
       上詰めにする。行数が多い分は grid 自体の overflow-y:auto でスクロールする。 */
    grid-auto-rows: min-content;
    align-content: start;
    gap: 6px;
    padding: 4px 14px 14px;
  }
  .sol-mobile-deck-cell {
    position: relative;
    aspect-ratio: 1 / 1.45; /* --slot-height = --slot-width * 1.45 と同じ比率 */
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: var(--bg-card);
    overflow: hidden;
    cursor: pointer;
  }
  .sol-mobile-deck-cell[hidden] { display: none; }
  .sol-mobile-deck-cell.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold);
  }
  /* ?newcards=1&focus= の強調（B+D）。強調中は focus と選択中以外を暗くし、focus は大きく浮かせる */
  body.sol-newcard-focus-active .sol-mobile-deck-cell:not(.sol-newcard-focus):not(.selected) {
    filter: brightness(.45);
  }
  .sol-mobile-deck-cell.sol-newcard-focus {
    transform: scale(1.12);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .7);
    z-index: 3;
    position: relative;
  }
  .sol-mobile-deck-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sol-mobile-deck-thumb-proxy {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    font-size: 0.55rem;
    line-height: 1.2;
    color: var(--main-color);
  }
  .sol-mobile-deck-check {
    position: absolute;
    z-index: 3; /* 透かし・ぼかしの擬似要素(z-index 2)より前面 */
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    color: #111;
    font-size: 0.62rem;
    line-height: 16px;
    text-align: center;
    display: none;
  }
  .sol-mobile-deck-cell.selected .sol-mobile-deck-check { display: block; }
  /* M-5: 操作行は検索欄の直下（上部）に配置。iOSのソフトキーボードで下端が隠れても
     「手札へ」等が押せるようにするため。境界線は次要素（空メッセージ/グリッド）との間。 */
  .sol-mobile-deck-actions {
    flex-shrink: 0;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .sol-mobile-deck-primary-btn {
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 700;
  }
  .sol-mobile-deck-primary-btn:disabled { opacity: 0.4; }
  /* B-1: 墓地へ/除外へ/EXへ/盤面へ。4個を2列×2行に折り返す */
  .sol-mobile-deck-dest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .sol-mobile-deck-dest-actions .sol-mobile-menu-item {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    text-align: center;
    padding: 7px 4px;
    font-size: 0.82rem;
  }
  .sol-mobile-deck-dest-actions .sol-mobile-menu-item:disabled { opacity: 0.4; }
  .sol-mobile-deck-sub-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .sol-mobile-deck-sub-actions .sol-mobile-menu-item {
    flex: 1;
    text-align: center;
    padding: 8px;
  }

  /* ════════ 共有シート（フェーズ3・設計書 §3.4／2026-09-04 タスクA: 「わかる」構成に再編） ════════
     枠自体は⋯メニューと共通の .sol-mobile-sheet を再利用。ここでは中身固有の要素のみ。 */

  /* タスクA: 全セクション（①〜④）にスクロールで到達できるよう .sol-mobile-sheet-panel の
     80vhより広く取る。overflow-y:auto は .sol-mobile-sheet-panel 側で既に効いている。 */
  .sol-mobile-share-panel {
    max-height: 92vh;
  }
  .sol-mobile-share-current {
    margin: 0 0 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--main-color);
  }
  /* タスクA: ①〜④の区切り線＋番号付き見出し */
  .sol-mobile-share-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  /* ①（現在の記録の直後のセクション）だけ上余白を詰める。:first-of-typeはタグ別判定のため
     divの①とdetailsの④の両方にマッチしてしまうので使わない。 */
  #solMobileShareCurrentInfo + .sol-mobile-share-section {
    margin-top: 10px;
  }
  .sol-mobile-share-heading {
    margin: 0 0 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--main-color);
  }
  .sol-mobile-share-note {
    margin: 0 0 10px;
    font-size: 0.76rem;
    color: #94a3b8;
  }
  .sol-mobile-share-label {
    display: block;
    margin: 8px 0 4px;
    font-size: 0.78rem;
    color: #94a3b8;
  }
  .sol-mobile-share-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--main-color);
    font-family: var(--font);
    font-size: 0.9rem;
  }
  .sol-mobile-share-comment-row {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .sol-mobile-share-comment-row .sol-mobile-share-input {
    flex: 1;
  }
  .sol-mobile-share-comment-row .sol-mobile-menu-item {
    flex: 0 0 auto;
    padding: 8px 14px;
  }


  /* H-1: リンク作成結果（URL表示＋共有…／コピー／Xに投稿） */
  #solMobileShareGenerateBtn {
    margin-top: 12px;
  }
  .sol-mobile-share-result {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .sol-mobile-share-result[hidden] { display: none; }
  #solMobileShareUrlInput {
    color: #94a3b8;
  }
  .sol-mobile-share-result-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sol-mobile-share-result-actions .sol-mobile-menu-item {
    flex: 1 1 0;
    min-width: 72px;
    text-align: center;
    padding: 8px 6px;
  }
  .sol-mobile-share-result-actions .sol-mobile-menu-item[hidden] { display: none; }
  /* #solMobileShareXLink は <a> なので .sol-mobile-menu-item のボタン風見た目を継承させる */
  a.sol-mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
  }
  .sol-mobile-share-error {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: rgba(220, 60, 60, 0.12);
    border: 1px solid rgba(220, 60, 60, 0.4);
    border-radius: var(--radius);
    color: #ff9b9b;
    font-size: 0.8rem;
  }
  .sol-mobile-share-error[hidden] { display: none; }

  /* ════════ 初見導線（設計書 §3.5） ════════
     M-3: pointer-events はCTAボタン自身にしか与えない設計。ラッパ要素を持たず、
     ボタン自体を position:absolute で配置しているため、ボタンの矩形の外側
     （.custom-layout の他の部分）は最初から pointer-events の対象外＝盤面タップを
     奪わない（表示中はカードが無いため実害はないが、念のため明記）。 */

  #solMobileEmptyCta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 16px 28px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
  }
  #solMobileEmptyCta[hidden] { display: none; }
  /* CTAの絶対配置の基準（PC/横向きに影響しないようportait内でのみ指定） */
  .custom-layout {
    position: relative;
  }

  /* 削除(×)ボタン追加でカード上カウンター全体幅が約73.6pxとなり、
     縦向きスマホのカード幅(52〜59px)をはみ出すため、カード上カウンターに
     限りボタン・数値欄を縮小してカード幅に収める（PC/横向きには影響しない）。 */
  .tier-item-wrapper .counter-container {
    height: 18px;
  }
  .tier-item-wrapper .counter-container .triangle-button {
    width: 11px;
    height: 18px;
    font-size: 0.6rem;
  }
  .tier-item-wrapper .counter-container .counter-textbox {
    width: 1rem;
    height: 18px;
    font-size: 0.62rem;
  }

  /* ════════ デッキシートの「回す｜編集」（deck-edit-ui.js・2026-10-20） ════════
     「編集」では回すための行（検索・手札へ等・一覧）を隠し、編集の欄（#solMobileDeckEdit）を出す。
     枚数を変えられるのは選んだカード1枚だけ（上の欄）。カードの上には「×N」の札だけを出す（誤って触らないように）。 */
  .sol-deck-mode-tabs {
    display: flex;
    gap: 4px;
    margin-left: 12px;
    margin-right: auto;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-color);
  }
  .sol-deck-mode-tabs button {
    padding: 4px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #a8b4c9;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 400;
    cursor: pointer;
  }
  .sol-deck-mode-tabs button[aria-pressed="true"] {
    background: #202c42;
    color: #eff3fb;
    font-weight: 700;
  }
  .sol-mobile-deck-sheet.is-edit .sol-mobile-deck-search-row,
  .sol-mobile-deck-sheet.is-edit .sol-mobile-deck-actions,
  .sol-mobile-deck-sheet.is-edit #solMobileDeckEmpty,
  .sol-mobile-deck-sheet.is-edit #solMobileDeckGrid { display: none !important; }
  .sol-deck-edit {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .sol-deck-edit[hidden] { display: none; }
  .sol-deck-edit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 4px 14px 8px;
    font-size: 0.85rem;
  }
  .sol-deck-edit-bar[hidden] { display: none; }
  .sol-deck-edit-bar .sol-deck-bar-name { font-size: 0.95rem; max-width: 100%; }
  /* ボタンは右へ寄せ、入りきらなければ折り返す（PC の見出しと同じ並び） */
  .sol-deck-edit-bar .sol-deck-bar-acts { flex-wrap: wrap; justify-content: flex-end; }
  .sol-deck-edit-bar .sol-deck-bar-btn { height: 34px; padding: 0 16px; font-size: 0.85rem; }
  /* 保存の行と検索の間に区切りを入れて、検索の後に保存を押すと読めないようにする */
  .sol-deck-edit-search {
    padding: 8px 14px 6px;
    border-top: 1px solid var(--border);
  }
  .sol-deck-edit-search .sol-deck-suggest {
    margin-top: 6px;
    max-height: 40vh;
    overflow-y: auto;
  }
  .sol-deck-edit-search .sol-deck-suggest-item { padding: 8px; font-size: 0.85rem; }
  .sol-deck-edit-search .sol-deck-suggest-thumb { width: 28px; height: 40px; }
  .sol-deck-edit-sel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 14px 8px;
    padding: 8px 10px;
    min-height: 40px;
    border-radius: 10px;
    background: #18233a;
  }
  .sol-deck-edit-sel.is-empty { justify-content: center; }
  .sol-deck-edit-sel .sol-mobile-deck-thumb {
    flex: none;
    width: 26px;
    height: 38px;
    border-radius: 3px;
    object-fit: cover;
  }
  .sol-deck-edit-sel-hint { color: #a8b4c9; font-size: 0.85rem; }
  .sol-deck-edit-sel-name {
    flex: 1;
    min-width: 0;
    color: #eff3fb;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sol-deck-edit-step {
    flex: none;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #202c42;
    color: #eff3fb;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  .sol-deck-edit-step:disabled { opacity: 0.35; cursor: default; }
  .sol-deck-edit-count { flex: none; min-width: 18px; text-align: center; color: #eff3fb; font-size: 1rem; }
  .sol-deck-edit-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 14px;
  }
  .sol-deck-edit-sec {
    margin: 6px 14px 4px;
    color: #a8b4c9;
    font-size: 0.75rem;
  }
  /* 一覧の中の格子は、スクロールを外側（.sol-deck-edit-list）に任せる */
  .sol-mobile-deck-grid.sol-deck-edit-grid {
    flex: none;
    overflow: visible;
    padding: 0 14px 6px;
  }
  .sol-deck-edit-badge {
    position: absolute;
    z-index: 3; /* 透かし・ぼかしの擬似要素(z-index 2)より前面 */
    left: 3px;
    bottom: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(16, 22, 38, 0.88);
    color: #eff3fb;
    font-size: 0.68rem;
    font-weight: 700;
  }
  .sol-deck-edit-empty { margin: 16px 14px; color: #a8b4c9; font-size: 0.85rem; text-align: center; }

  /* ════════ ⋯メニューのまとまり（2026-10-21 モック sim-refresh-20261021 の E・ユーザー承認） ════════
     見る・残す／盤面に足す／道具／デッキ／消す。項目は詰めた行（左寄せ・説明は下に小さく）、
     別の画面へ進む項目は右に ›、消す操作は赤い文字。地はシート #141c2c の上に一段明るい面 */
  .sol-mobile-menu-body { gap: 0; padding: 0 14px 20px; }
  .sol-mobile-menu-group { margin-top: 10px; }
  .sol-mobile-menu-group-h {
    margin: 0;
    padding: 6px 4px 4px;
    color: #a8b4c9;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .sol-mobile-menu-list { border-radius: 10px; background: #171f31; overflow: hidden; }
  .sol-mobile-menu-list .sol-mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #eff3fb;
    font-size: 0.92rem;
    text-align: left;
  }
  .sol-mobile-menu-list .sol-mobile-menu-item + .sol-mobile-menu-item { border-top: 1px solid #101626; }
  .sol-mobile-menu-list .sol-mobile-menu-item:active { background: #202c42; }
  /* 項目名と説明は左の列に縦に並べる */
  .sol-mobile-menu-list .sol-mobile-menu-item:not(.sol-sample-blur-toggle) { flex-wrap: wrap; align-content: center; row-gap: 0; padding-right: 32px; position: relative; }
  .sol-mobile-menu-label { flex: 1 1 100%; color: inherit; }
  .sol-mobile-menu-list .sol-mobile-menu-desc { flex: 1 1 100%; margin-top: 2px; color: #a8b4c9; font-size: 0.72rem; }
  /* 別の画面へ進む項目の › */
  .sol-mobile-menu-list .sol-mobile-menu-item:not(.is-plain)::after {
    content: '›';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a8b4c9;
    font-size: 1.05rem;
  }
  /* 消す操作: 赤い文字（説明は控えめの色のまま） */
  .sol-mobile-menu-list .sol-mobile-menu-item.is-danger .sol-mobile-menu-label { color: #ff8f94; }
  /* ぼかすのスイッチは右端 */
  .sol-mobile-menu-list .sol-sample-blur-toggle .sol-mobile-menu-label { flex: 1 1 auto; min-width: 0; }

  /* 下部バー: 「デッキ 40」の数字が components.css の span の一律の色（#333）で読めなかったのを直す */
  #solMobileDeckCount { color: inherit; font-weight: 700; }
  .sol-mobile-record-ico { margin-right: 0; vertical-align: 0; } /* ボタンの gap で間を取る */
  .sol-mobile-record-btn.recording .sol-mobile-record-ico { display: none; }
}

/* ════════ H-1: portrait を外れた瞬間の二重防御（致命的バグ対策） ════════
   mobile.css 全体が @media (max-width:767px) and (orientation:portrait) 内なので、
   回転やウィンドウ幅変更で portrait を外れると中身が一切適用されなくなり、JS が hidden を
   戻す前の一瞬（または不具合時）に下部バー・アクションシート・詳細・メニュー・タッチラベルが
   素の div として PC/横向きに露出してしまう。CSS 側でも強制的に隠す（L-9: #solTouchLabel も対象）。
   mobile-ui.js 側は matchMedia の change イベントで resetMobileUI() を呼び、hidden を戻す
   （二重防御。CSS はフェイルセーフ、JS が本来の閉じる処理を担当）。 */
@media not all and (max-width: 767px) and (orientation: portrait) {
  .sol-mobile-bar,
  .sol-mobile-replay-strip,
  .sol-mobile-action-sheet,
  .sol-mobile-cip,
  .sol-mobile-sheet,
  .sol-mobile-deck-sheet,
  #solMobileEmptyCta,
  #solTouchLabel,
  .sol-fly-clone {
    display: none !important;
  }
}

/* 幅340px以下（320px級のスマホ）: 下部バーに5つ並べると1つ約57pxになり、
   「デッキ N」が「デッ／キ」と単語の途中で折れていたため、字と間隔を詰めて1行に収める
   （2026-10-15 整理③で「保存」を足して5つになった。320/360/375px で実測） */
@media (max-width: 340px) {
  .sol-mobile-bar-btn { font-size: 0.76rem; gap: 2px; }
  #solMobileDeckBtn { white-space: nowrap; }
  /* 2026-10-16: 再生を足して6つになったため、印だけのボタン（↶・⋯）を細くし、間隔と余白を詰める */
  #solMobileBarNormal { gap: 4px; }
  /* 上の 0.76rem と、縦向きブロックの #solMobileBarNormal .sol-mobile-bar-menu（ID付き）に負けないよう、ID付きで指定する */
  #solMobileBarNormal .sol-mobile-bar-icon, #solMobileBarNormal .sol-mobile-bar-menu { flex-basis: 34px; font-size: 1.05rem; }
  .sol-mobile-bar-btn { padding: 0 2px; }
}