/* Desktop list/edit view */
    .dl-root {
      display: grid;
      grid-template-columns: 250px 1fr 300px;
      gap: 10px;
      height: 100vh;
      padding: 10px;
      background: radial-gradient(circle at 50% -25%, rgba(59,110,165,0.22) 0%, rgba(20,34,50,0.04) 48%), linear-gradient(130deg, #f4f6fa 0%, #f4f6fa 48%, #e8edf4 100%);
    }

    .dl-root-unified {
      grid-template-columns: 380px 1fr;
    }

    .dl-name-panel,
    .dl-list-panel,
    .dl-editor-panel {
      min-height: 0;
    }

    .dl-root-focus {
      grid-template-columns: 1fr;
      place-items: start center;
      padding: 24px;
    }

    .dl-panel-focus {
      width: min(980px, 100%);
      min-height: calc(100vh - 48px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 18px;
      background: linear-gradient(180deg, #fafbf9 0%, #f4f7f4 100%);
      border: 1px solid #d7e0d8;
      box-shadow: 0 10px 28px rgba(30, 52, 40, 0.07);
    }

    .dl-focus-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      border-bottom: 1px solid #e4e9f1;
      padding-bottom: 10px;
    }

    .dl-focus-head.compact {
      margin-bottom: 6px;
      padding-bottom: 6px;
      align-items: center;
    }

    .dl-name-summary {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: var(--fs-sm);
      color: #33415a;
      background: rgba(255, 255, 255, 0.66);
      border: 1px solid rgba(52,74,106,0.25);
      border-radius: 999px;
      padding: 5px 10px;
      white-space: nowrap;
    }

    .dl-focus-copy {
      min-width: 0;
    }

    .dl-focus-title {
      margin: 0;
      font-size: var(--fs-xl);
      color: #243447;
      letter-spacing: 0.02em;
    }

    .dl-focus-sub {
      margin: 6px 0 0;
      color: #33415a;
      font-size: var(--fs-md);
      line-height: 1.45;
    }

    .dl-focus-tools {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .dl-panel {
      background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.92) 100%);
      border-radius: 10px;
      padding: 12px;
      overflow-y: auto;
      box-shadow: 0 6px 16px rgba(23,32,46,0.08);
      border: 1px solid rgba(52,74,106,0.34);
    }

    .dl-search-panel,
    .dl-list-panel,
    .dl-editor-panel {
      min-height: 0;
    }

    .dl-list-panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .dl-editor-panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .dl-editor-tools {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 8px;
    }

    .dl-editor-tools-primary {
      display: grid;
      grid-template-columns: minmax(160px, 1fr) minmax(96px, 120px) minmax(88px, 132px) minmax(88px, 132px);
      gap: 8px;
      align-items: center;
    }

    .dl-editor-tools-actions {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }

    .dl-editor-tools-actions .dl-main-btn {
      width: 100%;
    }

    /* 特殊ギミックの小型コントロール（アクション用ボタングリッドの1マスに収める）。
       SP版 .mlb-gimmick-control と同型で、上段=小ラベル・下段=select。他ボタンと高さを揃える。 */
    .dl-gimmick-compact {
      display: grid;
      grid-template-rows: 11px 1fr;
      align-items: center;
      gap: 0;
      min-width: 0;
      box-sizing: border-box;
      padding: 2px 6px 3px;
      border: 1px solid #d7dee8;
      border-radius: 6px;
      background: rgba(255,255,255,0.84);
      color: #55637a;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
    }
    .dl-gimmick-compact select {
      width: 100%;
      min-width: 0;
      height: 21px;
      margin: 0;
      padding: 0 18px 0 4px;
      border: 0;
      border-radius: 4px;
      background-color: transparent;
      color: #243447;
      font-size: var(--fs-xs);
      font-weight: 600;
    }

    .dl-select {
      margin-bottom: 0;
      min-width: 160px;
    }

    /* デッキ選択リスト（PC）。行の右端に星を置くため、ネイティブの select は使わない
       （<option> の中にはボタンを置けない）。見た目は .dl-input に合わせる。 */
    .dl-deckpick { position: relative; min-width: 160px; }
    .dl-deckpick-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid #e4e9f1;
      border-radius: 6px;
      background: rgba(255,255,255,0.84);
      color: #243447;
      font-size: var(--fs-md);
      text-align: left;
      cursor: pointer;
    }
    .dl-deckpick-btn:hover { border-color: var(--accent); }
    .dl-deckpick-btn-label {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dl-deckpick-caret {
      flex: 0 0 auto;
      width: 0; height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--text-dim);
      transition: transform 0.15s;
    }
    .dl-deckpick.open .dl-deckpick-caret { transform: rotate(180deg); }
    .dl-deckpick-menu {
      position: absolute;
      z-index: 60;
      top: calc(100% + 4px);
      left: 0; right: 0;
      max-height: 340px;
      overflow-y: auto;
      padding: 4px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 10px 26px rgba(20,32,48,0.20);
    }
    .dl-deckpick-row { display: flex; align-items: stretch; border-radius: 6px; }
    .dl-deckpick-row:hover { background: #eef4fb; }
    .dl-deckpick-row.selected { background: #3b6ea5; }
    .dl-deckpick-pick {
      flex: 1 1 auto;
      min-width: 0;
      padding: 8px 10px;
      border: 0;
      background: none;
      color: #243447;
      font-size: var(--fs-md);
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dl-deckpick-row.selected .dl-deckpick-pick { color: #fff; }
    .dl-deckpick-row.is-new .dl-deckpick-pick { color: var(--accent); font-weight: 700; }
    /* 星: 未設定は淡いゴースト、設定済みは金色。行を選ばずトグルだけできる独立ボタン */
    .dl-deckpick-star {
      flex: 0 0 auto;
      width: 34px;
      border: 0;
      background: none;
      border-radius: 6px;
      color: #b6c0cc;
      font-size: 1.05rem;
      line-height: 1;
      cursor: pointer;
    }
    .dl-deckpick-star:hover { background: rgba(243,198,35,0.18); color: #d6a417; }
    .dl-deckpick-star.on { color: #f0b400; }
    .dl-deckpick-row.selected .dl-deckpick-star { color: rgba(255,255,255,0.72); }
    .dl-deckpick-row.selected .dl-deckpick-star.on { color: #ffd766; }
    .dl-deckpick-star-spacer { flex: 0 0 auto; width: 34px; }

    .dl-game-panel {
      font-size: var(--fs-md);
    }

    .dl-heading {
      margin-bottom: 10px;
      font-size: var(--fs-md);
      color: #243447;
    }

    .dl-heading-inline {
      margin: 0;
    }

    .dl-input {
      width: 100%;
      padding: 8px;
      border: 1px solid #e4e9f1;
      border-radius: 6px;
      margin-bottom: 10px;
      background: rgba(255,255,255,0.84);
      color: #243447;
      font-size: var(--fs-md);
    }

    .dl-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .dl-stack-tight {
      gap: 6px;
    }

    /* カード検索の絞り込み（文明・コスト範囲） */
    .dl-search-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .dl-search-targets,
    .mlb-search-targets {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      color: #33415a;
      font-size: 0.78rem;
      line-height: 1.2;
    }
    .dl-search-targets { margin: 0 0 10px; }
    .dl-search-targets-title,
    .mlb-search-targets-title { font-weight: 800; white-space: nowrap; }
    .dl-search-targets label,
    .mlb-search-targets label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      cursor: pointer;
    }
    .dl-search-targets input,
    .mlb-search-targets input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--secondary);
      cursor: pointer;
    }
    .dl-civ-checks {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      color: #33415a;
      font-size: 0.78rem;
    }
    .dl-civ-check {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      cursor: pointer;
      font-weight: 700;
    }
    .dl-civ-check input {
      width: 15px;
      height: 15px;
      margin: 0;
      accent-color: var(--secondary);
      cursor: pointer;
    }
    .dl-civ-exclude {
      display: flex;
      flex: 1 0 100%;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      color: #33415a;
      font-size: 0.78rem;
    }
    .dl-civ-exclude[hidden],
    .dl-civ-check[hidden] {
      display: none;
    }
    .dl-civ-exclude.is-opening {
      animation: dl-civ-exclude-open 0.16s ease-out;
    }
    @keyframes dl-civ-exclude-open {
      from { opacity: 0; transform: translateY(-4px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dl-civ-exclude.is-opening { animation: none; }
    }
    .dl-civ-exclude-label {
      flex: 1 0 100%;
      font-weight: 700;
    }
    .dl-civ-mode {
      width: auto;
      min-width: 96px;
      margin-bottom: 0;
    }
    .dl-filter-cost {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .dl-filter-cost .dl-cost-input {
      width: 52px;
      margin-bottom: 0;
      padding: 8px 6px;
      text-align: center;
    }
    .dl-cost-sep,
    .dl-cost-unit {
      color: #6b7688;
      font-size: 13px;
      white-space: nowrap;
    }

    /* 詳細フィルタ（種別・パワー・色数・能力・形態・種族・並び順） */
    .dl-adv-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid #c7d0de;
      border-radius: 6px;
      background: #f4f7fb;
      color: #33415a;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 6px 10px;
      cursor: pointer;
      margin-bottom: 10px;
    }
    .dl-adv-toggle:hover { background: #e9eef6; }
    .dl-adv-toggle.active { background: var(--secondary); border-color: var(--secondary); color: #fff; }
    .dl-adv-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 1px solid #dde4ee;
      border-radius: 8px;
      background: #f8fafd;
      padding: 8px;
      margin-bottom: 10px;
    }
    .dl-adv-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 10px;
      color: #33415a;
      font-size: 0.78rem;
    }
    .dl-adv-group-title {
      font-weight: 800;
      white-space: nowrap;
      min-width: 3.5em;
    }
    .dl-adv-check {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      cursor: pointer;
      font-weight: 700;
    }
    .dl-adv-check input {
      width: 15px;
      height: 15px;
      margin: 0;
      accent-color: var(--secondary);
      cursor: pointer;
    }
    .dl-adv-group .dl-race-input {
      flex: 1 1 140px;
      min-width: 120px;
      margin-bottom: 0;
      padding: 8px 6px;
    }
    .dl-adv-group .dl-sort-select {
      width: auto;
      min-width: 150px;
      margin-bottom: 0;
    }
    .dl-adv-reset {
      align-self: flex-start;
      border: 1px solid #c7d0de;
      border-radius: 6px;
      background: #fff;
      color: #6b7688;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 5px 10px;
      cursor: pointer;
    }
    .dl-adv-reset:hover { background: #f0f3f8; color: #33415a; }

    .dl-list-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .dl-inline-actions {
      display: flex;
      gap: 6px;
    }

    .dl-mini-btn {
      padding: 4px 10px;
      font-size: var(--fs-sm);
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .dl-mini-btn-online {
      background: var(--secondary);
      color: #fff;
      border: 1px solid var(--secondary-hover);
    }

    .dl-mini-btn-ghost {
      padding: 4px 8px;
      font-size: 0.75rem;
      background: rgba(255,255,255,0.6);
      color: #243447;
      border: 1px solid rgba(52,74,106,0.38);
    }

    .dl-main-btn {
      width: 100%;
      padding: 10px;
      background: var(--secondary);
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .dl-main-btn.dl-btn-accent { background: var(--accent); }
    .dl-main-btn.dl-btn-accent:hover:not(:disabled) { background: var(--accent-hover); }
    .dl-main-btn.dl-btn-secondary { background: var(--secondary); }
    .dl-main-btn.dl-btn-secondary:hover:not(:disabled) { background: var(--secondary-hover); }
    .dl-main-btn.dl-btn-trial { background: #607186; }
    .dl-main-btn.dl-btn-trial:hover:not(:disabled) { background: #4f6074; }
    .dl-main-btn.dl-btn-success { background: var(--success); }
    .dl-main-btn.dl-btn-success:hover:not(:disabled) { background: var(--success-hover); }
    .dl-main-btn.dl-btn-danger { background: var(--danger); }
    .dl-main-btn.dl-btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
    .dl-main-btn.dl-btn-neutral { background: var(--neutral); }
    .dl-main-btn.dl-btn-neutral:hover:not(:disabled) { background: var(--neutral-hover); }
    /* 削除: 破壊的操作なのでゴースト（danger枠＋文字）に降格し、保存より目立たせない */
    .dl-main-btn.dl-btn-ghost-danger {
      background: transparent;
      color: var(--danger);
      border: 1px solid var(--danger);
      font-weight: 600;
    }
    .dl-main-btn.dl-btn-ghost-danger:hover:not(:disabled) {
      background: rgba(200,85,85,0.10);
      color: var(--danger-hover);
      border-color: var(--danger-hover);
    }
    .dl-editor-tools .dl-main-btn.dl-btn-ghost-danger {
      padding: 7px 10px;
      font-size: var(--fs-xs);
    }
    .dl-main-btn.dl-btn-ghost-danger:disabled,
    .dl-main-btn.dl-btn-ghost-danger.disabled {
      background: transparent;
      color: #9eacb8;
      border-color: #cfd7e0;
    }

    .dl-editor-tools .dl-main-btn {
      width: auto;
      margin-bottom: 0;
      padding: 8px 12px;
      font-size: var(--fs-sm);
    }

    .dl-focus-tools .dl-main-btn {
      width: auto;
      margin-bottom: 0;
      padding: 8px 14px;
    }

    .dl-main-btn:disabled,
    .dl-main-btn.disabled {
      background: #9eacb8;
      color: #eef2f5;
      cursor: not-allowed;
      opacity: 0.75;
    }

    .dl-game-board {
      font-size: var(--fs-md);
    }

    .dl-empty-text {
      color: var(--text-dim);
    }

    .dl-deck-item {
      padding: 10px;
      background: rgba(255,255,255,0.66);
      border: 1px solid rgba(52,74,106,0.3);
      border-radius: 6px;
      transition: all 0.15s;
    }

    .dl-deck-item:hover {
      background: rgba(255,255,255,0.88);
    }

    .dl-deck-item.selected {
      border-color: rgba(31,116,179,0.58);
      box-shadow: inset 0 0 0 1px rgba(31,116,179,0.2);
      background: rgba(224,239,251,0.62);
    }

    .dl-deck-item.cloud {
      background: rgba(239,244,255,0.72);
      border-color: rgba(92,124,167,0.35);
    }

    .dl-deck-item.cloud:hover {
      background: rgba(235,244,255,0.95);
    }

    .dl-deck-name {
      font-weight: 600;
      font-size: var(--fs-md);
      color: #243447;
    }

    .dl-deck-meta {
      font-size: var(--fs-sm);
      color: #243447;
      margin: 4px 0;
    }

    .dl-item-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .dl-item-actions-cloud {
      margin-top: 6px;
    }

    .dl-item-btn {
      flex: 1;
      min-width: 60px;
      padding: 6px;
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      font-size: var(--fs-sm);
    }

    .dl-item-btn.edit { background: var(--secondary); }
    .dl-item-btn.play { background: var(--success); }
    .dl-item-btn.online { background: var(--secondary); }
    .dl-item-btn.delete { background: var(--danger); }

    /* デッキ一覧・グリッドの出現/ホバー演出 */
    @keyframes dlItemIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .dl-deck-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-2);
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

    .dl-grid-card {
      animation: dlItemIn var(--dur-normal) var(--ease-out) backwards;
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

    .dl-grid-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-2);
    }

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

    /* 文明構成バー（PC/SP共通） */
    .dl-civ-bar,
    .ml-civ-bar {
      display: flex;
      height: 4px;
      border-radius: 2px;
      overflow: hidden;
      margin-top: 6px;
    }

    .dl-civ-bar-seg,
    .ml-civ-bar-seg { min-width: 2px; }
    .dl-civ-bar-seg.fire,   .ml-civ-bar-seg.fire   { background: var(--civ-fire); }
    .dl-civ-bar-seg.water,  .ml-civ-bar-seg.water  { background: var(--civ-water); }
    .dl-civ-bar-seg.nature, .ml-civ-bar-seg.nature { background: var(--civ-nature); }
    .dl-civ-bar-seg.light,  .ml-civ-bar-seg.light  { background: var(--civ-light); }
    .dl-civ-bar-seg.dark,   .ml-civ-bar-seg.dark,
    .dl-civ-bar-seg.darkness, .ml-civ-bar-seg.darkness { background: var(--civ-dark); }
    .dl-civ-bar-seg.multi,  .ml-civ-bar-seg.multi  { background: var(--civ-multi); }

    /* 文明サマリー（デッキ名再表示ゾーンの置換）: 左=単色/多色/ゼロ、右=文明別。コンパクトに収める。 */
    .dl-civ-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 16px;
      margin-bottom: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(52,74,106,0.28);
      border-radius: 6px;
    }
    .dl-civ-sum-group {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }
    .dl-civ-sum-row {
      display: grid;
      grid-template-columns: 30px 1fr 36px;
      align-items: center;
      gap: 8px;
    }
    .dl-civ-sum-label {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: #445269;
      white-space: nowrap;
    }
    .dl-civ-sum-track {
      position: relative;
      height: 8px;
      border-radius: 4px;
      background: rgba(52,74,106,0.12);
      overflow: hidden;
    }
    .dl-civ-sum-fill {
      display: block;
      height: 100%;
      min-width: 0;
      border-radius: 4px;
      transition: width .25s var(--ease-out);
    }
    .dl-civ-sum-num {
      font-family: var(--font-num);
      font-size: var(--fs-xs);
      color: #55637a;
      text-align: right;
      white-space: nowrap;
    }
    .dl-civ-sum-fill.mono   { background: #5b6b83; }
    .dl-civ-sum-fill.multi  { background: var(--civ-multi); }
    .dl-civ-sum-fill.shield-trigger { background: #e09b36; }
    .dl-civ-sum-fill.g-strike { background: #b85c91; }
    .dl-civ-sum-fill.light  { background: var(--civ-light); }
    .dl-civ-sum-fill.water  { background: var(--civ-water); }
    .dl-civ-sum-fill.dark   { background: var(--civ-dark); }
    .dl-civ-sum-fill.fire   { background: var(--civ-fire); }
    .dl-civ-sum-fill.nature { background: var(--civ-nature); }

    /* 40枚ちょうど到達時のカウンタフラッシュ */
    @keyframes dlCountFlash {
      0%   { box-shadow: 0 0 0 0 var(--accent); }
      40%  { box-shadow: 0 0 0 4px var(--accent); }
      100% { box-shadow: 0 0 0 0 transparent; }
    }

    .dl-count-flash {
      animation: dlCountFlash 0.6s var(--ease-out);
      border-radius: 4px;
    }

    .dl-search-item {
      padding: 8px;
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(52,74,106,0.26);
      border-radius: 4px;
      font-size: var(--fs-sm);
      transition: all 0.15s;
    }

    .dl-search-item:hover {
      background: rgba(255,255,255,0.94);
    }

    .dl-search-name {
      font-weight: 600;
      color: #243447;
    }

    .dl-search-text {
      color: #33415a;
      font-size: 0.75rem;
      margin-top: 2px;
      line-height: 1.35;
    }

    .dl-search-actions {
      margin-top: 4px;
      display: flex;
      gap: 6px;
    }

    .dl-detail-btn,
    .dl-add-btn {
      flex: 1;
      width: auto;
      padding: 5px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.75rem;
      font-weight: 700;
    }

    .dl-detail-btn {
      background: #7f8f9c;
      color: #fff;
    }

    .dl-add-btn {
      background: #2f77af;
      color: #fff;
    }

    /* デッキ名/カウント/文明バーを1段にインライン化して縦を節約 */
    .dl-edit-summary {
      margin-bottom: 8px;
      padding: 6px 10px;
      background: rgba(255,255,255,0.72);
      border-radius: 6px;
      border: 1px solid rgba(52,74,106,0.28);
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .dl-edit-title {
      font-weight: 600;
      font-size: var(--fs-md);
      color: #243447;
      white-space: nowrap;
    }

    .dl-edit-stats {
      font-size: var(--fs-sm);
      color: #243447;
      line-height: 1.3;
      white-space: nowrap;
    }

    /* インライン化に伴い文明バーは幅を固定して行内に収める */
    .dl-edit-summary .dl-civ-bar {
      flex: 1 1 120px;
      min-width: 100px;
      max-width: 260px;
      margin-top: 0;
      height: 8px;
    }

    .dl-edit-stats strong {
      font-family: var(--font-num);
      letter-spacing: 0.02em;
    }

    .dl-editor-card-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-right: 4px;
    }

    .dl-empty-editor {
      color: #33415a;
      font-size: var(--fs-md);
      line-height: 1.5;
      padding: 10px;
      border: 1px dashed rgba(52,74,106,0.42);
      border-radius: 8px;
      background: rgba(255,255,255,0.55);
    }

    .dl-card-grid > .dl-empty-editor {
      grid-column: 1 / -1;
    }

    .dl-card-grid-wrap {
      margin-top: 6px;
      border-top: 1px solid rgba(52,74,106,0.22);
      padding-top: 6px;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }

    .dl-card-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      align-content: start;
      gap: 6px;
      flex: none;
      padding-right: 4px;
      /*
       * メイン40枚(8列×5行)をPCフルスクでスクロールなしに収める。
       * 1行の高さ = カード幅 / 0.72。利用可能な縦を5行に配分するためグリッド幅に上限を
       * 掛けて列を細くする（中央寄せ）。控除する 404px の内訳（1920幅で実測）:
       *   グリッド上端までのオーバーヘッド 339px + 行間ギャップ 4*6=24px + 余白 ~41px。
       * これによりグリッド下端 ≒ 100vh - 24 に収まり、スクロール枠内に5行が全て入る。
       */
      max-width: calc(((100vh - 404px) / 5 * 0.72) * 8 + 42px);
      margin: 0 auto;
      width: 100%;
    }
    /* PCデッキ管理: メインを広く、超次元/GRを右列へ縦積みする。 */
    .dl-deck-zone-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(250px, 26%);
      gap: 14px;
      align-items: start;
      min-width: 0;
    }
    .dl-main-zone,
    .dl-side-zones,
    .dl-side-zone {
      min-width: 0;
    }
    .dl-side-zones {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-left: 14px;
      border-left: 1px solid rgba(52,74,106,0.22);
    }
    .dl-card-grid-main {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      max-width: calc(((100vh - 360px) / 5 * 0.72) * 8 + 42px);
    }
    /* 右列の超次元(最大8=4列×2行) / GR(最大12=4列×3行)。 */
    .dl-card-grid-ex {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      margin: 0;
      max-width: none;
    }
    .dl-grid-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }
    .dl-grid-section-head .dl-heading { margin-bottom: 0; }
    .dl-zone-head { margin: 0 0 4px; }
    /* 各ゾーン見出しの枚数表示（見出しより一回り小さく、太字・グレー系）。 */
    .dl-zone-count {
      font-family: var(--font-num);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #5b6b80;
      letter-spacing: 0.02em;
    }
    /* デッキ見出しでは枚数の直後に auto マージンで「コスト順に整列」ボタンを右端へ寄せる。 */
    .dl-grid-section-head .dl-zone-count { margin-right: auto; }

    .dl-grid-card {
      position: relative;
      border-radius: 8px;
      border: 1px solid rgba(52,74,106,0.22);
      background: rgba(255,255,255,0.74);
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(23,32,46,0.1);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .dl-grid-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(23,32,46,0.16);
    }
    .dl-grid-draggable { cursor: grab; }
    .dl-grid-draggable:active { cursor: grabbing; }
    .dl-grid-clickarea { display: block; }
    .dl-grid-remove {
      position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
      border: none; border-radius: 50%; background: rgba(150, 60, 40, 0.85); color: #fff;
      font-size: var(--fs-sm); font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .dl-grid-remove:hover { background: rgba(170, 55, 35, 0.95); }

    .dl-grid-thumb {
      width: 100%;
      aspect-ratio: 0.72;
      object-fit: cover;
      display: block;
      background: #f4f6fa;
    }

    .dl-grid-thumb.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #33415a;
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.04em;
      background: linear-gradient(145deg, #f4f6fa 0%, #e8edf4 100%);
    }

    .dl-edit-card {
      padding: 8px;
      background: rgba(255,255,255,0.74);
      border: 1px solid rgba(52,74,106,0.24);
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .dl-edit-card-main {
      flex: 1;
      min-width: 0;
      cursor: pointer;
    }

    .dl-edit-card-main:hover .dl-edit-card-name {
      text-decoration: underline;
    }

    .dl-edit-card-name {
      font-weight: 600;
      font-size: var(--fs-md);
      color: #243447;
      margin-bottom: 2px;
    }

    .dl-edit-card-text {
      font-size: var(--fs-xs);
      color: #33415a;
      line-height: 1.35;
      word-break: break-word;
    }

    .dl-count-controls {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-shrink: 0;
    }

    .dl-count-btn {
      width: 24px;
      height: 24px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: var(--fs-sm);
      color: #fff;
    }

    .dl-count-btn.minus,
    .dl-count-btn.delete { background: var(--danger); }
    .dl-count-btn.plus { background: var(--success); font-weight: 700; }

    .dl-count-num {
      width: 24px;
      text-align: center;
      font-weight: 600;
      font-size: var(--fs-md);
      color: #243447;
      font-family: var(--font-num);
      letter-spacing: 0.02em;
    }

    .dl-civ-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }

    .dl-civ-item {
      padding: 8px;
      background: rgba(255,255,255,0.68);
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      color: #243447;
      border: 1px solid rgba(52,74,106,0.22);
    }

    .dl-civ-empty {
      color: #33415a;
      font-size: var(--fs-md);
      padding: 8px;
      border-radius: 6px;
      background: rgba(255,255,255,0.6);
      border: 1px dashed rgba(52,74,106,0.32);
    }

    .dl-civ-name,
    .dl-civ-count {
      font-size: var(--fs-md);
    }

    .dl-side-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .dl-side-btn {
      width: 100%;
      padding: 12px;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
    }

    .dl-side-btn.play { background: var(--success); }
    .dl-side-btn.save { background: var(--secondary); }
    .dl-side-btn.cloud { background: var(--secondary); }
    .dl-side-btn.back { background: #33415a; }
    .dl-side-btn.disabled { background: #bcc7cf; cursor: not-allowed; opacity: 0.75; }

    .dl-cloud-quick {
      margin-top: 10px;
      border-top: 1px solid rgba(52,74,106,0.24);
      padding-top: 10px;
    }

    .dl-cloud-title {
      font-size: var(--fs-sm);
      color: #33415a;
      margin-bottom: 6px;
    }

    .dl-cloud-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .dl-cloud-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 6px;
      border: 1px solid rgba(93,126,165,0.25);
      background: rgba(236,244,255,0.75);
    }

    .dl-cloud-name {
      color: #2f425a;
      font-size: var(--fs-sm);
      font-weight: 600;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dl-cloud-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    /* Desktop online lobby（レイアウト正本。配色・書体は後方の「V3 warm theme override」の同名定義が上書きし、実表示はライト） */
    .dol-root {
      display: grid;
      grid-template-columns: minmax(240px, 280px) minmax(320px, 1fr) minmax(240px, 280px);
      gap: 12px;
      height: 100vh;
      padding: 12px;
      background: radial-gradient(circle at 52% 10%, rgba(199,149,82,0.35) 0%, rgba(26,35,50,0.06) 28%), linear-gradient(118deg, #18334e 0%, #1a2d42 45%, #4e2a32 100%);
      color: #f4f6fa;
      font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif;
      overflow: auto;
    }

    .dol-panel {
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
    }

    .dol-owner {
      background: linear-gradient(180deg, rgba(33,65,98,0.96) 0%, rgba(24,45,72,0.96) 100%);
      border: 1px solid rgba(137,170,198,0.45);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
      gap: 12px;
    }

    .dol-center {
      background: linear-gradient(180deg, rgba(59,110,165,0.95) 0%, rgba(59,110,165,0.94) 100%);
      border: 1px solid rgba(255,229,187,0.7);
      box-shadow: inset 0 0 0 1px rgba(23,32,46,0.2);
      color: #243447;
      gap: 12px;
    }

    .dol-guest {
      background: linear-gradient(180deg, rgba(76,39,48,0.95) 0%, rgba(55,30,36,0.95) 100%);
      border: 1px solid rgba(224,168,175,0.4);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    .dol-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dol-owner .dol-badge-title,
    .dol-guest .dol-badge-title {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 1.6px;
    }

    .dol-owner .dol-badge-title { color: #a6d2ff; }
    .dol-guest .dol-badge-title { color: #ffcad2; }

    .dol-owner .dol-badge-sub,
    .dol-guest .dol-badge-sub {
      font-size: 0.74rem;
    }

    .dol-owner .dol-badge-sub { color: #d0e8ff; }
    .dol-guest .dol-badge-sub { color: #ffdbe0; }

    .dol-profile {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      background: rgba(0,0,0,0.18);
      border: 1px solid rgba(160,194,224,0.35);
      border-radius: 8px;
    }

    /* Older cached lobby scripts may still create this element. */
    .dol-avatar { display: none; }

    .dol-grow {
      flex: 1;
      min-width: 0;
    }

    .dol-label {
      font-size: 0.74rem;
      color: #9bbad8;
      margin-bottom: 4px;
    }

    .dol-label-owner {
      font-size: 0.76rem;
      margin-bottom: 6px;
    }

    .dol-input,
    .dol-select {
      width: 100%;
      border: 1px solid rgba(175,204,231,0.45);
      border-radius: 6px;
      font-size: 0.9rem;
      color: #f2f7ff;
      background: rgba(8,18,30,0.46);
      outline: none;
    }

    .dol-input { padding: 8px 10px; }
    .dol-select { padding: 9px; font-size: 0.86rem; }

    .dol-owner-actions {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .dol-owner-btn {
      padding: 9px;
      border-radius: 8px;
      font-size: 0.82rem;
      cursor: pointer;
    }

    .dol-owner-btn.back {
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(173,200,224,0.45);
      color: #e2f3ff;
    }

    .dol-owner-btn.logout {
      background: rgba(160,52,65,0.24);
      border: 1px solid rgba(255,179,186,0.48);
      color: #ffd8dd;
    }

    .dol-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }

    .dol-head-kicker {
      font-size: 0.76rem;
      letter-spacing: 1.8px;
      color: #243447;
    }

    .dol-head-title {
      font-size: 0.96rem;
      font-weight: 700;
      color: #161f2b;
    }

    .dol-copy-btn {
      padding: 6px 10px;
      background: var(--secondary);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 0.76rem;
      cursor: pointer;
    }

    .dol-room-card {
      padding: 10px 12px;
      background: rgba(255,255,255,0.64);
      border: 1px solid rgba(52,74,106,0.35);
      border-radius: 8px;
    }

    .dol-room-label {
      font-size: 0.72rem;
      color: #243447;
      margin-bottom: 4px;
    }

    .dol-room-code {
      font-size: 2rem;
      letter-spacing: 0.16em;
      font-weight: 700;
      color: #161f2b;
      line-height: 1;
    }

    .dol-stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .dol-stat-box {
      padding: 8px;
      background: rgba(255,255,255,0.58);
      border: 1px solid rgba(52,74,106,0.35);
      border-radius: 8px;
    }

    .dol-stat-label {
      font-size: 0.74rem;
      color: #243447;
    }

    .dol-stat-value {
      font-size: 0.95rem;
      font-weight: 700;
    }

    .dol-create-btn {
      width: 100%;
      padding: 14px;
      background: var(--secondary);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(10,45,72,0.26);
    }

    .dol-create-btn.is-waiting {
      opacity: 0.72;
      cursor: default;
    }

    .dol-cancel-btn {
      display: none;
      width: 100%;
      padding: 10px;
      background: rgba(131,61,69,0.14);
      color: #712f37;
      border: 1px solid rgba(131,61,69,0.35);
      border-radius: 8px;
      font-size: 0.84rem;
      cursor: pointer;
    }

    .dol-cancel-btn.open {
      display: block;
    }

    /* 準備室（入室後: デッキ選択・先攻選択・準備完了） */
    .dol-ready-opponent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.6);
      border: 1px solid rgba(52,74,106,0.26);
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .dol-ready-opp-status {
      font-size: 0.78rem;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(52,74,106,0.12);
      color: #344a6a;
      white-space: nowrap;
    }

    .dol-ready-opp-status.is-ready {
      background: rgba(31,122,77,0.16);
      color: #1f7a4d;
      font-weight: 700;
    }

    .dol-ready-deck {
      margin-bottom: 10px;
    }

    .dol-first-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      margin-bottom: 12px;
      font-size: 0.82rem;
      color: #243447;
    }

    .dol-first-options label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    .dol-create-btn.is-ready {
      background: rgba(31,122,77,0.85);
    }

    .dol-status {
      margin-top: auto;
      padding: 10px;
      background: rgba(255,255,255,0.68);
      border-radius: 8px;
      border: 1px solid rgba(52,74,106,0.26);
      font-size: 0.8rem;
      color: #243447;
      line-height: 1.4;
    }

    .dol-opponent-card {
      padding: 10px;
      background: rgba(0,0,0,0.2);
      border: 1px solid rgba(244,198,205,0.38);
      border-radius: 8px;
    }

    .dol-opponent-label {
      font-size: 0.72rem;
      color: #dcb5ba;
      margin-bottom: 4px;
    }

    .dol-opponent-name {
      font-size: 0.95rem;
      color: #fff3f5;
    }

    .dol-room-entry-label {
      font-size: 0.76rem;
      color: #dcb5ba;
      margin-bottom: 6px;
    }

    .dol-room-input {
      width: 100%;
      padding: 10px;
      border: 1px solid rgba(244,198,205,0.4);
      border-radius: 6px;
      font-size: 1.05rem;
      letter-spacing: 0.36em;
      text-transform: uppercase;
      color: #fff3f5;
      background: rgba(0,0,0,0.22);
    }

    .dol-join-btn {
      padding: 11px;
      background: linear-gradient(180deg, #2f7aab 0%, #1f5a83 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
    }

    .dol-guest-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 2px;
    }

    .dol-ghost-action {
      padding: 9px;
      background: rgba(255,255,255,0.1);
      color: #ffeff1;
      border: 1px solid rgba(244,198,205,0.4);
      border-radius: 8px;
      font-size: 0.78rem;
      cursor: pointer;
    }

    .dol-note {
      margin-top: auto;
      font-size: 0.76rem;
      color: #e6c4c9;
      line-height: 1.45;
    }

    /* Fixed 50-room online lobby */
    .dol-root.dol-fixed-lobby {
      grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    }

    .dol-lobby-settings,
    .dol-room-browser {
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(59,110,165,0.45);
      color: #243447;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 24px rgba(23,32,46,0.1);
    }

    .dol-room-browser {
      overflow: hidden;
    }

    .dol-lobby-guide {
      padding: 10px;
      border: 1px solid rgba(52,74,106,0.24);
      border-radius: 8px;
      background: rgba(236,244,255,0.72);
      color: #33415a;
      font-size: 0.78rem;
      line-height: 1.5;
    }

    .dol-lobby-guide-title {
      margin-bottom: 4px;
      color: #243447;
      font-weight: 700;
    }

    .dol-refresh-btn {
      padding: 7px 12px;
      border: 1px solid rgba(52,74,106,0.42);
      border-radius: 7px;
      background: #f7f9fc;
      color: #243447;
      cursor: pointer;
      font-weight: 600;
    }

    .dol-refresh-btn:disabled {
      cursor: wait;
      opacity: 0.65;
    }

    .dol-room-summary {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 14px;
      color: #40536b;
      font-size: 0.75rem;
    }

    .dol-room-summary > span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .dol-current-room {
      margin-left: auto;
      padding: 5px 9px;
      border-radius: 999px;
      background: #e8eef6;
      color: #243447;
      font-weight: 700;
    }

    .dol-legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #8794a5;
    }

    .dol-legend-dot.empty { background: #4f9a67; }
    .dol-legend-dot.waiting { background: #3277b7; }
    .dol-legend-dot.private { background: #a8752a; }
    .dol-legend-dot.playing { background: #707b89; }

    .dol-room-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
      gap: 7px;
      min-height: 0;
      overflow-y: auto;
      padding: 3px 4px 8px 3px;
      scrollbar-gutter: stable;
    }

    .dol-room-tile {
      min-height: 66px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: 1px solid #9aa9ba;
      border-radius: 8px;
      background: #f6f8fb;
      color: #243447;
      cursor: pointer;
      transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }

    .dol-room-tile.empty {
      border-color: rgba(56,134,82,0.52);
      background: rgba(226,246,232,0.74);
    }

    .dol-room-tile.waiting {
      border-color: rgba(41,111,174,0.58);
      background: rgba(226,239,252,0.84);
    }

    .dol-room-tile.waiting.private {
      border-color: rgba(168,117,42,0.68);
      background: rgba(250,240,221,0.9);
    }

    .dol-room-tile.playing,
    .dol-room-tile.unknown {
      border-color: rgba(100,112,126,0.38);
      background: #e7ebf0;
      color: #677383;
    }

    .dol-room-tile:not(:disabled):hover,
    .dol-room-tile:not(:disabled):focus-visible,
    .dol-room-tile.selected {
      border-color: #243447;
      box-shadow: 0 0 0 2px rgba(59,110,165,0.22);
      transform: translateY(-1px);
      outline: none;
    }

    .dol-room-tile:disabled {
      cursor: not-allowed;
      opacity: 0.72;
    }

    .dol-room-number {
      font-size: 0.78rem;
      font-weight: 700;
    }

    .dol-room-state {
      font-size: 0.68rem;
    }

    .dol-room-host {
      max-width: 100%;
      overflow: hidden;
      color: #53657b;
      font-size: 0.65rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dol-room-selection {
      min-height: 104px;
      padding: 10px 12px;
      border: 1px solid rgba(52,74,106,0.28);
      border-radius: 9px;
      background: rgba(246,249,252,0.96);
    }

    .dol-selection-title {
      margin-bottom: 7px;
      font-weight: 700;
      color: #243447;
    }

    .dol-selection-note {
      margin-bottom: 8px;
      color: #53657b;
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .dol-privacy-options {
      display: flex;
      gap: 16px;
      margin-bottom: 8px;
      font-size: 0.82rem;
    }

    .dol-privacy-options label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    .dol-password-wrap {
      display: grid;
      grid-template-columns: auto minmax(150px, 280px);
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: #40536b;
      font-size: 0.78rem;
    }

    .dol-password-wrap[hidden] { display: none; }

    .dol-password-input {
      width: min(100%, 320px);
      padding: 9px 10px;
      border: 1px solid rgba(52,74,106,0.42);
      border-radius: 7px;
      background: #fff;
      color: #243447;
    }