/* Mobile deck/search improvements */
    .ml-user-badge {
      margin-bottom: 10px;
      padding: 7px 10px;
      border-radius: 6px;
      border: 1px solid #e8edf4;
      background: #ffffff;
      color: #33415a;
      font-size: var(--fs-sm);
      font-weight: 600;
    }

    .ml-search-item.fire,
    .ml-search-item.water,
    .ml-search-item.nature,
    .ml-search-item.light,
    .ml-search-item.darkness {
      border-left-width: 5px;
    }

    .ml-search-item.fire { border-left-color: #e35d2b; }
    .ml-search-item.water { border-left-color: #4f86c5; }
    .ml-search-item.nature { border-left-color: #5b9a5a; }
    .ml-search-item.light { border-left-color: #c9a83d; }
    .ml-search-item.darkness { border-left-color: #6c5a7e; }

    .ml-search-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
    }

    .ml-search-card-head {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .ml-search-main {
      min-width: 0;
      flex: 1;
    }

    .ml-search-thumb {
      width: 54px;
      height: 72px;
      border-radius: 5px;
      object-fit: cover;
      border: 1px solid #d8dfe4;
      background: #ecf1f4;
      flex-shrink: 0;
    }

    .ml-search-thumb.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      background: linear-gradient(145deg, #e8edf4, #e4e9f1);
      color: #33415a;
      font-weight: 700;
    }

    .ml-search-cost {
      min-width: 24px;
      text-align: center;
      background: #243447;
      border-radius: 999px;
      font-size: var(--fs-sm);
      font-weight: 800;
      color: #ffffff;
      padding: 2px 8px;
    }

    .ml-search-meta {
      margin-top: 4px;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: #33415a;
      background: rgba(59,110,165,0.1);
      display: inline-block;
      padding: 1px 7px;
      border-radius: 999px;
      border: 1px solid rgba(59,110,165,0.2);
    }

    .ml-search-summary {
      font-size: var(--fs-xs);
      color: #33415a;
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(59,110,165,0.18);
      border-radius: 999px;
      padding: 4px 9px;
      margin-bottom: 6px;
      display: inline-flex;
      width: fit-content;
    }

    .ml-search-empty {
      text-align: center;
      font-size: var(--fs-md);
      color: var(--text-dim);
      padding: 20px 8px;
    }

    .ml-more-btn {
      width: 100%;
      margin-top: 8px;
      padding: 9px;
      border-radius: 6px;
      border: 1px solid #d5dcd8;
      background: #f2f5f3;
      color: var(--text);
      font-size: var(--fs-sm);
      font-weight: 600;
      cursor: pointer;
    }

    .ml-more-btn:disabled {
      opacity: 0.65;
      cursor: default;
    }

    @keyframes ml-spin {
      to { transform: rotate(360deg); }
    }

    .ml-spinner {
      width: 22px;
      height: 22px;
      border: 2.5px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: ml-spin 0.65s linear infinite;
      margin: 14px auto;
    }

    /* Mobile deck builder redesign */
    .ml-builder-root {
      background: radial-gradient(circle at 50% -24%, rgba(59,110,165, 0.25) 0%, rgba(255, 255, 255, 0.1) 48%), linear-gradient(160deg, #ffffff 0%, #f4f6fa 56%, #e8edf4 100%);
      color: #243447;
    }

    .ml-builder-top {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: linear-gradient(135deg, var(--builder-header-from) 0%, var(--builder-header-to) 100%);
      box-shadow: 0 2px 8px rgba(23,32,46, 0.25);
      border-bottom: 2px solid rgba(59,110,165, 0.45);
      flex-shrink: 0;
    }

    .ml-builder-left { flex: 1; min-width: 0; }
    .ml-builder-center {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 999px;
      padding: 5px 12px;
      flex-shrink: 0;
    }
    .ml-builder-right { display: none; }

    .ml-builder-select {
      margin-bottom: 0;
      height: 40px;
      font-size: var(--fs-md);
      border: 1px solid rgba(255, 255, 255, 0.30);
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border-radius: 8px;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
      padding-left: 10px;
    }
    .ml-builder-select option { background: #243447; color: #fff; }

    .ml-builder-account {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #fff;
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ml-account-logout {
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.68rem;
      text-decoration: underline;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      flex-shrink: 0;
    }

    .ml-top-btn {
      border: none;
      border-radius: 6px;
      padding: 7px 4px;
      font-size: 0.69rem;
      font-weight: 700;
      line-height: 1.1;
      cursor: pointer;
      color: #fff;
      letter-spacing: 0.01em;
    }

    .ml-top-btn.delete { background: #926067; }
    .ml-top-btn.save { background: #3e7b9f; }
    .ml-top-btn.play { background: #4b8e6b; }
    .ml-top-btn.online { background: #567086; }

    .ml-top-btn:disabled,
    .ml-top-btn.disabled {
      background: #a8b1b8;
      color: #eef2f4;
      cursor: not-allowed;
      opacity: 0.78;
    }

    /* ===== タブシステム (Pill Fill) ===== */
    .ml-builder-tabs {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(255,255,255, 0.97);
      border-bottom: 1px solid var(--builder-border);
      flex-shrink: 0;
    }
    .ml-builder-tab-btn {
      flex: 1;
      padding: 9px 14px;
      border: none;
      background: rgba(52,74,106, 0.13);
      font-size: var(--fs-md);
      font-weight: 600;
      color: var(--text-dim);
      cursor: pointer;
      border-radius: 20px;
      transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    }
    .ml-builder-tab-btn.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 10px rgba(244,96,12,0.30);
    }

    /* ===== タブパネル ===== */
    .ml-builder-tab-panel {
      display: none;
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      gap: 8px;
      min-height: 0;
    }
    .ml-builder-tab-panel.active {
      display: flex;
      flex-direction: column;
    }

    /* ===== 文明カラーストリップ ===== */
    .ml-deck-tile-strip { height: 4px; width: 100%; flex-shrink: 0; }
    .ml-deck-tile-strip.fire    { background: var(--civ-fire); }
    .ml-deck-tile-strip.water   { background: var(--civ-water); }
    .ml-deck-tile-strip.nature  { background: var(--civ-nature); }
    .ml-deck-tile-strip.light   { background: var(--civ-light); }
    .ml-deck-tile-strip.dark,
    .ml-deck-tile-strip.darkness { background: var(--civ-dark); }
    .ml-deck-tile-strip.multi   { background: linear-gradient(90deg, var(--civ-fire), var(--civ-water), var(--civ-nature)); }

    /* ===== タイル画像ラップ + 枚数バッジ ===== */
    .ml-deck-tile-img-wrap {
      position: relative;
      flex-shrink: 0;
    }
    /* ===== 検索パネル (タブ内) ===== */
    .ml-builder-search {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      border: none;
      background: transparent;
      padding-bottom: 0;
    }
    .ml-builder-search .ml-input {
      margin-bottom: 0;
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255,255,255, 0.97);
      box-shadow: 0 2px 6px rgba(23,32,46, 0.06);
    }

    /* ===== ボトムアクションバー (2行) ===== */
    .ml-bottom-bar {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,1.0) 100%);
      border-top: 1px solid var(--builder-border);
      padding: 8px 12px;
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
      box-shadow: 0 -4px 16px rgba(23,32,46, 0.12);
      flex-shrink: 0;
    }
    .ml-bottom-row {
      display: flex;
      gap: 6px;
      align-items: stretch;
    }
    .ml-bottom-row-play .ml-bottom-btn { flex: 1; }
    .ml-bottom-row-manage { justify-content: space-between; }
    .ml-bottom-manage-left { display: flex; gap: 6px; }
    .ml-bottom-btn {
      border: none;
      border-radius: 9px;
      padding: 10px 12px;
      font-size: var(--fs-sm);
      font-weight: 700;
      line-height: 1.2;
      cursor: pointer;
      color: #fff;
      min-height: 42px;
      white-space: nowrap;
      transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    }
    .ml-bottom-btn:active { transform: translateY(1px); opacity: 0.82; }
    /* 削除・復元: 小さめ固定幅 */
    .ml-bottom-btn.delete  { background: #33415a; min-width: 52px; }
    .ml-bottom-btn.restore { background: #536070; min-width: 52px; }
    /* プレイ系: 同一カラーファミリー */
    .ml-bottom-btn.solo    { background: #3a6e56; }
    .ml-bottom-btn.vs      { background: #445f7a; }
    .ml-bottom-btn.online  { background: #335e80; }
    /* 保存: アクセント・目立つ */
    .ml-bottom-btn.save {
      background: var(--accent);
      min-width: 64px;
      font-size: var(--fs-md);
      box-shadow: 0 2px 10px rgba(244,96,12,0.34);
      letter-spacing: 0.02em;
    }
    .ml-bottom-btn.save:active { background: var(--accent-hover); box-shadow: none; }
    .ml-bottom-btn:disabled,
    .ml-bottom-btn.disabled {
      background: #b2b8be !important;
      color: #e8ecef;
      cursor: not-allowed;
      opacity: 0.60;
      box-shadow: none !important;
      transform: none !important;
    }

    .ml-builder-main { display: none; }

    .ml-builder-summary {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 10px 14px;
      background: rgba(255,255,255, 0.92);
      border: 1px solid var(--builder-border);
      border-radius: 10px;
      flex-shrink: 0;
    }
    .ml-summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .ml-summary-name {
      font-weight: 700;
      font-size: var(--fs-md);
      color: #243447;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ml-summary-stats {
      font-size: var(--fs-sm);
      color: #33415a;
      white-space: nowrap;
      flex-shrink: 0;
      font-weight: 600;
    }
    .ml-summary-progress {
      width: 100%;
      height: 4px;
      background: rgba(52,74,106, 0.18);
      border-radius: 3px;
      overflow: hidden;
    }
    .ml-summary-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--civ-nature) 0%, var(--accent) 100%);
      border-radius: 3px;
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      min-width: 3px;
    }

    .ml-deck-grid-wrap {
      flex: 1;
      border: 1px solid var(--builder-border);
      background: var(--builder-surface);
      border-radius: 10px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .ml-deck-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      flex: none;
      padding: 10px;
    }
    /* 超次元/GR セクション（通常デッキより控えめに） */
    .ml-deck-grid-ex {
      flex: none;
      overflow-y: visible;
      padding: 4px 10px 10px;
    }
    .ml-zone-head {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--text-dim);
      padding: 8px 10px 2px;
      border-top: 1px solid rgba(52,74,106, 0.22);
    }

    .ml-deck-tile {
      border: 1px solid rgba(52,74,106, 0.26);
      border-radius: 8px;
      background: rgba(255,255,255,0.78);
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(23,32,46, 0.1);
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .ml-deck-tile:hover,
    .ml-deck-tile:active {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(23,32,46, 0.16);
    }

    .ml-deck-tile.fire { border-color: rgba(209,111,68,0.52); }
    .ml-deck-tile.water { border-color: rgba(79,134,197,0.52); }
    .ml-deck-tile.nature { border-color: rgba(91,154,90,0.52); }
    .ml-deck-tile.light { border-color: rgba(194,173,98,0.55); }
    .ml-deck-tile.darkness,
    .ml-deck-tile.dark { border-color: rgba(108,90,126,0.56); }

    .ml-deck-thumb {
      width: 100%;
      aspect-ratio: 0.72;
      object-fit: cover;
      display: block;
      background: #f4f6fa;
      border-bottom: 1px solid rgba(52,74,106,0.18);
    }

    .ml-deck-thumb.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #33415a;
      background: linear-gradient(145deg, #f4f6fa 0%, #e8edf4 100%);
    }

    .ml-deck-tile-name {
      font-size: var(--fs-sm);
      line-height: 1.3;
      color: #243447;
      font-weight: 700;
      padding: 6px 7px 3px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.6em;
    }

    .ml-deck-tile-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 6px 5px;
      font-size: var(--fs-xs);
      color: #33415a;
      font-weight: 600;
      gap: 6px;
    }

    /* ===================================================================== */
    /* 横向き1画面デッキ編集レイアウト (mlb-*) — 対戦画面の左レール方針を流用   */
    /* ===================================================================== */
    .mlb-root {
      display: flex;
      flex-direction: column;
      width: 100vw;
      height: 100dvh;
      overflow: hidden;
      background: radial-gradient(circle at 50% -24%, rgba(59,110,165,0.22) 0%, rgba(255,255,255,0.08) 48%), linear-gradient(160deg, #ffffff 0%, #f4f6fa 56%, #e8edf4 100%);
      color: #243447;
    }
    .mlb-body {
      flex: 1;
      display: flex;
      flex-direction: row;
      min-height: 0;
      overflow: hidden;
    }

    /* ── 左レール ── */
    .mlb-rail {
      width: 74px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 5px 4px;
      background: linear-gradient(135deg, var(--builder-header-from) 0%, var(--builder-header-to) 100%);
      border-right: 2px solid rgba(59,110,165,0.45);
      box-shadow: 2px 0 8px rgba(23,32,46,0.22);
    }
    .mlb-rail-account {
      display: block;
      width: 100%;
      border: 0;
      background: transparent;
      font-size: 0.62rem;
      font-weight: 700;
      color: #fff;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: 0.9;
      padding: 0 0 2px;
      cursor: pointer;
    }
    .mlb-rail-zones {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1;
      min-height: 0;
    }
    .mlb-zone-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 2px;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 8px;
      background: rgba(255,255,255,0.12);
      color: #fff;
      cursor: pointer;
      line-height: 1.1;
    }
    .mlb-zone-tab.active {
      background: var(--accent);
      border-color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    }
    .mlb-zone-tab-label { font-size: var(--fs-xs); font-weight: 700; }
    .mlb-zone-tab-count { font-size: 0.66rem; font-weight: 700; opacity: 0.92; font-family: var(--font-num); letter-spacing: 0.02em; }
    .mlb-rail-foot { display: flex; flex-direction: column; gap: 5px; }
    .mlb-rail-btn {
      border: none;
      border-radius: 7px;
      padding: 8px 2px;
      font-size: 0.68rem;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      line-height: 1.15;
    }
    .mlb-rail-btn.search { background: #3e7b9f; }
    .mlb-rail-btn.board { background: #6d5494; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
    .mlb-rail-btn.custom { background: #65507f; }
    .mlb-rail-btn.back { background: rgba(255,255,255,0.18); }
    .mlb-rail-btn.notes { background: #4f6478; }
    .mlb-rail-btn:disabled { background: #a8b1b8; opacity: 0.7; cursor: not-allowed; }

    /* ── 中央グリッド ── */
    .mlb-center {
      flex: 1;
      min-width: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 5px;
      display: flex;
    }
    .mlb-grid {
      flex: 1;
      display: grid;
      gap: 4px;
      align-content: start;
    }
    /* 各ゾーンが中央領域を過不足なく埋めるよう、上限枚数に応じた列×行にする。
       行高は 100% を行数で割って算出（40枚デッキは 4 行でぴったり・スクロール無し）。
       メイン=10列x4行=40 / 超次元=4列x2行=8 / GR=4列x3行=12 */
    .mlb-grid-main  { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: minmax(0, calc((100% - 12px) / 4)); }
    .mlb-grid-hyper { grid-template-columns: repeat(4, minmax(0, 1fr));  grid-auto-rows: minmax(0, calc((100% - 4px) / 2)); }
    .mlb-grid-gr    { grid-template-columns: repeat(4, minmax(0, 1fr));  grid-auto-rows: minmax(0, calc((100% - 8px) / 3)); }
    .mlb-empty-hint {
      margin: auto;
      max-width: 60%;
      text-align: center;
      color: #33415a;
      font-size: var(--fs-md);
      font-weight: 600;
      line-height: 1.6;
    }
    .mlb-cell {
      position: relative;
      border: 1px solid rgba(52,74,106,0.28);
      border-radius: 5px;
      background: rgba(255,255,255,0.72);
      overflow: hidden;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .mlb-cell.empty {
      background: rgba(52,74,106,0.08);
      border-style: dashed;
      cursor: default;
    }
    .mlb-cell.selected {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
      box-shadow: 0 0 0 2px rgba(59,110,165,0.35);
    }
    .mlb-cell.fire { border-color: rgba(209,111,68,0.55); }
    .mlb-cell.water { border-color: rgba(79,134,197,0.55); }
    .mlb-cell.nature { border-color: rgba(91,154,90,0.55); }
    .mlb-cell.light { border-color: rgba(194,173,98,0.58); }
    .mlb-cell.darkness,
    .mlb-cell.dark { border-color: rgba(108,90,126,0.58); }
    .mlb-cell-strip { display: none; }
    .mlb-cell.mlb-anim {
      animation: dlItemIn var(--dur-normal) var(--ease-out) backwards;
    }

    .mlb-cell:not(.empty):active {
      transform: scale(0.98);
    }

    .ml-search-item {
      animation: dlItemIn var(--dur-normal) var(--ease-out) backwards;
    }

    .mlb-cell-strip.fire { background: var(--civ-fire); }
    .mlb-cell-strip.water { background: var(--civ-water); }
    .mlb-cell-strip.nature { background: var(--civ-nature); }
    .mlb-cell-strip.light { background: var(--civ-light); }
    .mlb-cell-strip.dark,
    .mlb-cell-strip.darkness { background: var(--civ-dark); }
    .mlb-cell-strip.multi { background: linear-gradient(90deg, var(--civ-fire), var(--civ-water), var(--civ-nature)); }
    .mlb-cell-img-wrap { position: relative; flex: 1; min-height: 0; }
    .mlb-cell-img-wrap .ml-deck-thumb {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
      object-position: top center; /* カード上部（名前/コスト）を見せて識別性を上げる */
      border-bottom: none;
    }
    /* ── 下部バー ── */
    .mlb-bar {
      flex-shrink: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,1.0) 100%);
      border-top: 1px solid var(--builder-border);
      box-shadow: 0 -3px 12px rgba(23,32,46,0.12);
      padding: 4px 8px;
    }
    .mlb-bar-sel, .mlb-bar-manage {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
    }
    .mlb-bar-selname, .mlb-bar-deckname {
      flex: 1;
      min-width: 0;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #243447;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mlb-bar-deckname-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
    }
    .mlb-bar-deckname-wrap .mlb-bar-deckname {
      flex: none;
    }
    /* デッキ名インライン編集（SP・既定デッキ以外）。.mlb-bar-deckname と同寸法で親wrapの幅を壊さない。 */
    .mlb-bar-deckname-input {
      flex: none;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      font-family: inherit;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #243447;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 2px 6px;
    }
    .mlb-bar-deckname-input:hover {
      border-color: rgba(52,74,106,0.28);
    }
    .mlb-bar-deckname-input:focus {
      outline: none;
      background: #fff;
      border-color: var(--accent);
    }
    .mlb-bar-deckname-wrap .ml-civ-bar {
      margin-top: 0;
    }
    .mlb-bar-sel-actions, .mlb-bar-manage-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }
    .mlb-bar-btn {
      border: none;
      border-radius: 7px;
      padding: 7px 10px;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      background: #33415a;
      white-space: nowrap;
    }
    .mlb-bar-btn.count { min-width: 40px; font-size: var(--fs-lg); background: #3a6e56; }
    .mlb-bar-btn.del { background: var(--danger); }
    .mlb-bar-btn.rename { background: var(--neutral); }
    /* デッキ選択リスト（SP）。PC版 .dl-deckpick と対。下部バーにあるので上方向へ開く。 */
    .mlb-deckpick { position: relative; min-width: 0; display: flex; }
    .mlb-deckpick-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border: 1px solid var(--builder-border);
      border-radius: 6px;
      background: #fff;
      color: #243447;
      font-size: var(--fs-sm);
      text-align: left;
      cursor: pointer;
    }
    .mlb-deckpick-btn-label {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mlb-deckpick-caret {
      flex: 0 0 auto;
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--text-dim);
    }
    .mlb-deckpick.open .mlb-deckpick-caret { transform: rotate(180deg); }
    .mlb-deckpick-menu {
      position: absolute;
      z-index: 80;
      bottom: calc(100% + 4px);
      left: 0;
      min-width: 100%;
      max-width: 78vw;
      max-height: 52vh;
      overflow-y: auto;
      padding: 4px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 -8px 24px rgba(20,32,48,0.22);
    }
    .mlb-deckpick-row { display: flex; align-items: stretch; border-radius: 6px; }
    .mlb-deckpick-row.selected { background: #3b6ea5; }
    .mlb-deckpick-pick {
      flex: 1 1 auto;
      min-width: 0;
      padding: 9px 10px;
      border: 0;
      background: none;
      color: #243447;
      font-size: var(--fs-sm);
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mlb-deckpick-row.selected .mlb-deckpick-pick { color: #fff; }
    .mlb-deckpick-row.is-new .mlb-deckpick-pick { color: var(--accent); font-weight: 700; }
    /* 星はタップ目標を確保するため幅を広めに取る（行選択と押し分けるため） */
    .mlb-deckpick-star {
      flex: 0 0 auto;
      width: 42px;
      border: 0;
      background: none;
      border-radius: 6px;
      color: #b6c0cc;
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
    }
    .mlb-deckpick-star.on { color: #f0b400; }
    .mlb-deckpick-row.selected .mlb-deckpick-star { color: rgba(255,255,255,0.72); }
    .mlb-deckpick-row.selected .mlb-deckpick-star.on { color: #ffd766; }
    .mlb-deckpick-star-spacer { flex: 0 0 auto; width: 42px; }
    .mlb-bar-btn.solo { background: var(--accent); }
    .mlb-bar-btn.vs { background: var(--secondary); }
    .mlb-bar-btn.online { background: var(--secondary); }
    .mlb-bar-btn.save { background: var(--success); }
    .mlb-bar-btn.trial { background: #607186; }
    .mlb-gimmick-control {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.72rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .mlb-bar-deck-count { font-size: 0.7rem; white-space: nowrap; }
    .mlb-bar-btn:disabled, .mlb-bar-btn.disabled {
      background: #b2b8be !important; color: #e8ecef; opacity: 0.6; cursor: not-allowed;
    }
    .mlb-select.ml-builder-select {
      height: 34px;
      max-width: 150px;
      color: #243447;
      background: rgba(255,255,255,0.85);
      border: 1px solid var(--builder-border);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a3422' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px 8px;
      padding-right: 28px;
    }
    .mlb-select.ml-builder-select option { background: #fff; color: #243447; }

    .mlb-bottom-nav { display: none; }

    /* ── 検索ドロワー ── */
    .mlb-drawer {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: none;
    }
    .mlb-drawer.open { display: block; }
    .mlb-drawer-backdrop { position: absolute; inset: 0; background: rgba(20,26,36,0.35); }
    .mlb-drawer-panel {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 45%;
      min-width: 260px;
      background: rgba(255,255,255,0.99);
      box-shadow: -4px 0 20px rgba(23,32,46,0.3);
      display: flex;
      flex-direction: column;
      padding: 8px;
      gap: 8px;
      animation: mlb-drawer-in 0.18s ease;
    }
    @keyframes mlb-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
    .mlb-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: var(--fs-sm);
      font-weight: 600;
      color: #243447;
    }
    .mlb-drawer-close {
      border: none;
      background: rgba(131,68,68,0.9);
      color: #fff;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: pointer;
    }
    .mlb-search-input { margin-bottom: 0; flex-shrink: 0; }
    .mlb-search-results { flex: 1; overflow-y: auto; min-height: 0; }

    /* 検索の絞り込み（文明・コスト範囲） */
    .mlb-search-filters {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      flex-shrink: 0;
    }
    .mlb-civ-checks {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      color: #243447;
      font-size: 0.78rem;
    }
    .mlb-civ-check {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      cursor: pointer;
      font-weight: 700;
    }
    .mlb-civ-check input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--secondary);
      cursor: pointer;
    }
    .mlb-civ-exclude {
      display: flex;
      flex: 1 0 100%;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      color: #243447;
      font-size: 0.78rem;
    }
    .mlb-civ-exclude[hidden],
    .mlb-civ-check[hidden] {
      display: none;
    }
    .mlb-civ-exclude.is-opening {
      animation: mlb-civ-exclude-open 0.16s ease-out;
    }
    @keyframes mlb-civ-exclude-open {
      from { opacity: 0; transform: translateY(-4px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .mlb-civ-exclude.is-opening { animation: none; }
    }
    .mlb-civ-exclude-label {
      flex: 1 0 100%;
      font-weight: 700;
    }
    .mlb-search-filters .mlb-civ-mode {
      flex: 0 1 auto;
      width: auto;
      min-width: 92px;
      height: 34px;
      margin-bottom: 0;
      padding: 4px 24px 4px 8px;
      color: #243447;
      background-color: rgba(255,255,255,0.85);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a3422' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 12px 8px;
    }
    .mlb-search-filters .mlb-civ-mode option { background: #fff; color: #243447; }
    .mlb-filter-cost { display: inline-flex; align-items: center; gap: 3px; }
    .mlb-filter-cost .mlb-cost-input {
      width: 46px;
      height: 34px;
      margin-bottom: 0;
      padding: 4px;
      text-align: center;
    }
    .mlb-cost-sep,
    .mlb-cost-unit {
      color: #5b6472;
      font-size: var(--fs-xs);
      white-space: nowrap;
    }

    /* 詳細フィルタ（SP。PC版 dl-adv-* と同構成） */
    .mlb-adv-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid rgba(36,52,71,0.25);
      border-radius: 6px;
      background: rgba(255,255,255,0.85);
      color: #243447;
      font-size: var(--fs-xs);
      font-weight: 700;
      height: 34px;
      padding: 4px 10px;
      cursor: pointer;
    }
    .mlb-adv-toggle.active { background: var(--secondary); border-color: var(--secondary); color: #fff; }
    .mlb-adv-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 1px solid rgba(36,52,71,0.18);
      border-radius: 8px;
      background: rgba(255,255,255,0.55);
      padding: 8px;
    }
    .mlb-adv-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 10px;
      color: #243447;
      font-size: var(--fs-xs);
    }
    .mlb-adv-group-title {
      font-weight: 800;
      white-space: nowrap;
      min-width: 3.5em;
    }
    .mlb-adv-check {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      cursor: pointer;
      font-weight: 700;
    }
    .mlb-adv-check input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--secondary);
      cursor: pointer;
    }
    .mlb-adv-group .mlb-race-input {
      flex: 1 1 130px;
      min-width: 110px;
      height: 34px;
      margin-bottom: 0;
      padding: 4px 8px;
    }
    .mlb-adv-group .mlb-sort-select {
      flex: 0 1 auto;
      width: auto;
      min-width: 150px;
      height: 34px;
      margin-bottom: 0;
      padding: 4px 24px 4px 8px;
      color: #243447;
      background-color: rgba(255,255,255,0.85);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a3422' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 12px 8px;
    }
    .mlb-adv-group .mlb-sort-select option { background: #fff; color: #243447; }
    .mlb-adv-reset {
      align-self: flex-start;
      border: 1px solid rgba(36,52,71,0.25);
      border-radius: 6px;
      background: rgba(255,255,255,0.85);
      color: #5b6472;
      font-size: var(--fs-xs);
      font-weight: 700;
      padding: 6px 10px;
      cursor: pointer;
    }

    .ml-deck-controls {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 4px;
      padding: 0 6px 6px;
    }

    .ml-deck-btn {
      border: none;
      border-radius: 5px;
      padding: 8px 4px;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      line-height: 1;
      min-height: 36px;
    }

    .ml-deck-btn.minus { background: #926067; }
    .ml-deck-btn.plus { background: #4b8e6b; }
    .ml-deck-btn.delete { background: #33415a; min-width: 34px; }

    .ml-builder-search {
      border: 1px solid rgba(59,110,165,0.28);
      background: rgba(255,255,255, 0.86);
      padding-bottom: 10px;
    }

    .ml-builder-search .ml-input {
      margin-bottom: 8px;
    }

    /* Mobile game extensions */
    .mg-card-chip.battle,
    .mg-card-chip.mana,
    .mg-card-chip.grave,
    .mg-card-chip.hand {
      display: grid;
      grid-template-rows: auto 1fr auto;
      align-items: center;
      justify-items: center;
      gap: 2px;
    }

    .mg-card-chip.shield.selected {
      outline: 2px solid #5d6b7d;
      outline-offset: 2px;
    }

    .mg-btn.shield-break {
      background: #8b6e96;
    }

    .mg-btn.mana-untap {
      background: #4f7d67;
    }

    .mg-btn.deck-all {
      background: #3f6d86;
    }

    .mg-btn.deck-mana { background: #5e8b66; }
    .mg-btn.deck-grave { background: #33415a; }
    .mg-btn.deck-shield { background: #7d7298; }
    .mg-btn.deck-reveal { background: #33415a; }
    .mg-btn.deck-peek { background: #5f7286; }
    .mg-btn.other { background: #6f7e8f; }

    .mg-btn.guide {
      animation: dmPulse 1.4s infinite;
    }

    .mg-sheet-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      z-index: 2450;
    }

    .mg-sheet-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .mg-hand-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: -240px;
      background: var(--panel);
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
      border: 1px solid var(--border);
      box-shadow: 0 -8px 22px rgba(0,0,0,0.18);
      padding: 14px;
      transition: bottom .22s;
      z-index: 2460;
    }

    .mg-hand-sheet.open {
      bottom: 0;
    }

    .mg-hand-sheet-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
      text-align: center;
      word-break: break-word;
    }

    .mg-hand-sheet-actions {
      display: grid;
      gap: 8px;
    }

    .mg-sheet-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 8px;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }

    .mg-sheet-btn.battle { background: var(--success); }
    .mg-sheet-btn.mana { background: var(--secondary); }
    .mg-sheet-btn.cancel { background: var(--neutral); }

    .mg-toast {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      padding: 10px 14px;
      border-radius: 999px;
      color: #fff;
      font-size: var(--fs-sm);
      font-weight: 700;
      z-index: 2800;
      opacity: 0;
      transition: opacity .2s;
      pointer-events: none;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      background: #4b647a;
    }

    .mg-toast.ok { background: #2f7b56; }
    .mg-toast.warn { background: #33415a; }
    .mg-toast.info { background: #4b647a; }

    /* V3: deck civ dots / empty states */
    .dl-civ-dots,
    .ml-civ-dots {
      display: flex;
      gap: 4px;
      margin: 6px 0 8px;
      align-items: center;
    }

    .dl-civ-dot,
    .ml-civ-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.15);
      background: #c4ccd1;
      display: inline-block;
    }

    .dl-civ-dot.none,
    .ml-civ-dot.none {
      width: auto;
      height: auto;
      border-radius: 999px;
      padding: 0 6px;
      font-size: var(--fs-xs);
      color: #6d7a82;
      background: #edf1f4;
      border-color: #d4dce1;
      line-height: 1.25;
    }

    .dl-civ-dot.fire, .ml-civ-dot.fire { background: #e35d2b; }
    .dl-civ-dot.water, .ml-civ-dot.water { background: #4f86c5; }
    .dl-civ-dot.nature, .ml-civ-dot.nature { background: #5b9a5a; }
    .dl-civ-dot.light, .ml-civ-dot.light { background: #c9a83d; }
    .dl-civ-dot.dark, .dl-civ-dot.darkness, .ml-civ-dot.dark, .ml-civ-dot.darkness { background: #6c5a7e; }
    .dl-civ-dot.multi, .dl-civ-dot.neutral, .ml-civ-dot.multi, .ml-civ-dot.neutral { background: #8d969c; }

    .dl-empty-decks,
    .ml-empty-decks {
      padding: 12px;
      border-radius: 8px;
      border: 1px dashed #d6ded9;
      background: #f5f8f6;
      color: #6d7d73;
      font-size: var(--fs-md);
      text-align: center;
      line-height: 1.4;
    }

    .dg-revealed-item,
    .mg-revealed-item {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
    }

    .dg-revealed-actions,
    .mg-revealed-actions {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .dg-revealed-btn,
    .mg-revealed-btn {
      border: 1px solid #e4e9f1;
      border-radius: 6px;
      background: #ffffff;
      color: #243447;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 4px 6px;
      cursor: pointer;
      white-space: nowrap;
    }

    .dg-revealed-btn.hand,
    .mg-revealed-btn.hand {
      background: #eef5ef;
      border-color: #b7cfb8;
      color: #2f5a31;
    }

    .dg-revealed-btn.trigger,
    .mg-revealed-btn.trigger {
      background: #ffffff;
      border-color: #e4e9f1;
      color: #243447;
    }

    .dg-card-chip.revealed,
    .mg-card-chip.revealed {
      width: 50px;
      height: 72px;
      border-radius: 7px;
    }

    .dg-card-chip.shield.faceup,
    .mg-card-chip.shield.faceup {
      color: #2f3b34;
      font-weight: 700;
      background: linear-gradient(160deg, #f6fbf7 0%, #ddebe0 100%);
      border-color: #9ebaa3;
    }

    .mg-zone-section.revealed {
      background: #ffffff;
      border-color: #e4e9f1;
    }

    .dg-zone-menu {
      position: absolute;
      z-index: 3500;
      min-width: 200px;
      border-radius: 10px;
      border: 1px solid #d8dfe9;
      background: #ffffff;
      box-shadow: 0 12px 24px rgba(23,32,46, 0.24);
      display: none;
      /* 項目が多いカードの操作メニューは画面の高さを超える。hidden のままだと下半分が
         切れて押せないので、画面内へ収めてスクロールさせる */
      max-height: calc(100vh - 16px);
      max-height: calc(100dvh - 16px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .dg-zone-menu.open {
      display: block;
    }

    .dg-zone-menu-head {
      padding: 8px 10px;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #243447;
      border-bottom: 1px solid #e4e9f1;
      background: linear-gradient(180deg, #f4f6fa 0%, #f4f6fa 100%);
    }

    .dg-zone-menu-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 6px;
    }

    .dg-zone-menu-sep {
      height: 1px;
      margin: 4px 2px;
      background: #e4e9f1;
      border-radius: 999px;
    }

    .dg-zone-menu-btn {
      border: 1px solid transparent;
      border-radius: 6px;
      background: #ffffff;
      color: #243447;
      text-align: left;
      padding: 7px 8px;
      font-size: var(--fs-sm);
      cursor: pointer;
      transition: background .12s, border-color .12s;
    }

    .dg-zone-menu-btn:hover {
      background: #f4f6fa;
      border-color: #d8dfe9;
    }

    .dg-zone-menu-btn.red {
      color: #243447;
    }

    .dg-zone-menu-btn.red:hover {
      background: #ffffff;
      border-color: #e4e9f1;
    }

    .dg-zone-menu-btn.detail {
      margin-top: 4px;
      border-top: 1px solid #e4e9f1;
      padding-top: 9px;
      color: #243447;
      font-weight: 700;
    }

    .mg-deck-count {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.45);
      background: rgba(0,0,0,0.18);
      font-weight: 700;
    }

    .mg-zone-menu-modal {
      position: fixed;
      inset: 0;
      z-index: 3400;
      display: none;
    }

    .mg-zone-menu-modal.open {
      display: block;
    }

    .mg-zone-menu-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.36);
    }

    .mg-zone-menu-sheet {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 12px;
      max-height: 72vh;
      overflow-y: auto;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px;
      box-shadow: 0 -8px 22px rgba(0,0,0,0.22);
    }

    .mg-zone-menu-head {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }

    .mg-zone-menu-list {
      display: grid;
      gap: 7px;
    }

    .mg-zone-menu-sep {
      height: 1px;
      margin: 3px 2px;
      border-radius: 999px;
      background: #d3dbd6;
    }

    .mg-zone-menu-btn {
      width: 100%;
      border: 1px solid #d7dfda;
      background: #f3f6f4;
      color: #3b4a42;
      border-radius: 8px;
      padding: 11px 10px;
      text-align: left;
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
    }

    .mg-zone-menu-btn.red {
      color: #243447;
      border-color: #e4e9f1;
      background: #ffffff;
    }

    .mg-zone-menu-btn.detail {
      margin-top: 2px;
      border-top: 1px solid #cfd9d3;
      padding-top: 13px;
      color: #2f473c;
    }

    .mg-zone-menu-close {
      width: 100%;
      margin-top: 10px;
      border: none;
      border-radius: 8px;
      background: var(--neutral);
      color: #fff;
      padding: 10px;
      font-size: var(--fs-sm);
      font-weight: 700;
      cursor: pointer;
    }