/* V5: desktop board row layout */
    .dg-full-root.dg-v2 {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      /* ライト卓面: シェルより一段深い寒色グラデ＋極薄ノイズ＋ビネット */
      background: var(--table-noise), var(--table-vignette), var(--table-bg);
    }

    /* 画面に収まらないときは fitDesktopBoard() が実寸を広げて等倍縮小する。
       ウィンドウ左上を原点に固定し、はみ出した分でページスクロールが出ないようにする。 */
    .dg-full-root.dg-v2.dg-fit-scaled {
      position: fixed;
      top: 0;
      left: 0;
      transform-origin: top left;
      will-change: transform;
    }

    .dg-v2-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-bottom: 1px solid var(--border);
      background: rgba(248, 250, 253, 0.96);
      box-shadow: 0 2px 8px rgba(23,32,46, 0.09);
      backdrop-filter: blur(6px);
      z-index: 40;
      flex-wrap: wrap;
    }

    .dg-v2-head-left {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .dg-v2-match {
      font-size: 0.75rem;
      font-weight: 600;
      color: #33415a;
    }

    /* 手番状態を主、T/手/マナのpillを従に整理する（色は既存定義を継承し、サイズ・順序のみ調整） */
    .dg-v2-head-left .dg-turn-pill {
      order: 2;
      font-size: var(--fs-xs);
      padding: 3px 9px;
      font-weight: 600;
    }

    .dg-v2-head-left .dg-full-state {
      order: 1;
      font-size: var(--fs-md);
      font-weight: 800;
      padding: 5px 14px;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-1);
    }

    .dg-v2-head-left .dg-full-state.mine {
      border-color: var(--success);
      background: var(--success);
      color: #fff;
    }

    .dg-v2-head-left .dg-full-state.opponent {
      border-color: var(--secondary);
      background: var(--secondary);
      color: #fff;
    }

    .dg-v2-head-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
    }

    .dg-v2-head-actions .dg-btn {
      flex: 0 0 auto;
      border-radius: var(--radius-sm);
      min-height: 26px;
      padding: 3px 7px;
      min-width: 0;
      font-size: var(--fs-xs);
      font-weight: 700;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
      transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }

    /* 主ボタン: ターン終了。ヘッダー内で最も目立つ操作にする */
    .dg-v2-head-actions .dg-btn.end {
      order: 1;
      min-height: 34px;
      padding: 7px 20px;
      font-size: var(--fs-md);
      font-weight: 800;
      letter-spacing: 0.02em;
      border-radius: var(--radius-md);
      background: var(--success);
      box-shadow: var(--shadow-2), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
    }

    .dg-v2-head-actions .dg-btn.end:hover {
      background: var(--success-hover);
      box-shadow: var(--shadow-3), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
    }

    /* 中間: やり直し。主ボタンより控えめ、戻るよりは押しやすい */
    .dg-v2-head-actions .dg-btn.undo {
      order: 2;
      min-height: 28px;
      padding: 4px 12px;
      font-size: var(--fs-xs);
      font-weight: 700;
      background: var(--neutral);
    }

    .dg-v2-head-actions .dg-btn.undo:hover {
      background: var(--neutral-hover);
    }

    /* 降格: 戻る。破壊的操作だが誤爆を避けたいので控えめなゴースト表示にする */
    .dg-v2-head-actions .dg-btn.back {
      order: 3;
      min-height: 24px;
      padding: 3px 10px;
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--danger);
      background: transparent;
      border: 1px solid var(--danger);
      box-shadow: none;
      margin-left: 4px;
    }

    .dg-v2-head-actions .dg-btn.back:hover {
      background: var(--danger);
      color: #fff;
      box-shadow: var(--shadow-1);
    }

    /* ─── 操作ドック: 手札行の右端（盤面右下）に主操作を集約 ─── */
    .dg-v2-dock {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 6px;
      border-radius: var(--radius-md);
      background: rgba(248, 250, 253, 0.7);
      border: 1px solid var(--table-line);
    }
    .dg-v2-dock .dg-btn {
      flex: 0 0 auto;
      border-radius: var(--radius-sm);
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
      transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }
    /* やり直し: 主ボタンの左に控えめ */
    .dg-v2-dock .dg-btn.undo {
      min-height: 30px;
      padding: 4px 12px;
      font-size: var(--fs-xs);
      font-weight: 700;
      background: var(--neutral);
    }
    .dg-v2-dock .dg-btn.undo:hover { background: var(--neutral-hover); }
    .dg-v2-dock .dg-btn.restart {
      min-height: 30px;
      padding: 4px 10px;
      font-size: var(--fs-xs);
      font-weight: 700;
      background: #5d6b7d;
    }
    .dg-v2-dock .dg-btn.restart:hover { background: #4d5969; }
    /* ターン終了: 主役。熱源色オレンジ・白文字・44px */
    .dg-v2-dock .dg-btn.end {
      min-height: 44px;
      padding: 8px 24px;
      font-size: var(--fs-md);
      font-weight: 800;
      letter-spacing: 0.02em;
      border-radius: var(--radius-md);
      background: var(--accent);
      color: #fff;
      box-shadow: var(--shadow-2), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
    }
    .dg-v2-dock .dg-btn.end:hover {
      background: var(--accent-hover);
      box-shadow: var(--shadow-3), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
    }
    .dg-v2-dock .dg-btn.end:disabled {
      background: #b9c1cd;
      color: #eef2f6;
      box-shadow: none;
      cursor: default;
      animation: none;
    }
    /* 自分の手番: ターン終了に控えめなパルス */
    .dg-v2-dock.my-turn .dg-btn.end,
    .dg-v2-dock.solo-turn .dg-btn.end {
      animation: dgEndPulse 1.8s var(--ease-out) infinite;
    }
    @keyframes dgEndPulse {
      0%, 100% { box-shadow: var(--shadow-2), inset 0 -2px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(244, 96, 12, 0.0); }
      50%      { box-shadow: var(--shadow-2), inset 0 -2px 0 rgba(0, 0, 0, 0.16), 0 0 0 5px rgba(244, 96, 12, 0.28); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dg-v2-dock .dg-btn.end { animation: none !important; }
    }
    /* 相手の手番: ドック減光＋ラベル */
    .dg-v2-dock.opp-turn { opacity: 0.75; }
    .dg-v2-dock-label {
      font-size: var(--fs-xs);
      font-weight: 800;
      color: var(--secondary);
      white-space: nowrap;
      padding: 0 2px;
    }

    .dg-v2-body {
      flex: 1;
      min-height: 0;
      display: flex;
      overflow: hidden;
    }

    /* 盤面はスクロールさせない（fitDesktopBoard() が必ず画面内へ収める）。
       hidden は端数1px対策で、実質的なはみ出しは自動スケール側で解消する。 */
    .dg-v2-board {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: hidden;
      padding: 5px 10px 5px 6px;
      gap: 3px;
      scrollbar-width: thin;
      scrollbar-color: rgba(52,74,106, 0.3) transparent;
    }

    .dg-v2-hint {
      flex-shrink: 0;
      background: #ffffff;
      border: 1px solid #e4e9f1;
      border-radius: 6px;
      padding: 3px 10px;
      font-size: var(--fs-xs);
      font-weight: 700;
      color: #243447;
      text-align: center;
    }

    .dg-v2-row {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* ゾーンラベルチップ: 地色は付けず文字だけ整える（ゾーン名=table-label / 枚数=text） */
    .dg-v2-label {
      flex-shrink: 0;
      width: 42px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--table-label);
      text-align: center;
      line-height: 1.3;
    }

    .dg-v2-label b {
      font-size: var(--fs-md);
      font-weight: 700;
      letter-spacing: 0;
      color: var(--text);
      font-family: var(--font-num);
    }

    /* 疑似対戦: 公開状態トグル（自分シールド一括/相手手札/相手シールド）の目アイコンボタン。
       絵文字は使わずSVG（desktopEyeIconSvg）を currentColor で描画してテーマ色に追従させる。 */
    .dg-v2-eye-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      margin-top: 3px;
      padding: 0;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: var(--table-label);
      opacity: 0.75;
      cursor: pointer;
    }
    .dg-v2-eye-btn:hover { opacity: 1; background: rgba(52, 74, 106, 0.1); }
    .dg-v2-eye-btn.on { color: var(--accent); opacity: 1; }

    .dg-v2-cards {
      flex: 1;
      min-width: 0;
      align-self: stretch;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 4px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
      scrollbar-color: rgba(52,74,106, 0.3) transparent;
      padding: 3px 6px;
      border-radius: 7px;
      border: 1px solid var(--table-line);
      box-sizing: border-box;
      background: var(--table-well);
    }

    .dg-v2-row.opp-mana,
    .dg-v2-row.my-mana,
    .dg-v2-row.opp-shield,
    .dg-v2-row.my-shield { flex: 0.8; }

    /* ─── オンライン/VS モード: 行固定高さ ─── */
    /* 対戦モード: 全ゾーン行を均等に伸ばして盤面を埋める（空の欄もカード高で表示） */
    /* min-height は「潰れ防止の下限」。縦が足りない画面では行が縮んで全ゾーンが
       画面内に収まるよう低めに取り、通常の画面ではflex配分の方が大きくなるので見た目は不変。 */
    .dg-v2:not(.dg-v2-solo) .dg-v2-row {
      flex: 1 1 0;
      min-height: 68px;
      border-radius: 6px;
    }
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.my-battle,
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-battle {
      flex: 1.45 1 0;
      min-height: 88px;
    }

    /* 相手ゾーンの back-card に明示的な高さ（aspect-ratio だけでは collapse する） */
    .dg-v2 .dg-back-card {
      height: 96px;
      flex-shrink: 0;
    }

    /* ゾーン行の背景で視覚的な区分けを強化（卓面のくぼみとして--table-well系へ） */
    /* 相手側=わずかに寒色、自分側=暖色。マナ/シールドは行tintを持たず、内側の.dg-v2-cellsで色を出す */
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-hand,
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-battle {
      background: var(--table-well-opp);
    }
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.my-hand,
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.my-battle {
      background: var(--table-well);
    }
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-shield,
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.my-shield {
      background: var(--table-well-shield);
    }
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-mana,
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.my-mana {
      background: var(--table-well-mana);
    }
    /* 上=相手 / 下=自分 の境界を卓上の罫線で明示（相手バトル行の下辺を太めに） */
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-battle {
      border-bottom: 2px solid var(--table-line);
    }

    /* ソロモード: バトルゾーンだけ伸長、他は固定高さ */
    .dg-v2-solo .dg-v2-row {
      flex: 0 0 auto;
    }
    .dg-v2-solo .dg-v2-row.my-battle {
      flex: 1;
      min-height: 134px;
    }
    .dg-v2-solo .dg-v2-row.my-shield,
    .dg-v2-solo .dg-v2-row.my-mana {
      height: 124px;
    }
    .dg-v2-solo .dg-v2-row.my-hand {
      height: 124px;
    }
    /* ソロモード: 手札/シールド/マナは同寸(80/112)、バトルは主役化して拡大 */
    .dg-v2-solo .dg-card-chip.hand {
      width: 80px;
      height: 112px;
    }
    .dg-v2-solo .dg-card-chip.battle {
      width: 90px;
      height: 126px;
    }
    .dg-v2-solo .dg-card-chip.shield,
    .dg-v2-solo .dg-card-chip.mana {
      width: 80px;
      height: 112px;
    }
    /* 対戦モード: カードを行の高さいっぱいに（行の大きさに追従して視認性UP） */
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.hand,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.mana,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.shield {
      height: calc(100% - 4px);
      width: auto;
      aspect-ratio: 0.72;
      flex-shrink: 0;
    }
    .dg-v2:not(.dg-v2-solo) .dg-back-card {
      height: calc(100% - 4px);
      width: auto;
      aspect-ratio: 0.72;
      flex-shrink: 0;
    }

    /* ==== タップ回転: スロット幅アニメ + ボディ実寸 (盤面モード別) ==== */
    /* ソロモード: 固定px。ボディはカード原寸、タップ時スロット幅=カード縦 */
    .dg-v2-solo .dg-card-chip.battle .dg-card-body { width: 90px; height: 126px; }
    .dg-v2-solo .dg-card-chip.mana .dg-card-body { width: 80px; height: 112px; }
    .dg-v2-solo .dg-card-chip.battle .dg-under-peek-layer { width: 90px; height: 126px; }
    .dg-v2-solo .dg-card-chip.mana .dg-under-peek-layer { width: 80px; height: 112px; }
    .dg-v2-solo .dg-card-chip.battle.tapped { width: 126px; }
    .dg-v2-solo .dg-card-chip.battle.field-card { width: 126px; }
    .dg-v2-solo .dg-card-chip.mana.tapped { width: 112px; }
    /* 対戦モード: 動的サイズ。ボディはカード比率(0.72)を保持、タップ時スロットは正方相当 */
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle .dg-card-body,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.mana .dg-card-body {
      width: auto;
      height: 100%;
      aspect-ratio: 0.72;
    }
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle .dg-under-peek-layer,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.mana .dg-under-peek-layer {
      width: auto;
      height: 100%;
      aspect-ratio: 0.72;
    }
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle.tapped,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.mana.tapped {
      aspect-ratio: 1/1;
    }
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle.field-card { aspect-ratio: 1/1; }

    /* PC疑似対戦ではバトル行の広さだけを確保し、カード本体は他ゾーンと同寸にする。
       実寸は画面ごとに変わるため、他ゾーンの実測値を --dg-vs-battle-card-h として
       fitDesktopBoard() が渡す（未設定時は従来式にフォールバック）。 */
    .dg-v2.dg-v2-vs .dg-card-chip.battle {
      height: min(calc(100% - 4px), var(--dg-vs-battle-card-h, calc(69% - 2px)));
    }
    .dg-v2.dg-v2-vs .dg-card-chip.battle .dg-card-body {
      height: 100%;
    }

    /* G・リンクは構成カードを1体分のチップ内で横につなげて表示する。 */
    .dm-g-link-body {
      display: grid;
      grid-template-columns: repeat(var(--dm-link-cols), minmax(0, 1fr));
      align-items: stretch;
      justify-items: stretch;
      background: transparent;
    }
    .dm-g-link-body .dm-g-link-part {
      width: 100%;
      height: 100%;
      min-width: 0;
      object-fit: contain;
      border-radius: 0;
    }
    .dm-g-link-body .dm-g-link-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3px;
      background: linear-gradient(145deg, #f4f6fa, #dce4ef);
      color: #243447;
      font-size: .55rem;
      font-weight: 800;
      text-align: center;
    }
    /* 構成カードの境目を1本の線で見せる（1体だが何枚のリンクかを読めるように） */
    .dm-g-link-body .dm-g-link-part + .dm-g-link-part {
      box-shadow: inset 1px 0 0 rgba(36, 52, 71, 0.35);
    }
    .dg-v2-solo .dg-card-chip.battle.dm-g-link-composite {
      width: calc(90px * var(--dm-link-cols));
    }
    .dg-v2-solo .dg-card-chip.battle.dm-g-link-composite .dg-card-body {
      width: calc(90px * var(--dm-link-cols));
    }
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle.dm-g-link-composite,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle.dm-g-link-composite .dg-card-body {
      aspect-ratio: calc(var(--dm-link-cols) * 5) / 7;
    }
    /* 幅がカードN枚分になるので、行が詰まっても潰さない（潰すと絵が読めなくなる） */
    .dg-card-chip.battle.dm-g-link-composite { flex-shrink: 0; }
    /* タップの表現。1体まるごと90度回すと全長がカードN枚分になり、行の高さへ
       収めるには絵が読めない大きさまで縮むので、構成カードをその場で横倒しにする。
       スロットは1枚のタップと同じ考え方で「カード横→カード縦」に広げる（N枚分）。 */
    .dg-card-chip.battle.tapped.dm-g-link-composite .dg-card-body {
      transform: translate(-50%, -50%);
    }
    .dg-card-chip.battle.tapped.dm-g-link-composite .dm-g-link-part {
      transform: rotate(90deg);
    }
    .dg-card-chip.opponent.battle.tapped.dm-g-link-composite .dg-card-body {
      transform: translate(-50%, -50%) rotate(180deg);
    }
    .dg-v2-solo .dg-card-chip.battle.tapped.dm-g-link-composite,
    .dg-v2-solo .dg-card-chip.battle.tapped.dm-g-link-composite .dg-card-body {
      width: calc(126px * var(--dm-link-cols));
    }
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle.tapped.dm-g-link-composite,
    .dg-v2:not(.dg-v2-solo) .dg-card-chip.battle.tapped.dm-g-link-composite .dg-card-body {
      aspect-ratio: calc(var(--dm-link-cols) * 1) / 1;
    }

    .dg-v2-row.opp-mana .dg-v2-cards,
    .dg-v2-row.my-mana .dg-v2-cards {
      background: var(--table-well-mana);
      border-color: var(--table-line);
    }

    .dg-v2-row.opp-shield .dg-v2-cards,
    .dg-v2-row.my-shield .dg-v2-cards {
      background: var(--table-well-shield);
      border-color: var(--table-line);
    }

    /* シールド/マナ行の上下paddingを詰め、浮いた縦余裕をバトルゾーンへ回す
       （手札行のカードサイズ・行高は不変。バトルの主役化のみを目的とする） */
    .dg-v2-row.opp-shield .dg-v2-cards,
    .dg-v2-row.my-shield .dg-v2-cards,
    .dg-v2-row.opp-mana .dg-v2-cards,
    .dg-v2-row.my-mana .dg-v2-cards {
      padding-top: 1px;
      padding-bottom: 1px;
    }

    .dg-v2-row.opp-battle .dg-v2-cards,
    .dg-v2-row.my-battle .dg-v2-cards {
      background: var(--table-well);
      border-color: var(--table-line);
      border-style: dashed;
    }

    .dg-v2-row.opp-battle .dg-v2-cards {
      background: var(--table-well-opp);
    }

    .dg-v2-row.my-revealed .dg-v2-cards {
      background: rgba(255,255,255, 0.85);
      border-color: var(--table-line);
    }

    /* 対戦開始時特殊ギミック。盤面カードと同じく実画像を使い、BZの横幅を占有しない。 */
    .dg-gimmick {
      position: relative;
      flex: 0 0 auto;
      align-self: stretch;
      height: 100%;
      max-height: 118px;
      min-height: min(76px, 100%); /* 行が縮んだ画面でも行からはみ出さない */
      margin-right: 8px;
      color: #fff;
      isolation: isolate;
      order: -1;
      margin-left: 0;
    }
    .dg-gimmick-stage { position: absolute; inset: 0 0 13px; }
    /* 実体になったギミック（禁断解放・禁断爆発・零龍卍誕）の攻撃ボタン。画像の上に重ねる */
    .dg-gimmick-attack {
      position: absolute;
      z-index: 6;
      left: 50%;
      bottom: 4px;
      transform: translateX(-50%);
      padding: 2px 12px;
      border: 0;
      border-radius: 9px;
      background: #b4232a;
      color: #fff;
      font-family: inherit;
      font-size: .66rem;
      font-weight: 900;
      line-height: 1.4;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .dg-gimmick-attack:hover { background: #d22b33; }
    .dg-gimmick img { display: block; object-fit: contain; }
    .dg-gimmick img.placeholder,
    .dg-gimmick .placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #252a32;
      color: #cbd3dd;
      padding: 4px;
      color: #fff;
      font-size: 0.56rem;
      font-weight: 800;
      line-height: 1.25;
      text-align: center;
      word-break: break-all;
    }
    .dg-gimmick-phase {
      position: absolute;
      left: 50%;
      bottom: 0;
      z-index: 8;
      max-width: calc(100% - 4px);
      transform: translateX(-50%);
      padding: 1px 5px;
      border: 1px solid rgba(255,255,255,0.34);
      border-radius: 999px;
      background: rgba(24,29,37,0.88);
      color: #fff;
      font-size: 0.62rem;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
      pointer-events: none;
    }
    .dg-gimmick-visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .dg-gimmick-dokindam { width: 104px; min-width: 104px; }
    .dg-gimmick-core {
      position: absolute;
      left: 4px;
      top: 0;
      height: 100%;
      width: auto;
      aspect-ratio: 650/908;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.34);
    }
    .dg-gimmick-seal {
      border: 0;
      font-family: inherit;
    }
    .dg-gimmick-seal-stack {
      position: absolute;
      right: 0;
      top: 50%;
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transform: translateY(-50%);
      padding: 4px;
      border-radius: 5px;
      background: rgba(25,29,36,0.9);
      color: #fff;
      cursor: pointer;
    }
    .dg-gimmick-seal-back {
      width: 29px;
      height: 40px;
      border: 1px solid #f5f7fa;
      border-radius: 3px;
      background: var(--card-back-image), #342c27;
      background-size: cover;
      box-shadow: -3px 2px 0 #685b50, -6px 4px 0 #3b332e;
    }
    .dg-gimmick-seal-stack b { font-size: 0.62rem; white-space: nowrap; }

    /* 通常カードの封印も、数バッジだけでなく裏向きカードそのものを重ねて示す。 */
    .dg-card-seal-cover {
      position: absolute;
      right: 1px;
      top: 1px;
      z-index: 28;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      pointer-events: none;
      transform: rotate(5deg);
    }
    .dg-card-seal-cover .dm-card-seal-back {
      display: block;
      width: 27px;
      height: 38px;
      border: 2px solid #fff;
      border-radius: 3px;
      background: var(--card-back-image), #342c27;
      background-size: cover;
      box-shadow: -3px 2px 0 rgba(38,31,27,.82), 0 2px 5px rgba(0,0,0,.55);
    }
    .dg-card-seal-cover b {
      padding: 1px 4px;
      border: 1px solid #fff;
      border-radius: 9px;
      background: #332d27;
      color: #fff;
      font-size: .62rem;
      font-weight: 900;
      line-height: 1.2;
      white-space: nowrap;
    }

    .dg-gimmick-dolmageddon { width: 148px; }
    .dg-dolmageddon-art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.36));
    }
    .dg-gimmick-dolmageddon.is-exploded .dg-dolmageddon-art {
      left: 50%;
      right: auto;
      width: auto;
      transform: translateX(-50%);
    }
    .dg-dolmageddon-seal {
      position: absolute;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      padding: 0;
      border: 2px solid #f6f7f9;
      border-radius: 50%;
      background: var(--card-back-image), #302a26;
      background-size: cover;
      color: #fff;
      font: 900 0.56rem/1 var(--font-num);
      text-shadow: 0 1px 2px #000;
      box-shadow: 0 1px 4px rgba(0,0,0,0.55);
      cursor: pointer;
    }
    .dg-dolmageddon-seal-1 { left: 3px; top: 2px; }
    .dg-dolmageddon-seal-2 { right: 3px; top: 2px; }
    .dg-dolmageddon-seal-3 { left: 3px; bottom: 2px; }
    .dg-dolmageddon-seal-4 { right: 3px; bottom: 2px; }

    .dg-gimmick-zero { width: 128px; }
    .dg-zero-core {
      position: absolute;
      left: 50%;
      top: 0;
      z-index: 3;
      height: 48%;
      width: auto;
      transform: translateX(-50%);
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.42);
    }
    .dg-zero-piece {
      position: absolute;
      z-index: 2;
      display: block;
      height: 48%;
      width: auto;
      aspect-ratio: 650/910;
      padding: 0;
      border: 1px solid rgba(190,205,230,0.88);
      border-radius: 4px;
      background: #161c28;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.4);
      cursor: pointer;
    }
    .dg-zero-piece-1 { left: 0; top: 0; }
    .dg-zero-piece-2 { right: 0; top: 0; }
    .dg-zero-piece-3 { left: 17%; bottom: 0; }
    .dg-zero-piece-4 { right: 17%; bottom: 0; }
    .dg-zero-ritual-art { width: 100%; height: 100%; object-fit: contain !important; }
    .dg-zero-piece.is-linked { border-color: #43c985; box-shadow: 0 0 0 1px #43c985, 0 0 7px rgba(67,201,133,0.75); }
    .dg-zero-status {
      position: absolute;
      right: 1px;
      bottom: 1px;
      min-width: 14px;
      padding: 1px 2px;
      border-radius: 3px;
      background: rgba(20,25,34,0.88);
      color: #dbe3ee;
      font-size: 0.48rem;
      font-weight: 900;
      line-height: 1.1;
    }
    .dg-zero-piece.is-linked .dg-zero-status { background: #238656; color: #fff; }
    .dg-zero-born-art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.38));
    }

    .dg-v2-sep {
      flex-shrink: 0;
      height: 3px;
      margin: 1px 0;
      background: linear-gradient(90deg, transparent 3%, var(--table-line) 15%, var(--table-line) 85%, transparent 97%);
      border-radius: 2px;
    }

    /* ─── 盤面行の中央max-width（左右に卓面--table-bgを見せる） ─── */
    /* フルHDでも左右の死に領域を作らず、広げた横幅をバトルゾーンに回す。
       狭い画面(94vw未満)は margin:auto が効かず従来どおり全幅。行内構造は不変 */
    /* 自動スケール中はレイアウト実寸が 1/スケール 倍に広がるため、
       画面基準(vw)の上限も同じだけ割り戻して見た目の幅を保つ。 */
    .dg-v2-board > .dg-v2-row,
    .dg-v2-board > .dg-v2-sep,
    .dg-v2-board > .dg-v2-hint {
      width: 100%;
      max-width: calc(min(1600px, 94vw) / var(--dg-fit-scale, 1));
      margin-left: auto;
      margin-right: auto;
    }

    /* ─── 空ゾーンのプレート化（卓に印刷されたゾーン枠＋透かし） ─── */
    /* .dg-v2-cards を満たし、内側に破線枠、中央にゾーン名透かしを描く。
       操作（クリック/ドロップ）は親に残すため pointer-events:none / user-select:none */
    .dg-zone-plate {
      flex: 1;
      align-self: stretch;
      position: relative;
      margin: 2px;
      border: 1.5px dashed var(--table-line);
      border-radius: var(--radius-md);
      pointer-events: none;
      user-select: none;
    }
    .dg-zone-plate::before {
      content: attr(data-zone-label);
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--table-label);
      opacity: 0.45;
      font-weight: 700;
      font-size: var(--fs-md);
      letter-spacing: 0.18em;
    }

    /* ─── 相手/自分の境界帯（対戦モードのみ。soloは相手行が無いので出ない） ─── */
    /* opp-battle 行下辺の境界線上に小さなVSタグを載せる。高さ増は最小限 */
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-battle {
      position: relative;
      margin-bottom: 9px;
    }
    .dg-v2:not(.dg-v2-solo) .dg-v2-row.opp-battle::after {
      content: 'VS';
      position: absolute;
      left: 50%;
      bottom: -9px;
      transform: translate(-50%, 50%);
      z-index: 3;
      padding: 1px 10px;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: var(--table-label);
      background: var(--table-chip);
      border: 1px solid var(--table-line);
      border-radius: 999px;
      pointer-events: none;
      user-select: none;
    }

    /* My pile: clickable buttons — card-sized, fixed dimensions */
    .dg-v2-pile-btn {
      flex-shrink: 0;
      width: 54px;
      /* 行が縮んだ画面でも行内に収める（山札/墓地/超次元が隣の行へはみ出さない） */
      height: min(76px, calc(100% - 4px));
      position: relative;
      border: 1px solid var(--table-line);
      border-radius: 7px;
      background: var(--table-chip);
      color: var(--text);
      padding: 3px 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
      transition: transform 0.1s;
      overflow: hidden;
      text-align: center;
    }

    .dg-v2-pile-btn:hover {
      transform: translateY(-1px);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(23,32,46, 0.15);
    }

    .dg-v2-pile-btn.grave {
      background: var(--table-chip);
    }

    .dg-v2-pile-btn.deck {
      background-image: var(--card-back-image);
      background-size: cover;
      background-position: center;
      padding: 0;
    }

    .dg-v2-pile-btn.deck .dg-v2-pile-name { display: none; }

    .dg-v2-pile-btn.deck .dg-v2-pile-cnt,
    .dg-v2-pile-btn.has-image .dg-v2-pile-cnt {
      position: absolute;
      bottom: 3px;
      right: 3px;
      background: rgba(0,0,0,0.65);
      color: #fff;
      border-radius: 3px;
      padding: 1px 4px;
      font-size: var(--fs-xs);
      font-weight: 800;
      line-height: 1;
    }

    .dg-v2-pile-btn.has-image {
      padding: 0;
    }

    .dg-v2-pile-btn.has-image .dg-v2-pile-name { display: none; }

    .dg-v2-pile-btn.ex {
      background: var(--table-chip);
      border-color: rgba(109, 84, 148, 0.35);
      color: #5d4a7d;
    }

    /* 対戦画面 右ログ欄: 卓面上に浮くパネル */
    .dg-side-log {
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 1 1 auto;
      background: var(--table-chip);
      border: 1px solid var(--table-line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-1);
      padding: 8px 8px 6px;
    }
    .dg-side-log .dg-chat-title {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--table-label);
      margin-bottom: 5px;
    }
    .dg-side-log-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-right: 2px;
      scrollbar-width: thin;
    }
    /* ログは下端に寄せ、新しいものが一番下・古いものが上へ流れる（あふれたらスクロール可） */
    .dg-side-log-list > :first-child { margin-top: auto; }
    .dg-side-log-entry {
      font-size: var(--fs-xs);
      line-height: 1.35;
      color: #243447;
      padding: 2px 4px;
      border-bottom: 1px solid rgba(52,74,106, 0.12);
      word-break: break-word;
    }
    /* 3階層: 自分=濃色ボーダー強調 / 相手=淡色 / システム=小さく中央寄せ */
    .dg-side-log-entry.log-self {
      color: #1c2838;
      font-weight: 600;
      border-left: 2px solid var(--table-line);
      padding-left: 6px;
    }
    .dg-side-log-entry.log-opp {
      color: #6a7889;
      border-left: 2px solid transparent;
      padding-left: 6px;
    }
    .dg-side-log-entry.log-sys {
      color: #8a97a7;
      font-size: 0.6rem;
      text-align: center;
      border-bottom-color: transparent;
      letter-spacing: 0.04em;
    }
    .dg-side-log-empty {
      color: #5d6b7d;
      font-size: var(--fs-xs);
      padding: 4px;
    }
    /* 超次元/GR パイルのモーダル内 移動ボタン */
    .dm-ex-item-actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
    .dm-ex-act {
      border: 1px solid #d8dfe9;
      background: #ffffff;
      color: #243447;
      border-radius: 5px;
      padding: 4px 7px;
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: pointer;
    }
    .dm-ex-act:hover { background: #f4f6fa; }
    .dm-ex-act.red { color: var(--danger); border-color: #d8b3bb; }

    /* シールド ブレイクモーダル */
    .dm-break-modal { position: fixed; inset: 0; z-index: 3200; display: none; align-items: center; justify-content: center; }
    .dm-break-modal.open { display: flex; }
    .dm-break-backdrop { position: absolute; inset: 0; background: rgba(23,32,46, 0.45); }
    .dm-break-body {
      position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
      box-sizing: border-box; width: min(92vw, 920px); max-height: 92dvh; overflow: auto;
      box-shadow: 0 16px 40px rgba(23,32,46, 0.3); padding: 18px 22px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .dm-break-head { font-size: var(--fs-md); font-weight: 700; color: #243447; text-align: center; }
    .dm-break-select-tools { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
    .dm-break-select-tools button {
      border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; background: #fff;
      color: #33415a; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
    }
    .dm-break-selected-count { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
    .dm-break-cards { display: flex; width: 100%; gap: 12px; flex-wrap: wrap; justify-content: center; }
    .dm-break-card {
      position: relative;
      width: 120px; aspect-ratio: 5/7; border-radius: 8px; border: 1px solid #d8dfe9; background: #f4f6fa;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 8px rgba(23,32,46,0.18);
    }
    .dm-break-card.selected { outline: 4px solid #f5a623; outline-offset: 2px; box-shadow: 0 3px 10px rgba(23,32,46,0.22), 0 0 0 5px rgba(245,166,35,0.22); }
    .dm-break-card.pending-gs { outline: 4px solid #2572ad; outline-offset: 2px; box-shadow: 0 3px 10px rgba(23,32,46,0.22), 0 0 0 5px rgba(37,114,173,0.22); }
    .dm-break-card.pending-trigger { outline: 4px solid #dc2626; outline-offset: 2px; box-shadow: 0 3px 10px rgba(23,32,46,0.22), 0 0 0 5px rgba(220,38,38,0.22); }
    .dm-break-card.pending-hand { outline: 4px solid #16a34a; outline-offset: 2px; box-shadow: 0 3px 10px rgba(23,32,46,0.22), 0 0 0 5px rgba(22,163,74,0.22); }
    .dm-break-card.has-break-ability::before {
      content: ""; position: absolute; z-index: 1; inset: 0; border: 4px solid #dc2626;
      border-radius: 7px; pointer-events: none;
    }
    .dm-break-card.has-gs::before { border-color: #2572ad; }
    .dm-break-card.has-st.has-gs::before { border-color: #7c3aed; }
    .dm-break-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .dm-break-card-img.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #edf2f7;
      color: #617588;
      font-size: 0.58rem;
      font-weight: 800;
    }
    .dm-break-order-toggle {
      position: absolute; z-index: 2; top: -10px; right: -10px; width: 34px; height: 34px;
      border: 3px solid #fff; border-radius: 50%; background: #687487; color: #fff; font-weight: 900;
      cursor: pointer; box-shadow: 0 4px 12px rgba(23,32,46,.35);
      display: grid; place-items: center; font-size: .95rem; line-height: 1; pointer-events: none;
    }
    .dm-break-card.selected .dm-break-order-toggle { background: #f5a623; color: #2a1c00; }
    .dm-break-card.pending-gs .dm-break-order-toggle { background: #2572ad; }
    .dm-break-card.pending-trigger .dm-break-order-toggle { background: #dc2626; }
    .dm-break-card.pending-hand .dm-break-order-toggle { background: #16a34a; }
    .dm-break-menu-btn {
      position: absolute; z-index: 3; top: -9px; left: -9px; width: 28px; height: 28px;
      border: 2px solid #fff; border-radius: 50%; background: #33415a; color: #fff; font-weight: 900;
      cursor: pointer; box-shadow: 0 3px 8px rgba(23,32,46,.28);
      display: grid; place-items: center; font-size: .95rem; line-height: 1; padding: 0;
    }
    .dm-break-menu-btn:hover, .dm-break-menu-btn:focus { background: #1f2a3a; outline: none; }
    .dm-break-ability-badges {
      position: absolute; z-index: 4; left: 4px; right: 4px; bottom: 4px;
      display: flex; justify-content: center; align-items: flex-end; gap: 3px; flex-wrap: wrap;
      pointer-events: none;
    }
    .dm-break-ability-badge {
      max-width: 100%; box-sizing: border-box; padding: 2px 5px; border: 1px solid #fff;
      border-radius: 999px; color: #fff; font-size: .56rem; font-weight: 900; line-height: 1.15;
      text-align: center; white-space: normal; overflow-wrap: anywhere;
      box-shadow: 0 2px 7px rgba(23,32,46,.38);
    }
    .dm-break-ability-badge.st { background: #b91c1c; }
    .dm-break-ability-badge.gs { background: #1d5f96; }
    .dm-aura-badge {
      position: absolute; z-index: 9; left: -5px; bottom: -7px; padding: 2px 6px;
      border: 1px solid #fff; border-radius: 999px; background: #6d3ca4; color: #fff;
      font-size: .62rem; font-weight: 900; box-shadow: 0 2px 7px rgba(23,32,46,.28);
      pointer-events: none;
    }
    .dm-cross-name-badge {
      right: -5px; z-index: 30; max-width: calc(100% + 10px); box-sizing: border-box; border-radius: 7px;
      text-align: center; white-space: normal; overflow-wrap: anywhere;
    }
    /* オーラ名は1行に収め、下端のパワー表示に重ねない（SPの小さなカードを覆わない）。全文は詳細欄で読む */
    .dm-aura-name-badge {
      left: 0; right: 0; bottom: 18px; z-index: 30; max-width: 100%; box-sizing: border-box; border-radius: 7px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dg-card-chip:has(> .dm-cross-name-badge),
    .mg-card-chip:has(> .dm-cross-name-badge) {
      overflow: visible;
    }
    .dm-break-pending-summary {
      display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
      color: #33415a; font-size: var(--fs-xs); font-weight: 700;
    }
    .dm-break-pending-tag { padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; font-weight: 800; }
    .dm-break-pending-tag.gs { background: #eaf3fb; border-color: #2572ad; color: #184f87; }
    .dm-break-pending-tag.trigger { background: #fdecec; border-color: #dc2626; color: #a11a3f; }
    .dm-break-pending-tag.hand { background: #eaf7ec; border-color: #16a34a; color: #145a2b; }
    .dm-break-foot { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .dm-break-foot-run { display: grid; width: 100%; margin-top: 4px; }
    .dm-break-btn { min-width: 0; border: none; border-radius: 7px; padding: 10px 12px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; cursor: pointer; color: #fff; }
    .dm-break-btn:disabled { opacity: .42; cursor: not-allowed; }
    .dm-break-btn.back { background: #5d6b7d; }
    .dm-break-btn.grave { background: #33415a; }
    .dm-break-btn.gs { background: #2572ad; }
    .dm-break-btn.trigger { background: #dc2626; }
    .dm-break-btn.hand { background: #16a34a; }
    .dm-break-btn.run { background: #f59e0b; color: #2a1c00; padding: 12px 14px; font-size: var(--fs-md); box-shadow: 0 6px 16px rgba(245,158,11,0.32); }
    .dm-break-btn.run:disabled { background: #c9ced7; color: #fff; opacity: 1; box-shadow: none; }

    /* カード効果の自動処理: アカウントメニューのトグルと告知 */
    .account-menu-badge {
      margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: #f0a020; color: #fff;
      font-size: var(--fs-xs); font-weight: 800; vertical-align: middle;
    }
    .account-menu-toggle-list { display: grid; gap: 8px; }
    .account-menu-toggle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
    .account-menu-toggle-label { min-width: 0; font-weight: 700; color: #243447; }
    .account-menu-switch {
      min-width: 96px; border: 1px solid #b8c2d0; border-radius: 999px; padding: 5px 10px 5px 6px;
      display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
      background: #eef1f5; color: #536174; font: inherit; font-weight: 800; cursor: pointer;
    }
    .account-menu-switch-track {
      width: 34px; height: 20px; flex: 0 0 auto; padding: 2px; box-sizing: border-box;
      display: flex; align-items: center; border-radius: 999px; background: #98a3b2;
      transition: background .15s ease;
    }
    .account-menu-switch-thumb {
      width: 16px; height: 16px; border-radius: 50%; background: #fff;
      box-shadow: 0 1px 3px rgba(23,32,46,.28); transform: translateX(0);
      transition: transform .15s ease;
    }
    .account-menu-switch.on { border-color: #2f7d4f; background: #e9f6ee; color: #1f673f; }
    .account-menu-switch.on .account-menu-switch-track { background: #2f8a59; }
    .account-menu-switch.on .account-menu-switch-thumb { transform: translateX(14px); }
    .account-menu-toggle-state { min-width: 2em; font-weight: 900; text-align: center; }
    .dm-effect-notice-text { text-align: left; }
    .dm-effect-notice-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .dm-effect-notice-btns button {
      border: 0; border-radius: 9px; padding: 11px 8px; font-weight: 800; cursor: pointer;
      font-size: var(--fs-xs); line-height: 1.3; white-space: normal; word-break: break-word;
    }
    .dm-effect-notice-btns .off { background: #eef1f6; color: #41506a; }
    .dm-effect-notice-btns .on { background: var(--success); color: #fff; }
    /* 告知は小さな帯。報告スレッドへの導線は文字リンク程度に抑える */
    #dm-effect-notice-modal .dm-effect-notice-body { gap: 8px; padding: 12px 14px; width: min(calc(100vw - 32px), 520px); }
    #dm-effect-notice-modal .dm-effect-title { font-size: var(--fs-sm); }
    .dm-effect-notice-btns button { padding: 9px 8px; }
    .dm-effect-notice-link {
      justify-self: center; border: 0; background: none; padding: 2px 4px; cursor: pointer;
      color: #3f6ea8; font-size: var(--fs-xs); font-weight: 700; text-decoration: underline;
    }

    /* 不具合報告スレッド */
    /* 告知から開けるため、告知モーダル(3730)より前面に置く。
       告知を閉じずに重ねることで、読んだあと告知の選択へ戻れる。 */
    #dm-feedback-modal { z-index: 3740; }
    .dm-feedback-body { width: min(94vw, 560px); }
    .dm-feedback-form { display: grid; gap: 8px; }
    .dm-feedback-form input, .dm-feedback-form textarea {
      width: 100%; box-sizing: border-box; border: 1px solid #ccd4e0; border-radius: 8px;
      padding: 9px 10px; font-size: var(--fs-sm); font-family: inherit; line-height: 1.5;
    }
    .dm-feedback-form textarea { resize: vertical; }
    .dm-feedback-submit { border: 0; border-radius: 9px; padding: 10px; font-weight: 800; cursor: pointer; background: var(--success); color: #fff; }
    .dm-feedback-submit[disabled] { opacity: .5; cursor: default; }
    .dm-feedback-list { display: grid; gap: 8px; }
    .dm-feedback-post { border: 1px solid #e2e7f0; border-left: 3px solid #98a6bd; border-radius: 8px; padding: 9px 10px; background: #fbfcfe; }
    .dm-feedback-post-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-xs); color: #6b7789; }
    .dm-feedback-post-no { font-weight: 800; color: #41506a; }
    .dm-feedback-post-name { font-weight: 800; color: #243447; }
    .dm-feedback-post-body { margin-top: 5px; font-size: var(--fs-sm); color: #243447; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
    .dm-feedback-more { background: #eef1f6; color: #41506a; }
    .dm-feedback-more[hidden] { display: none; }

    /* カード効果の実行候補モーダル（PC/SP共通） */
    .dm-effect-modal { position: fixed; inset: 0; z-index: 3730; display: none; place-items: center; }
    .dm-effect-modal.open { display: grid; }
    /* 攻撃バー(3750)・処理中バー(3760)はこのモーダルより前面なので、開いている帯の
       実測高（--dm-modal-bar-lift）ぶん本文を上へ逃がす。逃がさないとSP横持ち(844x390)で
       攻撃バーが「効果の処理を終える」を覆って押せなくなる（攻撃タップで on_tap も
       誘発するようになり遭遇率が上がっている）。PCは帯が届かないので実質0px。 */
    #dm-effect-proposal-modal { padding-bottom: var(--dm-modal-bar-lift, 0px); }
    /* 本文が縮むぶん一覧はスクロールになる。スクロールするのは見出し＋提案一覧だけにして、
       退路（「効果の処理を終える」）は常に本文の下端へ残す
       （break-choiceモーダルと同じ作法。スクロールに巻き込むと画面外へ出て手が届かない）。 */
    #dm-effect-proposal-modal .dm-effect-body {
      max-height: calc(86vh - var(--dm-modal-bar-lift, 0px));
      overflow: hidden; display: flex; flex-direction: column; gap: 12px;
    }
    #dm-effect-proposal-modal .dm-effect-scroll {
      overflow: auto; min-height: 0; display: grid; gap: 12px; align-content: start;
    }
    #dm-effect-proposal-modal .dm-effect-foot { flex: 0 0 auto; }
    .dm-effect-backdrop { position: absolute; inset: 0; background: rgba(23,32,46,.52); backdrop-filter: blur(2px); }
    .dm-effect-body {
      position: relative; width: min(94vw, 460px); max-height: 86vh; overflow-y: auto;
      background: #fff; border-radius: 14px; padding: 16px; display: grid; gap: 12px;
      box-shadow: 0 18px 44px rgba(16,24,40,.28);
    }
    /* プレリリース告知は「遅れて出る」ため、どの画面へ被っても操作を塞がない帯にする。
       暗幕を持たず、帯の外側はそのまま操作できる（対戦中もデッキ編集中も詰まらない）。
       さらに、モーダル類(3400〜3760)より低い層へ置いて、後から開いたダイアログの
       ボタンを帯が覆わないようにする（帯自体も外側タップで閉じる）。 */
    #dm-effect-notice-modal { z-index: 2400; }
    #dm-effect-notice-modal.open { display: block; pointer-events: none; }
    #dm-effect-notice-modal .dm-effect-body {
      pointer-events: auto;
      position: absolute;
      left: 50%;
      bottom: max(10px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      max-height: min(60vh, 420px);
      border: 1px solid #dde3ec;
      box-shadow: 0 14px 40px rgba(16,24,40,.32);
    }
    /* 更新内容（パッチノート）。長い時は一覧だけスクロールし、「閉じる」は下端に残す */
    #dm-patch-notes-modal .dm-effect-body { overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
    #dm-patch-notes-modal .dm-effect-scroll { overflow: auto; min-height: 0; display: grid; gap: 8px; align-content: start; }
    #dm-patch-notes-modal .dm-effect-foot { flex: 0 0 auto; }
    .dm-patch-notes-release { margin-top: 8px; padding-bottom: 2px; border-bottom: 1px solid #d6dde6; font-size: var(--fs-sm); font-weight: 800; color: #475569; }
    .dm-patch-notes-release:first-child { margin-top: 0; }
    .dm-patch-notes-section { margin-top: 4px; font-size: var(--fs-sm); font-weight: 800; color: #243447; }
    .dm-patch-notes-items { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--fs-sm); color: #243447; line-height: 1.5; }
    .dm-effect-title { text-align: center; font-size: var(--fs-md); font-weight: 800; color: #243447; }
    .dm-effect-note { font-size: var(--fs-xs); color: #5d6b80; text-align: center; line-height: 1.5; }
    .dm-effect-list { display: grid; gap: 10px; }
    .dm-effect-item {
      border: 1px solid #dde3ec; border-radius: 10px; padding: 10px; display: grid; gap: 8px;
      background: #fbfcfe;
    }
    .dm-effect-item.done { opacity: .5; }
    /* 解決ルール5/6: 同じ能力の中は上から順。先行が未処理の間は待ち状態と分かるようにする */
    .dm-effect-item.locked { opacity: .72; border-style: dashed; }
    /* 見出しは本文の句。任意／強制の区別を見出しの横に並べる */
    .dm-effect-item-head { display: flex; align-items: flex-start; gap: 8px; }
    .dm-effect-item-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 800; color: #243447; line-height: 1.45; }
    .dm-effect-item-mode {
      flex: 0 0 auto; border-radius: 999px; padding: 2px 8px; font-size: var(--fs-xs); font-weight: 800; line-height: 1.4;
      border: 1px solid transparent;
    }
    .dm-effect-item-mode.optional { background: #eaf3ff; color: #235b91; border-color: #b9d3ef; }
    .dm-effect-item-mode.forced { background: #fff1e3; color: #9a4f08; border-color: #f0cfa8; }
    .dm-effect-item-meta { font-size: var(--fs-xs); color: #6b7789; line-height: 1.5; }
    .dm-effect-item-cond { color: #a4650f; font-weight: 700; }
    .dm-effect-item-done { color: #2f7d32; font-weight: 700; }
    /* 実行手段が無い提案は「実行する」を出さないので、ボタンが1つでも幅が余らないようにする */
    .dm-effect-item-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
    .dm-effect-item-btns button {
      border: 0; border-radius: 8px; padding: 9px 8px; font-weight: 800; cursor: pointer;
      font-size: var(--fs-xs); line-height: 1.3; white-space: normal; word-break: break-word;
    }
    .dm-effect-item-btns .run { background: var(--success); color: #fff; }
    .dm-effect-item-btns .skip { background: #eef1f6; color: #41506a; }
    .dm-effect-item-btns button[disabled] { opacity: .45; cursor: default; }
    .dm-effect-foot { display: grid; gap: 8px; }
    .dm-effect-runall { border: 0; border-radius: 9px; padding: 10px; font-weight: 800; cursor: pointer; background: var(--success); color: #fff; }
    .dm-effect-runall[hidden] { display: none; }
    .dm-effect-close { border: 0; border-radius: 9px; padding: 10px; font-weight: 800; cursor: pointer; background: #687487; color: #fff; }
    .dm-effect-peek { border: 0; border-radius: 9px; padding: 10px; font-weight: 800; cursor: pointer; background: #3f6ea8; color: #fff; }
    .dm-board-peek-corner {
      position: absolute; z-index: 3; top: 10px; right: 10px; border: 1px solid #9ab5d3;
      border-radius: 999px; padding: 5px 9px; background: #edf5ff; color: #235b91;
      font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; cursor: pointer;
    }
    #dm-effect-proposal-modal .dm-effect-title,
    #dm-break-choice-modal .dm-break-choice-title,
    #dm-declare-choice-modal .dm-break-choice-title { padding-inline: 66px; }
    @media (max-width: 520px) {
      .dm-effect-body { width: min(96vw, 460px); padding: 13px; }
    }

    /* 攻撃バー(3750)・処理中バー(3760)は常に前面にあるので、開いている帯の実測高
       （--dm-modal-bar-lift）ぶん本文を上へ逃がす
       （逃がさないとSP横持ちで帯がボタンを覆い、モードを選べなくなる）。 */
    .dm-break-choice-modal {
      position: fixed; inset: 0; z-index: 3720; display: none; place-items: center;
      padding-bottom: var(--dm-modal-bar-lift, 0px);
    }
    .dm-break-choice-modal.open { display: grid; }
    /* 候補一覧の右上に置く小さな操作（「順番を自動選択」→「解決する」） */
    .dm-choice-corner-row { display: flex; justify-content: flex-end; }
    .dm-choice-corner-row:empty { display: none; }
    .dm-choice-corner-action {
      border: 1px solid #c7d2df; border-radius: 999px; padding: 4px 10px; background: #f6f8fb; color: #334155;
      font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; cursor: pointer;
    }
    .dm-choice-corner-action.primary { border-color: #2f6b45; background: #3b7a50; color: #fff; }
    .dm-break-choice-modal.dm-over-effect { z-index: 3735; }
    .dm-break-choice-backdrop { position: absolute; inset: 0; background: rgba(23,32,46,.52); backdrop-filter: blur(2px); }
    .dm-break-choice-body {
      position: relative; width: min(92vw, 520px); overflow: hidden; padding: 18px;
      max-height: calc(88dvh - var(--dm-modal-bar-lift, 0px));
      display: flex; flex-direction: column; gap: 14px;
      border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
      box-shadow: 0 18px 50px rgba(23,32,46,.35);
    }
    /* SP横持ち（844x390）でモードが5つ並ぶと本文が収まらない。スクロールするのは
       見出し＋モード一覧だけにして、キャンセルは常に本文の下端へ残す
       （スクロールに巻き込むと画面外へ出て手が届かなくなる）。 */
    .dm-break-choice-scroll {
      overflow: auto; min-height: 0; display: grid; gap: 14px; align-content: start;
    }
    .dm-break-choice-foot { flex: 0 0 auto; display: grid; gap: 8px; }
    .dm-break-choice-title { text-align: center; font-size: var(--fs-md); font-weight: 800; color: #243447; }
    .dm-break-choice-card { display: flex; justify-content: center; }
    .dm-break-choice-card img { width: min(30vw, 130px); aspect-ratio: 5/7; object-fit: contain; border-radius: 8px; }
    .dm-break-choice-actions { display: grid; gap: 8px; }
    .dm-break-choice-modal:has(.dm-break-choice-actions.card-grid) .dm-break-choice-body {
      width: min(96vw, 760px);
    }
    .dm-break-choice-actions.card-grid:not(.mixed-actions) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: stretch;
    }
    .dm-break-choice-modal.mixed-actions .dm-break-choice-body { width: min(96vw, 760px); }
    .dm-break-choice-modal.mixed-actions .dm-break-choice-card img { width: min(18vw, 88px); }
    .dm-break-choice-actions.card-grid.mixed-actions {
      grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
      gap: 14px;
      align-items: start;
    }
    .dm-choice-card-section,
    .dm-choice-text-section {
      min-width: 0; display: grid; gap: 8px; align-content: start;
    }
    .dm-choice-card-section {
      padding-right: 14px; border-right: 1px solid var(--border);
    }
    .dm-choice-section-title {
      color: #5d6b7d; font-size: var(--fs-xs); font-weight: 800;
    }
    .dm-choice-card-grid {
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px; align-items: stretch;
    }
    .dm-choice-text-actions { display: grid; gap: 8px; align-content: start; }
    .dm-break-choice-actions.card-grid .text-action { grid-column: auto; }
    .dm-break-choice-actions .dm-choice-card-tile {
      min-width: 0; padding: 7px; display: flex; flex-direction: column; align-items: stretch;
      gap: 7px; text-align: center; line-height: 1.35;
    }
    /* 宣言（革命チェンジ・侵略）のチェック式一覧。選んだものだけを順に実行する */
    .dm-choice-card-tile.checked {
      outline: 2px solid var(--accent, #2f6fb0); outline-offset: -2px;
    }
    .dm-choice-check {
      position: absolute; left: 4px; top: 4px; width: 20px; height: 20px;
      display: grid; place-items: center; border-radius: 50%;
      border: 1px solid var(--border, #b9c4d2); background: rgba(255,255,255,.94);
      color: #2f6fb0; font-size: 0.72rem; font-weight: 900;
    }
    .dm-choice-card-tile.checked .dm-choice-check {
      background: #2f6fb0; border-color: #2f6fb0; color: #fff;
    }
    /* 選べない候補（ササゲールで下限のコストに届いた後の残り等） */
    .dm-choice-card-tile:disabled { opacity: .45; cursor: not-allowed; }
    .dm-choice-card-tile.ordered {
      outline: 3px solid #f0a020; outline-offset: -3px; background: #fff9eb;
    }
    .dm-choice-order {
      position: absolute; z-index: 4; left: 4px; top: 4px; width: 26px; height: 26px;
      display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%;
      background: #f0a020; color: #272018; font-size: .78rem; font-weight: 900;
      box-shadow: 0 2px 7px rgba(23,32,46,.3); pointer-events: none;
    }
    .dm-choice-card-art {
      position: relative; width: min(100%, 96px); aspect-ratio: 5 / 7;
      align-self: center; display: block;
    }
    /* 画面には出さず読み上げにだけ渡す文字（画像で分かるカード名など） */
    .dm-visually-hidden {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    /* 画像の右上に小さく出すゾーン（場・手札・墓地等）。左上は通し番号 */
    .dm-choice-zone-tag {
      position: absolute; z-index: 4; right: 3px; top: 3px; padding: 1px 5px; border-radius: 999px;
      background: rgba(23,32,46,.82); color: #fff; font-size: .6rem; font-weight: 800; line-height: 1.3;
      pointer-events: none;
    }
    .dm-choice-card-thumb {
      width: 100%; height: 100%; object-fit: contain; border-radius: 8px;
      display: block; background: #e8edf3;
    }
    /* 特定のカードの事象で誘発した能力の対象。能力の持ち主の絵の右下に小さく重ねる */
    .dm-choice-target-inset {
      position: absolute; z-index: 4; right: -4px; bottom: -4px; width: 48%;
      aspect-ratio: 5 / 7; border: 2px solid #fff; border-radius: 6px; overflow: hidden;
      box-shadow: 0 2px 7px rgba(23,32,46,.35); background: #e8edf3; pointer-events: none;
    }
    .dm-choice-target-thumb {
      width: 100%; height: 100%; object-fit: cover; display: block;
      font-size: .5rem; line-height: 1.1;
    }
    /* 解決画面の対象。見出しの左上の余白（右上の「盤面」と対） */
    .dm-effect-target-corner {
      position: absolute; z-index: 3; top: 8px; left: 10px; width: 46px;
      aspect-ratio: 5 / 7; border-radius: 5px; overflow: hidden;
      box-shadow: 0 1px 5px rgba(23,32,46,.3); background: #e8edf3;
    }
    .dm-effect-target-thumb {
      width: 100%; height: 100%; object-fit: cover; display: block;
      font-size: .5rem; line-height: 1.1;
    }
    .dm-effect-body.has-target-corner .dm-effect-title { min-height: 56px; }
    /* 解決画面の発生元。見出しの文の左に画像で添える（対象の左上・盤面の右上とは重ねない） */
    .dm-effect-title.has-source {
      display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left;
    }
    .dm-effect-source-art {
      flex: 0 0 auto; width: 52px; aspect-ratio: 5 / 7; border-radius: 5px; overflow: hidden;
      box-shadow: 0 1px 5px rgba(23,32,46,.3); background: #e8edf3;
    }
    .dm-effect-source-thumb {
      width: 100%; height: 100%; object-fit: contain; display: block;
      font-size: .5rem; line-height: 1.1;
    }
    .dm-effect-title-text { min-width: 0; overflow-wrap: anywhere; }
    .dm-choice-card-back {
      background: var(--card-back-image) center / cover, #342c27;
      border: 1px solid rgba(23,32,46,.18);
    }
    .dm-choice-card-label {
      display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere;
      color: inherit; font-size: var(--fs-xs); font-weight: 800;
    }
    .dm-choice-card-badge {
      position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 4px;
      border-radius: 6px; color: #fff; font-size: 0.66rem; font-weight: 900;
      line-height: 1.2; background: rgba(67, 82, 102, .9);
    }
    .dm-choice-card-badge.match { background: rgba(34, 112, 72, .92); }
    .dm-choice-card-badge.outside { background: rgba(166, 78, 36, .94); }
    .dm-choice-card-badge.unknown { background: rgba(105, 87, 37, .94); }
    .dm-break-choice-actions button,
    .dm-break-choice-foot button {
      border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; background: #fff;
      color: #243447; font-weight: 800; cursor: pointer;
      white-space: normal; overflow-wrap: anywhere;
    }
    .dm-break-choice-actions button { text-align: left; line-height: 1.45; }
    .dm-break-choice-actions button.primary { border-color: #9ab9db; background: #edf5ff; color: #184f87; }
    .dm-break-choice-foot button.cancel { background: #f1f3f6; color: #5d6b7d; }
    .dm-break-choice-foot button.peek { background: #3f6ea8; color: #fff; }
    .dm-break-choice-foot button:disabled { opacity: .42; cursor: not-allowed; }
    @media (max-width: 620px) {
      .dm-break-choice-actions.card-grid:not(.mixed-actions),
      .dm-choice-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .dm-choice-card-art { width: min(100%, 84px); }
      .dm-break-choice-actions.card-grid.mixed-actions {
        grid-template-columns: minmax(0, 1fr);
      }
      .dm-choice-card-section {
        padding-right: 0; border-right: 0;
      }
      .dm-choice-text-section {
        order: -1; padding-bottom: 12px; border-bottom: 1px solid var(--border);
      }
      .dm-choice-text-actions {
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
      }
      .dm-choice-text-actions .text-action { padding: 9px 8px; }
      .dm-break-choice-modal.mixed-actions .dm-break-choice-card img {
        width: min(16vw, 68px);
      }
    }

    /* 下部帯の下端。SP縦持ちはコマンドレール・操作トレイが画面下端を占有するので、
       その実寸ぶんを --dm-bar-lift（updateDMBottomBarOffset が実測して入れる）で逃がす。
       レール・トレイの高さは画面高依存の clamp() なのでCSSの定数では合わせられない。 */
    .dm-manual-resolution {
      position: fixed; z-index: 3760; left: 50%;
      bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dm-bar-lift, 0px));
      width: min(94vw, 680px); transform: translateX(-50%); display: none; align-items: center; gap: 10px;
      padding: 10px 12px; border: 1px solid #e0b55e; border-radius: 12px; background: rgba(255,249,230,.97);
      box-shadow: 0 10px 28px rgba(23,32,46,.25);
    }
    .dm-manual-resolution.open { display: flex; }
    /* モーダルや効果カットインを操作・確認している間は処理中バーを退避する。
       open状態自体は維持するため、前面UIが閉じればそのまま自動復帰する。 */
    body:has([aria-modal="true"].open) .dm-manual-resolution.open,
    body:has(.dm-bulk-move-modal.open) .dm-manual-resolution.open,
    body:has(.dm-confirm-modal.open) .dm-manual-resolution.open,
    body:has(.dm-reveal-modal.open) .dm-manual-resolution.open,
    body:has(.dm-cast-overlay.active) .dm-manual-resolution.open,
    body:has(.dm-effect-cutin.active) .dm-manual-resolution.open {
      display: none;
    }
    .dm-manual-resolution-text { flex: 1; color: #604b1f; font-size: var(--fs-sm); font-weight: 800; }

    /* 召喚・詠唱でマナを自動タップしたことの通知（PC/SP共通）。
       画面下端は処理中バー・攻撃バーが使うので、重ならないよう上端へ出す。
       コスト軽減・踏み倒しは盤面から算出できないので「取り消す」を必ず添える */
    .dm-mana-tap-bar {
      position: fixed; z-index: 3770; left: 50%; top: max(10px, env(safe-area-inset-top));
      width: min(94vw, 560px); transform: translateX(-50%); display: none; align-items: center; gap: 10px;
      padding: 9px 12px; border: 1px solid #9ab9db; border-radius: 12px; background: rgba(240,247,255,.98);
      box-shadow: 0 10px 28px rgba(23,32,46,.22);
    }
    .dm-mana-tap-bar.open { display: flex; }
    /* 対象選択の見出し・ボタンを通知バーで覆わない。閉じたら残り時間内は再表示する。 */
    body:has([aria-modal="true"].open) .dm-mana-tap-bar.open,
    body:has(.dm-reveal-modal.open) .dm-mana-tap-bar.open,
    body:has(.dm-bulk-move-modal.open) .dm-mana-tap-bar.open,
    body:has(.dm-effect-modal.open:not([aria-modal="false"])) .dm-mana-tap-bar.open,
    body:has(.dm-break-choice-modal.open) .dm-mana-tap-bar.open,
    body:has(.mg-zone-menu-modal.open) .dm-mana-tap-bar.open {
      display: none;
    }
    .dm-mana-tap-bar-text { flex: 1; color: #184f87; font-size: var(--fs-sm); font-weight: 800; line-height: 1.4; }
    .dm-mana-tap-bar button {
      border: 0; border-radius: 8px; padding: 7px 11px; font-weight: 800; cursor: pointer;
      background: #687487; color: #fff; white-space: nowrap;
    }
    .dm-mana-tap-bar .undo { background: #3f6ea8; }
    .dm-mana-tap-bar button[hidden] { display: none; }

    /* 浮遊マナ（マナプール）の常時表示（PC/SP共通）。
       画面下端は処理中バー(3760)・攻撃バー(3750)・自動タップバー(3770)が使い切っているので、
       新しい帯は増やさず**盤面のマナ段の中**（ゾーンラベルの隣）へ置く。
       プールが空のときは renderDMManaPoolHTML が何も描かないので場所も取らない。 */
    .dm-mana-pool {
      flex-shrink: 0;
      display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
      max-width: 30%;
      padding: 2px 5px;
      border: 1px solid #9ab9db; border-radius: 8px;
      background: rgba(240, 247, 255, .96);
    }
    .dm-mana-pool-title {
      font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; color: #184f87;
    }
    .dm-mana-pool-chip {
      display: inline-flex; align-items: baseline; gap: 2px;
      padding: 1px 5px; border-radius: 999px;
      background: var(--dm-pool-civ, var(--civ-multi)); color: #fff;
      font-size: 0.56rem; font-weight: 800; line-height: 1.5;
    }
    .dm-mana-pool-chip b { font-family: var(--font-num); font-size: 0.68rem; }
    .dm-mana-pool-chip.civ-light   { --dm-pool-civ: var(--civ-light); }
    .dm-mana-pool-chip.civ-water   { --dm-pool-civ: var(--civ-water); }
    .dm-mana-pool-chip.civ-dark    { --dm-pool-civ: var(--civ-dark); }
    .dm-mana-pool-chip.civ-fire    { --dm-pool-civ: var(--civ-fire); }
    .dm-mana-pool-chip.civ-nature  { --dm-pool-civ: var(--civ-nature); }
    .dm-mana-pool-chip.civ-zero    { --dm-pool-civ: #7c8698; }
    .dm-mana-pool-chip.civ-unknown { --dm-pool-civ: var(--civ-multi); }
    /* SP横持ち: マナ段は「縦書きラベル＋カード」の横flexで詰まっているので、
       ラベルの隣へ極小ピルを縦積みする（既存の mg-seg-tag と同じ幅の作法） */
    .dm-mana-pool.mg {
      flex-direction: column; flex-wrap: nowrap; align-items: stretch;
      max-width: 36px; gap: 1px; padding: 1px 2px; border-radius: 5px; overflow: hidden;
    }
    .dm-mana-pool.mg .dm-mana-pool-title { font-size: 0.44rem; text-align: center; }
    .dm-mana-pool.mg .dm-mana-pool-chip {
      justify-content: center; gap: 1px; padding: 0 3px; border-radius: 4px; font-size: 0.46rem;
    }
    .dm-mana-pool.mg .dm-mana-pool-chip b { font-size: 0.52rem; }
    .dm-manual-resolution button { border: 0; border-radius: 8px; padding: 8px 11px; font-weight: 800; cursor: pointer; }
    .dm-manual-resolution .done { background: var(--success); color: #fff; }
    .dm-manual-resolution .cancel { background: #687487; color: #fff; }
    .dm-manual-resolution .peek { background: #3f6ea8; color: #fff; }
    .dm-manual-resolution button[hidden] { display: none; }

    /* 効果の処理中に盤面を確認するための膜。見えるが触れない。
       処理中バー(3760)より下・攻撃バー(3750)より上に置き、退避中に動かせる操作を
       処理中バーの「確認を終える」だけに絞る（エンジンには一切触れない）。 */
    .dm-board-peek-veil {
      position: fixed; inset: 0; z-index: 3755; display: none;
      background: transparent; cursor: zoom-out;
    }
    .dm-board-peek-veil.open { display: block; }
    /* 戻り方の案内。処理中バーが出ていない場面（ブレイク処理中など）でも退路が分かるようにする */
    .dm-board-peek-hint {
      position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top));
      transform: translateX(-50%); max-width: min(94vw, 560px);
      padding: 7px 14px; border-radius: 999px; border: 1px solid #b9c4d4;
      background: rgba(255,255,255,.94); color: #33415a;
      font-size: var(--fs-xs); font-weight: 800; line-height: 1.4; text-align: center;
      box-shadow: 0 8px 22px rgba(23,32,46,.2); pointer-events: none;
    }
    /* マナ自動タップの通知バーと同じ位置（上端中央）なので、開いている間は案内を下へ逃がす。
       重なると案内がバーの矩形に完全に隠れて退路が分からなくなる */
    body.dm-mana-tap-bar-open .dm-board-peek-hint {
      top: calc(max(10px, env(safe-area-inset-top)) + 68px);
    }

    /* 攻撃ステップの進行バー。攻撃側／守備側の選択が必要な瞬間だけJSが開く。 */
    .dm-attack-bar {
      position: fixed; z-index: 3750; left: 50%;
      bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dm-bar-lift, 0px));
      width: min(94vw, 680px); transform: translateX(-50%); display: none; align-items: center; gap: 10px;
      padding: 10px 12px; border: 1px solid #c96a5a; border-radius: 12px; background: rgba(255,240,236,.97);
      box-shadow: 0 10px 28px rgba(23,32,46,.25);
    }
    .dm-attack-bar.open { display: flex; }
    /* モーダル・効果演出中は操作を割り込ませず完全に隠す。閉じれば同じ攻撃状態から戻る。 */
    body:has([aria-modal="true"].open) .dm-attack-bar.open,
    body:has(.dm-bulk-move-modal.open) .dm-attack-bar.open,
    body:has(.dm-reveal-modal.open) .dm-attack-bar.open,
    body:has(.dg-zone-menu.open) .dm-attack-bar.open,
    body:has(.mg-menu-backdrop) .dm-attack-bar.open,
    body:has(.dm-cast-overlay.active) .dm-attack-bar.open,
    body:has(.dm-effect-cutin.active) .dm-attack-bar.open {
      display: none;
    }
    /* 効果の処理中バーと同時に出るときは、重ならないよう攻撃バーを上へ逃がす。
       同じ位置に重ねると「バトル」ボタンの上に「キャンセル」が乗り、誤操作の的になる。
       逃がす量は処理中バーの実測高（--dm-attack-bar-lift）。ボタンが増減しても折り返しても
       追従する。JSが走る前だけ下のハードコードにフォールバックする */
    .dm-manual-resolution.open ~ .dm-attack-bar.open {
      bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dm-bar-lift, 0px) + var(--dm-attack-bar-lift, 76px));
    }
    /* 560px以下は処理中バーが2段に折り返す（下の flex-wrap 指定）ので、その分だけ余分に空ける */
    @media (max-width: 560px) {
      .dm-manual-resolution.open ~ .dm-attack-bar.open {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--dm-bar-lift, 0px) + var(--dm-attack-bar-lift, 116px));
      }
    }
    .dm-attack-bar-text { flex: 1; color: #7a3326; font-size: var(--fs-sm); font-weight: 800; }
    .dm-attack-bar button { border: 0; border-radius: 8px; padding: 8px 11px; font-weight: 800; cursor: pointer; }
    .dm-attack-bar .block { background: #3f6ea8; color: #fff; }
    .dm-attack-bar .battle { background: #a8402e; color: #fff; }
    .dm-attack-bar .break { background: #b06a24; color: #fff; }
    .dm-attack-bar button[hidden] { display: none; }

    .dm-game-result {
      position: fixed;
      inset: 0;
      z-index: 13000;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(12, 18, 29, .68);
      backdrop-filter: blur(3px);
    }
    .dm-game-result.open {
      display: grid;
      animation: dm-result-backdrop .2s ease-out both;
    }
    .dm-game-result-panel {
      width: min(430px, calc(100vw - 36px));
      box-sizing: border-box;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 18px;
      padding: 28px 24px 22px;
      background: linear-gradient(160deg, #fff 0%, #f1f5fb 100%);
      color: #172033;
      text-align: center;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .38), 0 0 34px rgba(236, 184, 66, .2);
      animation: dm-result-panel .28s cubic-bezier(.2, .8, .2, 1) both;
    }
    .dm-game-result-kicker {
      margin-bottom: 5px;
      color: #8b631a;
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .18em;
    }
    .dm-game-result-title {
      margin: 0;
      font-size: clamp(1.9rem, 8vw, 2.8rem);
      line-height: 1.15;
    }
    .dm-game-result-detail {
      min-height: 1.5em;
      margin: 12px 0 22px;
      color: #526078;
      font-size: .92rem;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }
    .dm-game-result-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .dm-game-result-actions button {
      min-height: 46px;
      border: 0;
      border-radius: 10px;
      padding: 10px 12px;
      font: 800 .88rem/1.3 inherit;
      cursor: pointer;
    }
    .dm-game-result-actions .replay { background: #2d7655; color: #fff; }
    .dm-game-result-actions .exit { background: #e5eaf1; color: #27354a; }
    @keyframes dm-result-backdrop {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes dm-result-panel {
      from { opacity: 0; transform: translateY(14px) scale(.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (max-width: 420px) {
      .dm-game-result-actions { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dm-game-result.open,
      .dm-game-result-panel { animation: none; }
    }

    /* 攻撃状態のカード枠。PC/SPの両方のチップへ同じ語彙で当てる */
    .dg-card-chip.attacking, .mg-card-chip.attacking {
      box-shadow: 0 0 0 3px #d4553f, 0 0 12px rgba(212,85,63,.65);
    }
    .dg-card-chip.attack-target, .mg-card-chip.attack-target {
      box-shadow: 0 0 0 3px #d99b28, 0 0 12px rgba(217,155,40,.6);
    }
    .dg-card-chip.blocking, .mg-card-chip.blocking {
      box-shadow: 0 0 0 3px #3f6ea8, 0 0 12px rgba(63,110,168,.6);
    }

    /* ── 攻撃先エイム（PC版） ────────────────────────────────────────
       自分のクリーチャーを左クリック → カーソルへ矢印が伸びる。相手クリーチャー／
       シールドへ吸着し、もう一度クリックで攻撃宣言。モーダル(3160〜)より下、
       盤面より上に置く。矢印はSVGでbody直下に固定配置するのでレイアウトに触らない。
       カードの変形(transform)はタップ状態の回転が正本なので、強調は影と縁だけで行う */
    .dm-aim-layer { position: fixed; inset: 0; z-index: 3100; display: none; pointer-events: none; }
    .dm-aim-layer.open { display: block; }
    .dm-aim-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .dm-aim-halo { fill: none; stroke: rgba(212,85,63,.26); stroke-width: 16; stroke-linecap: round; filter: url(#dm-aim-glow); }
    .dm-aim-line { fill: none; stroke: url(#dm-aim-grad); stroke-width: 7; stroke-linecap: round; }
    .dm-aim-flow {
      fill: none; stroke: rgba(255,246,233,.95); stroke-width: 3; stroke-linecap: round;
      stroke-dasharray: 10 22; animation: dm-aim-flow 620ms linear infinite;
    }
    @keyframes dm-aim-flow { to { stroke-dashoffset: -32; } }
    .dm-aim-head { fill: url(#dm-aim-grad); stroke: rgba(255,238,218,.92); stroke-width: 1.5; stroke-linejoin: round; }
    .dm-aim-origin { fill: rgba(212,85,63,.92); stroke: #fff3ea; stroke-width: 3; }
    .dm-aim-origin-pulse {
      fill: none; stroke: rgba(212,85,63,.7); stroke-width: 3;
      transform-box: fill-box; transform-origin: center; animation: dm-aim-pulse 1.3s ease-out infinite;
    }
    @keyframes dm-aim-pulse { 0% { transform: scale(.65); opacity: .85; } 100% { transform: scale(2.2); opacity: 0; } }
    .dm-aim-reticle { opacity: 0; transition: opacity .12s ease; }
    .dm-aim-layer.locked .dm-aim-reticle { opacity: 1; }
    /* 相手プレイヤーへの攻撃はシールド段まるごとが的。1枚を狙う照準は出さず、段を囲む */
    .dm-aim-layer.locked.player .dm-aim-reticle { opacity: 0; }
    .dm-aim-frame {
      fill: rgba(212,85,63,.08); stroke: #ef7a3c; stroke-width: 3;
      stroke-dasharray: 14 9; opacity: 0;
      animation: dm-aim-frame-flow 900ms linear infinite;
    }
    .dm-aim-layer.locked.player .dm-aim-frame { opacity: 1; }
    @keyframes dm-aim-frame-flow { to { stroke-dashoffset: -46; } }
    .dm-aim-layer.warn .dm-aim-frame { stroke: #b8802f; fill: rgba(184,128,47,.08); }
    .dm-aim-reticle circle { fill: none; stroke: #ffbf62; stroke-width: 2.5; }
    .dm-aim-reticle-out {
      stroke-dasharray: 13 11; transform-box: fill-box; transform-origin: center;
      animation: dm-aim-spin 3.2s linear infinite;
    }
    @keyframes dm-aim-spin { to { transform: rotate(360deg); } }
    .dm-aim-layer.locked .dm-aim-line { stroke-width: 9; }
    /* 通常は選べない相手（アンタップ・攻撃されない等）は琥珀色に落として注意を出す */
    .dm-aim-layer.warn .dm-aim-line { stroke: #b8802f; }
    .dm-aim-layer.warn .dm-aim-head { fill: #b8802f; }
    .dm-aim-layer.warn .dm-aim-halo { stroke: rgba(184,128,47,.26); }
    .dm-aim-layer.warn .dm-aim-reticle circle { stroke: #ddb35c; }
    /* 着弾 */
    .dm-aim-layer.fire .dm-aim-shape { animation: dm-aim-fire 150ms ease-out forwards; }
    @keyframes dm-aim-fire {
      0% { opacity: 1; }
      40% { opacity: 1; filter: brightness(1.6); }
      100% { opacity: 0; filter: brightness(1.6); }
    }
    .dm-aim-hint {
      position: fixed; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 8px);
      transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
      padding: 7px 8px 7px 14px; border: 1px solid #c96a5a; border-radius: 999px;
      background: rgba(255,244,240,.97); box-shadow: 0 10px 28px rgba(23,32,46,.22);
      font-size: .82rem; font-weight: 700; color: #7a3326; white-space: nowrap; pointer-events: none;
    }
    .dm-aim-cancel {
      pointer-events: auto; border: 1px solid #c0705f; border-radius: 999px; background: #fff;
      color: #8a3d2c; font-weight: 800; font-size: .76rem; padding: 4px 12px; cursor: pointer;
    }
    .dm-aim-cancel:hover { background: #f8e4de; }

    #app-desktop.dm-aiming { cursor: crosshair; }
    #app-desktop.dm-aiming .dg-card-chip:not(.dm-aim-target):not(.dm-aim-source),
    #app-desktop.dm-aiming .dg-back-card:not(.dm-aim-target) { opacity: .5; filter: saturate(.65); }
    .dg-card-chip.dm-aim-source { box-shadow: 0 0 0 3px #d4553f, 0 0 18px rgba(212,85,63,.75); }
    .dm-aim-target {
      outline: 2px dashed rgba(212,85,63,.85); outline-offset: 2px; cursor: crosshair;
      transition: box-shadow .12s ease, filter .12s ease, outline-color .12s ease;
      animation: dm-aim-cand 1.5s ease-in-out infinite;
    }
    @keyframes dm-aim-cand {
      0%, 100% { outline-color: rgba(212,85,63,.45); }
      50%      { outline-color: rgba(255,176,104,1); }
    }
    .dm-aim-target.dm-aim-warn { animation: none; outline-color: rgba(184,128,47,.8); }
    .dm-aim-target.dm-aim-hover {
      outline: 3px solid #ef7a3c; filter: brightness(1.08);
      box-shadow: 0 0 0 4px rgba(239,122,60,.45), 0 8px 20px rgba(212,85,63,.45);
    }
    .dm-aim-target.dm-aim-warn.dm-aim-hover {
      outline-color: #b8802f; box-shadow: 0 0 0 4px rgba(184,128,47,.4), 0 8px 20px rgba(184,128,47,.4);
    }
    /* シールド段はまとめて1つの的。段の中のカードは暗くせず、枠も1枚ずつは出さない */
    #app-desktop.dm-aiming .dm-aim-target .dg-card-chip,
    #app-desktop.dm-aiming .dm-aim-target .dg-back-card { opacity: 1; filter: none; }
    /* 器そのものには枠を出さない（段いっぱいの帯になって的が大きく見えるため）。
       候補であることは、中のシールドを揃って明滅させて示す */
    .dm-aim-target.dg-v2-cards { outline: none; animation: none; }
    .dm-aim-target.dg-v2-cards.dm-aim-hover { filter: none; box-shadow: none; }
    .dm-aim-target.dg-v2-cards .dg-card-chip,
    .dm-aim-target.dg-v2-cards .dg-back-card {
      outline: 2px dashed rgba(212,85,63,.85); outline-offset: 2px;
      animation: dm-aim-cand 1.5s ease-in-out infinite;
    }
    .dm-aim-target.dg-v2-cards.dm-aim-hover .dg-card-chip,
    .dm-aim-target.dg-v2-cards.dm-aim-hover .dg-back-card {
      outline: 3px solid #ef7a3c; animation: none; filter: brightness(1.06);
    }
    .dm-aim-target.dm-aim-hit { animation: dm-aim-hit 220ms ease-out; }
    @keyframes dm-aim-hit {
      0%   { filter: brightness(1.1); }
      40%  { filter: brightness(1.9) saturate(1.3); }
      100% { filter: brightness(1.1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dm-aim-flow, .dm-aim-origin-pulse, .dm-aim-reticle-out,
      .dm-aim-target, .dm-aim-target.dm-aim-hit, .dm-aim-layer.fire .dm-aim-shape { animation: none; }
      .dm-aim-target { outline-color: rgba(212,85,63,.85); }
    }
    /* ── 効果の誘発カットイン ──────────────────────────────────────
       「唱える／場に出す」のカットインとは別の演出にする。光がキラッと光るのではなく、
       カードの後ろから光の粒がわき出る。カード画像は画面中央へせり出す（墓地・手札から
       誘発する効果もあるため、盤面の位置ではなく常に中央）。呪文には出さない。 */
    .dm-effect-cutin {
      position: fixed; inset: 0; z-index: 3160; display: grid; place-items: center;
      visibility: hidden; pointer-events: none; background: transparent;
    }
    /* 演出中はタップで飛ばせる（skipDMFx） */
    .dm-effect-cutin.active { visibility: visible; pointer-events: auto; cursor: pointer; }
    .dm-effect-cutin-inner {
      position: relative; display: grid; justify-items: center; gap: 8px;
      width: min(34vh, 56vw, 220px); opacity: 0; isolation: isolate;
    }
    .dm-effect-cutin.active .dm-effect-cutin-inner {
      animation: dmEffectCutinRise 260ms cubic-bezier(.2,.9,.3,1.2) forwards,
                 dmEffectCutinOut 180ms ease-out 480ms forwards;
    }
    /* せり出し: 下からせり上がりながら実寸へ */
    @keyframes dmEffectCutinRise {
      from { opacity: 0; transform: translateY(46px) scale(.86); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes dmEffectCutinOut {
      from { opacity: 1; transform: translateY(0) scale(1); }
      to   { opacity: 0; transform: translateY(-18px) scale(1.04); }
    }
    .dm-effect-cutin-card {
      display: block; width: 100%; max-height: min(52vh, 380px); object-fit: contain;
      border-radius: 10px; position: relative; z-index: 2;
      box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 14px 30px rgba(23,32,46,.4);
    }
    .dm-effect-cutin-inner.no-image .dm-effect-cutin-card { display: none; }
    .dm-effect-cutin-label {
      position: relative; z-index: 2; white-space: pre-line; text-align: center;
      padding: 4px 12px; border-radius: 999px;
      background: rgba(23,32,46,.86); color: #fff;
      font-size: var(--fs-sm); font-weight: 800; line-height: 1.35;
    }
    /* 光の粒: カードの後ろ(z-index 1)からわき出て外へ散る */
    .dm-effect-cutin-sparks {
      position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 1;
    }
    .dm-effect-cutin-sparks i {
      position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4px 0 0 -4px;
      border-radius: 50%; opacity: 0;
      background: radial-gradient(circle, #fff 0%, #ffe6a6 45%, rgba(255,209,102,0) 72%);
    }
    .dm-effect-cutin.active .dm-effect-cutin-sparks i {
      animation: dmEffectSpark 600ms ease-out forwards;
      animation-delay: var(--d, 0ms);
    }
    @keyframes dmEffectSpark {
      0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
      22%  { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(1.25); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dm-effect-cutin.active .dm-effect-cutin-inner {
        animation: dmEffectCutinRise 1ms linear forwards, dmEffectCutinOut 1ms linear 300ms forwards;
      }
      .dm-effect-cutin.active .dm-effect-cutin-sparks i { animation: none; opacity: 0; }
    }

    /* バッジの置き場所（カードの絵柄に合わせた4隅）。自分のカードを基準に
         パワー=左下（カードに刷られたパワーの位置）／常在=右下／
         ブレイク=右上（ハイパーと同居するときは左へ逃がす）
       相手のカードは上下逆に置かれるので、対応する角へそれぞれ反転させる。
       文字の向きは回さない（こちらから読むため）。 */

    /* 常在型能力のバッジと一覧 */
    .dm-static-badge {
      position: absolute; right: 1px; bottom: 1px; z-index: 12; pointer-events: none;
      padding: 0 3px; border-radius: 6px; border: 1px solid rgba(255,255,255,.85);
      background: rgba(58,88,64,.9); color: #fff;
      font-size: 0.52rem; font-weight: 800; line-height: 1.6; white-space: nowrap;
    }
    #app-mobile.active .dm-static-badge { font-size: 0.44rem; padding: 0 2px; }
    .dg-card-chip.opponent .dm-static-badge,
    .mg-card-chip.opponent .dm-static-badge { left: 1px; top: 1px; right: auto; bottom: auto; }

    /* ブレイク枚数（W/T/Q/G）。常在バッジと違う軸なので別バッジ・別位置にする。
       左上はカードのコスト表示と重なるので右上へ置く。相手のカードは上下逆に
       置かれるぶんを反転して、こちらから見て左下に出す。 */
    .dm-breaker-badge {
      position: absolute; right: 1px; top: 1px; z-index: 12; pointer-events: none;
      min-width: 12px; padding: 0 3px; border-radius: 6px; border: 1px solid rgba(255,255,255,.85);
      background: rgba(122,51,38,.9); color: #fff; text-align: center;
      font-size: 0.54rem; font-weight: 900; line-height: 1.6; white-space: nowrap;
    }
    #app-mobile.active .dm-breaker-badge { font-size: 0.46rem; padding: 0 2px; }
    /* ハイパーと同居すると角が足りない（チップ幅に2つ並ばない）ので、
       ブレイク側をハイパーのすぐ下へ逃がす（辺の中央は付与能力の列が使う） */
    .dm-hyper-badge ~ .dm-breaker-badge {
      right: 1px; top: 16px; bottom: auto; transform: none;
    }
    /* 同名クリーチャーの通し番号（UI仕様「選択中・処理中のカード」）。四隅は他のマークが使うので
       上辺の中央（印刷のコストとブレイクの間）。相手のカードは反転しているので下辺の中央 */
    .dm-same-name-no {
      position: absolute; left: 50%; top: 1px; transform: translateX(-50%); z-index: 13; pointer-events: none;
      min-width: 14px; padding: 0 4px; border-radius: 999px; border: 1.5px solid #17202e;
      background: #fff; color: #17202e; text-align: center;
      font-size: 0.62rem; font-weight: 900; line-height: 1.35;
      box-shadow: 0 1px 3px rgba(23,32,46,.35);
    }
    #app-mobile.active .dm-same-name-no { font-size: 0.5rem; min-width: 12px; padding: 0 3px; }
    .dg-card-chip.opponent .dm-same-name-no,
    .mg-card-chip.opponent .dm-same-name-no { top: auto; bottom: 1px; }
    /* 選択画面・まとめ移動では、印刷のカード名に重ねないよう画像の外（カードの下の文字）に出す */
    .dm-same-name-tag {
      display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 999px;
      border: 1.5px solid #17202e; background: #fff; color: #17202e;
      font-size: 0.72rem; font-weight: 900; line-height: 1.35; vertical-align: 1px;
    }
    .dm-same-name-tag.block { display: block; width: fit-content; margin: 4px auto 0; }
    /* 相手のカードは反転して左下 */
    .dg-card-chip.opponent .dm-breaker-badge,
    .mg-card-chip.opponent .dm-breaker-badge { left: 1px; bottom: 1px; right: auto; top: auto; }
    .dg-card-chip.opponent .dm-hyper-badge ~ .dm-breaker-badge,
    .mg-card-chip.opponent .dm-hyper-badge ~ .dm-breaker-badge {
      left: 1px; right: auto; top: auto; bottom: 16px; transform: none;
    }
    /* 効果で付いた能力・シールドとの紐付け（UI仕様「選択中・処理中のカード」の盤面のマーク）。
       四隅（パワー・常在・ブレイク・ハイパー）と左の制限列を避け、右辺の中央に縦に並べる。
       期限付きの付与は点線の枠で、効果が続く間だけのものと見分ける */
    .dm-effect-badges {
      position: absolute; right: 1px; top: 50%; transform: translateY(-50%); z-index: 12;
      display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
      max-width: calc(100% - 4px); pointer-events: none;
    }
    .dm-effect-badge {
      max-width: 100%; box-sizing: border-box; padding: 0 3px; border-radius: 6px;
      border: 1px solid rgba(255,255,255,.9); color: #fff;
      font-size: 0.5rem; font-weight: 900; line-height: 1.5; text-align: center;
      white-space: normal; overflow-wrap: anywhere;
    }
    .dm-effect-badge.granted { background: rgba(31,111,178,.92); }
    .dm-effect-badge.granted.timed { border-style: dashed; border-color: #ffe08a; }
    .dm-effect-badge.link { background: rgba(14,116,112,.94); }
    .dm-effect-badge.link.sf { background: rgba(79,70,160,.94); }
    #app-mobile.active .dm-effect-badge { font-size: 0.42rem; padding: 0 2px; }
    /* 画像の無いカードは中央にカード名を書くので、名前に重ねず上辺（コスト・ブレイクの下）に横並びにする */
    .dg-card-chip.no-image-board .dm-effect-badges,
    .mg-card-chip.no-image-board .dm-effect-badges,
    .dg-card-chip.battle:not(.has-image) .dm-effect-badges,
    .mg-card-chip.battle:not(.has-image) .dm-effect-badges {
      top: 17px; transform: none; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;
    }
    .dg-card-chip.opponent.no-image-board .dm-effect-badges,
    .mg-card-chip.opponent.no-image-board .dm-effect-badges,
    .dg-card-chip.opponent.battle:not(.has-image) .dm-effect-badges,
    .mg-card-chip.opponent.battle:not(.has-image) .dm-effect-badges {
      top: auto; bottom: 17px; justify-content: flex-start;
    }
    .dg-card-chip.opponent .dm-effect-badges,
    .mg-card-chip.opponent .dm-effect-badges { left: 1px; right: auto; align-items: flex-start; }
    /* 紐付いたシールド側の印（持ち主のクリーチャーと同じ色） */
    .dm-shield-link-tag {
      position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 12;
      padding: 0 4px; border-radius: 6px; border: 1px solid rgba(255,255,255,.9);
      background: rgba(14,116,112,.94); color: #fff; pointer-events: none;
      font-size: 0.52rem; font-weight: 900; line-height: 1.5; white-space: nowrap;
    }
    .dm-shield-link-tag.sf { background: rgba(79,70,160,.94); }
    #app-mobile.active .dm-shield-link-tag { font-size: 0.44rem; padding: 0 2px; }
    .mg-context-static-btn {
      margin-top: 5px; padding: 3px 12px; border: 1px solid var(--table-line); border-radius: 999px;
      background: var(--table-chip); color: var(--table-label);
      font-size: clamp(0.54rem, 2.4vw, 0.66rem); font-weight: 800; cursor: pointer;
    }
    .dm-static-item { border: 1px solid #dde3ec; border-radius: 10px; padding: 9px; background: #fbfcfe; }
    .dm-static-item-head { font-size: var(--fs-sm); font-weight: 800; color: #243447; }
    .dm-static-item-label { margin-top: 4px; font-size: var(--fs-xs); font-weight: 800; color: #3a5840; }
    .dm-static-item-text { font-size: var(--fs-xs); color: #5d6b80; line-height: 1.5; }

    /* ハイパーモード解放中の目印。自分側はブレイクと同じ右上（同居するときは
       ブレイク側が左へ逃げる）。相手のカードでは反転して左下。 */
    .dm-hyper-badge {
      position: absolute; right: 1px; top: 1px; z-index: 12; pointer-events: none;
      padding: 0 3px; border-radius: 6px; border: 1px solid rgba(255,255,255,.85);
      background: rgba(94,58,120,.92); color: #fff;
      font-size: 0.52rem; font-weight: 800; line-height: 1.6; white-space: nowrap;
    }
    #app-mobile.active .dm-hyper-badge { font-size: 0.44rem; padding: 0 2px; }
    .dg-card-chip.opponent .dm-hyper-badge,
    .mg-card-chip.opponent .dm-hyper-badge { left: 1px; bottom: 1px; right: auto; top: auto; }

    /* バトルゾーンのパワー表示。下札枚数(.dg-under-count, z-index 11)と同じ層の考え方で、
       非負オフセット＋カード本体より前面。回転する .dg-card-body の外側に置く。
       位置はカードに刷られたパワー（左下）へ重ねる。相手のカードは反転して右上。 */
    .dm-power-badge {
      position: absolute; left: 1px; bottom: 1px; z-index: 12; pointer-events: none;
      padding: 0 3px; border-radius: 7px; border: 1px solid rgba(255,255,255,.85);
      background: rgba(23,32,46,.86); color: #fff;
      font-size: 0.6rem; font-weight: 800; font-family: var(--font-num); line-height: 1.5;
      white-space: nowrap;
    }
    /* 修整後の数値だけを出し、上下は**数字の縁取り**の色で示す
       （赤い縁＝上昇／青い縁＝低下）。バッジの黒地と白枠は変えない。
       縁取りは text-shadow の8方向で描く（-webkit-text-stroke は字幅を食うため）。
       差分の数値は title（ツールチップ）に残す。 */
    .dm-power-badge.up {
      color: #fff;
      text-shadow:
        1px 0 0 #ff4d3d, -1px 0 0 #ff4d3d, 0 1px 0 #ff4d3d, 0 -1px 0 #ff4d3d,
        1px 1px 0 #ff4d3d, -1px 1px 0 #ff4d3d, 1px -1px 0 #ff4d3d, -1px -1px 0 #ff4d3d;
    }
    .dm-power-badge.down {
      color: #fff;
      text-shadow:
        1px 0 0 #3d95ff, -1px 0 0 #3d95ff, 0 1px 0 #3d95ff, 0 -1px 0 #3d95ff,
        1px 1px 0 #3d95ff, -1px 1px 0 #3d95ff, 1px -1px 0 #3d95ff, -1px -1px 0 #3d95ff;
    }
    /* 相手のクリーチャーはカードが上下逆に置かれる。数字はこちら向きのまま、
       位置だけカード本来のパワー欄と同じ側（こちらから見て右上）へ移す */
    .dg-card-chip.opponent .dm-power-badge,
    .mg-card-chip.opponent .dm-power-badge { right: 1px; top: 1px; left: auto; bottom: auto; }
    #app-mobile.active .dm-power-badge { font-size: 0.5rem; padding: 0 2px; border-radius: 5px; }

    /* 攻撃できる状態のクリーチャーは枠を明滅させる（禁止はせず、分かりやすさのため） */
    .dg-card-chip.can-attack, .mg-card-chip.can-attack { animation: dm-can-attack 1.6s ease-in-out infinite; }
    @keyframes dm-can-attack {
      0%, 100% { box-shadow: 0 0 0 2px rgba(212,85,63,.35); }
      50%      { box-shadow: 0 0 0 3px rgba(212,85,63,.95), 0 0 10px rgba(212,85,63,.5); }
    }
    @media (prefers-reduced-motion: reduce) {
      .dg-card-chip.can-attack, .mg-card-chip.can-attack {
        animation: none; box-shadow: 0 0 0 2px rgba(212,85,63,.7);
      }
    }

    /* SP版ブレイクモーダル: 5枚が常に1列で収まるようgrid5列で流動化 */
    .dm-break-modal.mobile .dm-break-body.mobile {
      width: min(98vw, 760px); padding: 14px 12px; gap: 10px; max-height: 94dvh;
    }
    .dm-break-modal.mobile .dm-break-head { font-size: var(--fs-sm); }
    .dm-break-modal.mobile .dm-break-cards {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(3px, 1.2vw, 8px);
      max-height: 50dvh; overflow: auto;
      padding: 6px 4px 4px;
    }
    /* 6枚以上ブレイク時のみ折り返し（通常5シールドなら常に1行） */
    .dm-break-modal.mobile .dm-break-card { width: 100%; }
    .dm-break-modal.mobile .dm-break-order-toggle { width: clamp(20px, 6vw, 26px); height: clamp(20px, 6vw, 26px); top: -7px; right: -7px; font-size: clamp(.62rem, 2vw, .74rem); }
    .dm-break-modal.mobile .dm-break-menu-btn { width: clamp(18px, 5.5vw, 24px); height: clamp(18px, 5.5vw, 24px); top: -7px; left: -7px; font-size: clamp(.68rem, 2.4vw, .82rem); }
    /* 縦画面: 4ボタンを 2×2 に畳んで文字を潰さない */
    .dm-break-modal.mobile .dm-break-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .dm-break-modal.mobile .dm-break-btn {
      padding: 10px 6px; white-space: nowrap;
      font-size: clamp(.72rem, 3.2vw, var(--fs-sm));
    }
    .dm-break-modal.mobile .dm-break-btn.run { padding: 12px 8px; font-size: clamp(.8rem, 3.6vw, var(--fs-md)); }
    /* 横画面など高さが狭い時は 4列に戻して縦を稼ぐ */
    @media (orientation: landscape) {
      .dm-break-modal.mobile .dm-break-foot { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
      .dm-break-modal.mobile .dm-break-btn { padding: 9px 4px; font-size: clamp(.66rem, 2vw, var(--fs-xs)); }
      .dm-break-modal.mobile .dm-break-btn.run { padding: 10px 6px; font-size: clamp(.72rem, 2.2vw, var(--fs-sm)); }
    }

    @media (max-width: 560px) {
      .dm-break-body { width: 98vw; padding-inline: 10px; }
      .dm-manual-resolution { flex-wrap: wrap; }
      .dm-manual-resolution-text { flex-basis: 100%; }
      /* ボタンが3つになるので、狭い幅では均等に分け合って1段に収める（見切れ禁止） */
      .dm-manual-resolution button {
        flex: 1 1 auto; padding: 8px 6px; font-size: var(--fs-xs);
        white-space: normal; word-break: break-word;
      }
    }

    /* 相手カードの確認・操作 */
    .dm-confirm-modal { position: fixed; inset: 0; z-index: 3600; display: none; align-items: center; justify-content: center; }
    .dm-confirm-modal.open { display: flex; }
    .dm-confirm-backdrop { position: absolute; inset: 0; background: rgba(23,32,46, 0.5); }
    .dm-confirm-body {
      position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 16px 40px rgba(23,32,46, 0.32); padding: 20px 22px; max-width: 86vw; width: 360px;
      display: flex; flex-direction: column; gap: 16px;
    }
    .dm-confirm-msg { font-size: var(--fs-md); font-weight: 700; color: #243447; text-align: center; line-height: 1.5; }
    .dm-confirm-foot { display: flex; justify-content: center; gap: 14px; }
    .dm-confirm-btn { border: none; border-radius: 8px; padding: 10px 24px; font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
    .dm-confirm-btn.no { background: #e8edf4; color: #33415a; }
    .dm-confirm-btn.yes { background: #5d6b7d; color: #fff; }
    .dm-confirm-btn.yes:hover { background: #33415a; }

    .dm-grave-note { font-size: var(--fs-xs); color: var(--text-dim); text-align: center; margin: -2px 0 2px; }
    .dm-opp-reveal-list {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      overflow-x: hidden;
      overflow-y: auto;
      gap: 10px;
      padding: 12px;
      scroll-snap-type: none;
    }
    .dm-opp-reveal-item {
      cursor: pointer;
      flex: 0 0 auto;
      width: 84px;
      display: flex;
      padding: 0;
      background: transparent;
      border: none;
    }
    .dm-opp-reveal-img {
      width: 84px; aspect-ratio: 5/7; object-fit: cover; border-radius: 7px; display: block;
      border: 1px solid #d8dfe9; box-shadow: 0 2px 6px rgba(23,32,46,0.18); transition: transform .1s;
    }
    .dm-opp-reveal-img.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fbf9;
      color: #617588;
      font-size: 0.58rem;
      font-weight: 800;
    }
    .dm-opp-reveal-item:hover .dm-opp-reveal-img { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(23,32,46,0.26); }

    /* ブレイク選択モード: 選択中のシールドを強調（SP=div / PC=button 両方の一覧アイテムに効く） */
    .dm-opp-reveal-item.break-selected,
    .dm-opp-hidden-card.break-selected,
    .dm-opp-public-card.break-selected {
      outline: 3px solid #e5560a;
      outline-offset: -3px;
      border-radius: 10px;
      box-shadow: 0 0 0 3px rgba(229,86,10,0.25);
    }

    #mobile-opp-reveal-modal .dm-grave-body.mobile,
    #mobile-my-shields-modal .dm-grave-body.mobile {
      bottom: 8px;
      max-height: calc(100dvh - 16px);
    }
    #mobile-opp-reveal-modal .dm-opp-reveal-item,
    #mobile-opp-reveal-modal .dm-opp-reveal-img,
    #mobile-my-shields-modal .dm-opp-reveal-item,
    #mobile-my-shields-modal .dm-opp-reveal-img {
      width: 68px;
    }
    /* 自分シールド一覧: 裏向きカードの下に位置番号を添える（素性は出さない） */
    #mobile-my-shields-modal .dm-opp-reveal-item {
      flex-direction: column;
      align-items: center;
    }

    /* 相手の非公開ゾーン: クリックで確認できることを示す */
    .dg-opp-clickable { cursor: pointer; }
    .dg-opp-clickable:hover { outline: 2px dashed rgba(59, 110, 165, 0.6); outline-offset: -2px; }

    .dg-v2-pile-name {
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .dg-v2-pile-cnt {
      font-size: var(--fs-md);
      font-weight: 800;
      color: #243447;
      line-height: 1;
      font-family: var(--font-num);
      letter-spacing: 0.02em;
    }

    .dg-v2-pile-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      display: block;
    }

    /* ログ列（最右）。カード情報と効果プールは隣の .dg-v2-inspectcol へ分けた */
    .dg-v2-chat {
      width: 190px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 8px 8px 8px 4px;
      gap: 6px;
      transition: width var(--dur-normal) var(--ease-out);
    }
    /* 折りたたみ時: トグルだけ残し盤面を全幅に広げる */
    .dg-v2-chat.collapsed {
      width: 30px;
      padding: 8px 2px;
    }
    .dg-v2-chat.collapsed .dg-v2-side-inner { display: none; }

    /* 開閉トグル（右列の上部） */
    .dg-v2-side-toggle {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 22px;
      padding: 0 6px;
      border: 1px solid var(--table-line);
      border-radius: var(--radius-sm);
      background: var(--table-chip);
      color: var(--table-label);
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      cursor: pointer;
    }
    .dg-v2-side-toggle:hover { background: #eef2f7; }
    .dg-v2-side-toggle-tri {
      width: 0; height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 6px solid var(--table-label);
      transition: transform var(--dur-fast) var(--ease-out);
    }
    .dg-v2-chat:not(.collapsed) .dg-v2-side-toggle-tri { transform: rotate(180deg); }
    .dg-v2-chat.collapsed .dg-v2-side-toggle { writing-mode: vertical-rl; height: auto; padding: 6px 0; gap: 4px; }
    .dg-v2-chat.collapsed .dg-v2-side-toggle-tri { transform: rotate(90deg); }

    .dg-v2-side-inner {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* カード情報＋効果プールの列（PC版のみ・盤面とログ列の間）。
       上＝触ったカードの詳細、下＝待機/処理中の効果。ログとは別の列に置く。 */
    .dg-v2-inspectcol {
      width: 236px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 8px 4px;
      gap: 6px;
      transition: width var(--dur-normal) var(--ease-out);
    }
    .dg-v2-inspectcol.collapsed { width: 30px; padding: 8px 2px; }
    .dg-v2-inspectcol.collapsed .dg-v2-inspectcol-inner { display: none; }
    .dg-v2-inspectcol.collapsed .dg-v2-side-toggle { writing-mode: vertical-rl; height: auto; padding: 6px 0; gap: 4px; }
    .dg-v2-inspectcol.collapsed .dg-v2-side-toggle-tri { transform: rotate(90deg); }
    .dg-v2-inspectcol:not(.collapsed) .dg-v2-side-toggle-tri { transform: rotate(180deg); }
    .dg-v2-inspectcol-inner {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* カード情報パネル（列の上段）。
       盤面のカードをクリック／右クリックすると、詳細モーダルと同じ内容をここへ出す。 */
    .dg-inspect {
      flex-shrink: 0;
      max-height: 58%;
      overflow-y: auto;
      padding: 7px 8px;
      border: 1px solid var(--table-line);
      border-radius: var(--radius-sm);
      background: #fff;
      scrollbar-width: thin;
    }

    /* 効果プール（列の下段）。待機中・処理中の誘発を積み上がった順に並べる */
    .dg-pool {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 7px 8px;
      border: 1px solid var(--table-line);
      border-radius: var(--radius-sm);
      background: var(--table-chip);
      overflow: hidden;
    }
    .dg-pool-head {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: var(--table-label);
      margin-bottom: 5px;
    }
    .dg-pool-count {
      padding: 0 5px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-size: 0.58rem;
      letter-spacing: 0;
    }
    .dg-pool-empty {
      color: var(--table-label);
      font-size: 0.6rem;
      line-height: 1.5;
      padding: 4px 2px;
    }
    .dg-pool-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
    /* 入れ子の深さぶんだけ右へずらして、どの誘発の上に積まれたかを見せる */
    .dg-pool-item {
      margin-bottom: 4px;
      margin-left: calc(var(--pool-depth, 0) * 8px);
      padding: 4px 6px;
      border: 1px solid var(--table-line);
      border-left: 3px solid #b9c4d2;
      border-radius: 5px;
      background: #fff;
    }
    .dg-pool-item.active { border-left-color: var(--accent); box-shadow: 0 0 0 1px rgba(212,85,63,.25); }
    .dg-pool-item-top { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
    .dg-pool-state {
      flex-shrink: 0;
      padding: 0 4px;
      border-radius: 3px;
      background: #e8edf5;
      color: #46586f;
      font-size: 0.54rem;
      font-weight: 800;
    }
    .dg-pool-item.active .dg-pool-state { background: var(--accent); color: #fff; }
    .dg-pool-timing {
      font-size: 0.56rem;
      color: var(--table-label);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dg-pool-name {
      font-size: 0.63rem;
      font-weight: 700;
      line-height: 1.35;
      color: var(--table-text, #1e2a3a);
      word-break: break-word;
    }
    .dg-pool-zone { margin-left: 4px; font-size: 0.54rem; font-weight: 600; color: var(--table-label); }
    .dg-pool-static-head {
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 8px 0 5px;
      padding-top: 7px;
      border-top: 1px solid var(--table-line);
      color: var(--table-label);
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.08em;
    }
    .dg-pool-static-item {
      margin-bottom: 4px;
      padding: 4px 6px;
      border: 1px solid var(--table-line);
      border-left: 3px solid #4f8a61;
      border-radius: 5px;
      background: #fff;
    }
    .dg-pool-static-item.inactive { opacity: .62; border-left-color: #9aa4b2; }
    .dg-pool-static-item .dg-pool-state { background: #dcefe2; color: #315d3e; }
    .dg-pool-static-item.inactive .dg-pool-state { background: #e8edf5; color: #46586f; }
    .dg-pool-static-text {
      margin-top: 2px;
      color: var(--table-label);
      font-size: 0.56rem;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }
    .dg-inspect-empty {
      color: var(--table-label);
      font-size: 0.62rem;
      line-height: 1.5;
      text-align: center;
      padding: 8px 2px;
    }
    .dg-inspect-head { display: flex; gap: 7px; align-items: flex-start; }
    .dg-inspect-art {
      width: 68px;
      flex-shrink: 0;
      border-radius: 4px;
      background: #eef1f6;
      object-fit: contain;
    }
    .dg-inspect-art.placeholder {
      height: 94px;
      display: grid;
      place-items: center;
      color: var(--table-label);
      font-size: 0.56rem;
      font-weight: 800;
    }
    .dg-inspect-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .dg-inspect-name {
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1.3;
      color: var(--table-text, #1e2a3a);
      word-break: break-word;
    }
    .dg-inspect-name.sub { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .dg-inspect-meta {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--table-label);
    }
    .dg-inspect-civ {
      padding: 1px 6px;
      border-radius: 999px;
      background: #e8edf5;
      color: #2c3b52;
      font-weight: 800;
    }
    .dg-inspect-civ.civ-fire { background: #fbe0d8; color: #8f2f18; }
    .dg-inspect-civ.civ-water { background: #d9e8fa; color: #14456f; }
    .dg-inspect-civ.civ-nature { background: #dcefdb; color: #1f5a2a; }
    .dg-inspect-civ.civ-light { background: #f8efd2; color: #7a5c11; }
    .dg-inspect-civ.civ-darkness { background: #e0dae6; color: #3d2b52; }
    .dg-inspect-civ.civ-multi { background: linear-gradient(90deg,#fbe0d8,#f8efd2,#dcefdb); color: #4a3a24; }
    .dg-inspect-power { color: #8f2f18; font-weight: 800; }
    .dg-inspect-race { font-size: 0.58rem; color: var(--table-label); line-height: 1.35; }
    .dg-inspect-text {
      margin-top: 7px;
      padding-top: 6px;
      border-top: 1px dashed var(--table-line);
      font-size: 0.64rem;
      line-height: 1.6;
      color: var(--table-text, #1e2a3a);
      white-space: normal;
      word-break: break-word;
    }
    .dg-inspect-text.empty { color: var(--table-label); font-style: italic; }
    .dg-inspect-divider {
      margin-top: 7px;
      text-align: center;
      font-size: 0.58rem;
      font-weight: 800;
      color: var(--table-label);
    }

    /* 表示切替は JS のデバイス判定（.active 付与）に一本化する。
       横向きスマホは幅が768pxを超えるため、幅ベースのgateだとSP版が消えてしまう。
       そのため .active クラスで出し分ける（片方のみ .active になる）。 */
    #app-mobile { display: none; }
    #app-mobile.active { display: flex; }
    #app-desktop { display: none; }
    #app-desktop.active { display: grid; }

    /* Hand discard modal */
    .dm-hd-modal {
      position: fixed;
      inset: 0;
      z-index: 3400;
      display: none;
    }
    .dm-hd-modal.open {
      display: block;
    }
    .dm-hd-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.45);
    }
    .dm-hd-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(560px, calc(100% - 28px));
      max-height: calc(100vh - 56px);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow-3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .dm-hd-body.mobile {
      width: calc(100% - 20px);
      left: 10px;
      right: 10px;
      top: auto;
      bottom: 14px;
      transform: none;
      max-height: 78vh;
    }
    .dm-hd-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid #e4ece4;
      flex-shrink: 0;
    }
    .dm-hd-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: #243447;
    }
    .dm-hd-close {
      background: none;
      border: none;
      font-size: var(--fs-lg);
      color: var(--text-dim);
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .dm-hd-close:hover { background: #f4f6fa; }
    .dm-hd-content {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }
    .dm-hd-mode-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .dm-hd-btn {
      width: 100%;
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid #c8d4c8;
      background: #edf4ed;
      color: #2a4a2a;
      font-size: var(--fs-md);
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      text-align: center;
    }
    .dm-hd-btn:hover { background: #ddeedd; }
    .dm-hd-btn.ok { background: var(--success); color: #fff; border-color: #5a7a5a; }
    .dm-hd-btn.ok:hover { background: #5a7a5a; }
    .dm-hd-cancel {
      padding: 8px 20px;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: #f0f0f0;
      color: #555;
      font-size: var(--fs-sm);
      cursor: pointer;
      font-family: inherit;
    }
    .dm-hd-cancel:hover { background: #e0e0e0; }
    .dm-hd-card-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
      justify-content: center;
      align-content: flex-start;
    }
    .dm-hd-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 112px;
      border-radius: 6px;
      border: 1.5px solid #5d6b7d;
      background: #ffffff;
      cursor: pointer;
      padding: 0;
      overflow: hidden;
      transition: transform 0.1s, box-shadow 0.1s;
      position: relative;
    }
    .dm-hd-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .dm-hd-card-img.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #edf2f7;
      color: #617588;
      font-size: 0.58rem;
      font-weight: 800;
    }
    .dm-hd-card-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 4px;
      gap: 3px;
    }
    .dm-hd-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    }
    .dm-hd-card.fire { border-color: #e35d2b; background: linear-gradient(160deg, #fff4ee, #fbdccb); }
    .dm-hd-card.water { border-color: #4f86c5; background: linear-gradient(160deg, #eef5ff, #cfe2fb); }
    .dm-hd-card.nature { border-color: #5b9a5a; background: linear-gradient(160deg, #eef8ee, #cfe8ce); }
    .dm-hd-card.light { border-color: #c9a83d; background: linear-gradient(160deg, #fffbef, #f8f0cf); }
    .dm-hd-card.dark,
    .dm-hd-card.darkness { border-color: #6c5a7e; background: linear-gradient(160deg, #f5f1fa, #ddd1ea); }
    .dm-hd-card-cost {
      font-size: 0.75rem;
      font-weight: 700;
      color: #243447;
      opacity: 0.8;
    }
    .dm-hd-card-power {
      font-size: 0.62rem;
      color: #33415a;
    }
    .dm-hd-confirm-msg {
      font-size: var(--fs-md);
      color: #243447;
      margin-bottom: 10px;
      line-height: 1.5;
    }
    .dm-hd-confirm-card {
      font-size: var(--fs-lg);
      font-weight: 700;
      color: #161f2b;
      text-align: center;
      padding: 10px;
      background: #f4f6fa;
      border-radius: 8px;
      border: 1px solid #d8dfe9;
      margin-bottom: 12px;
    }
    .dm-hd-confirm-btns {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    .dm-hd-waiting {
      text-align: center;
      padding: 20px;
      color: #33415a;
      font-size: var(--fs-md);
    }

    /* ─── マナの文明ごとの束（10枚以上。報告板 No.257） ───
       束の中のカードは重ねて詰め、左端の帯だけを見せる。チップはそのままなのでタップ等は1枚ずつ効く。
       重ね幅は行の高さ（カードの高さ）から決めるため、束を持つ欄を高さの基準（container）にする。 */
    .dg-v2-cards:has(.dg-mana-civ-group) { container-type: size; }
    .dg-mana-civ-group {
      --dg-mana-civ: var(--civ-multi);
      position: relative;
      flex-shrink: 0;
      align-self: stretch;
      display: flex;
      align-items: center;
      padding: 0 2px;
      border-radius: 6px;
      box-shadow: inset 0 -3px 0 var(--dg-mana-civ);
    }
    .dg-mana-civ-group.civ-light  { --dg-mana-civ: var(--civ-light); }
    .dg-mana-civ-group.civ-water  { --dg-mana-civ: var(--civ-water); }
    .dg-mana-civ-group.civ-dark   { --dg-mana-civ: var(--civ-dark); }
    .dg-mana-civ-group.civ-fire   { --dg-mana-civ: var(--civ-fire); }
    .dg-mana-civ-group.civ-nature { --dg-mana-civ: var(--civ-nature); }
    .dg-mana-civ-group.civ-zero,
    .dg-mana-civ-group.civ-back   { --dg-mana-civ: #7c8594; }
    .dg-mana-civ-stack {
      display: flex;
      align-items: center;
      height: 100%;
    }
    /* カード本体は z-index 10 を持つので、束の中の1枚ずつを重なりの単位にして後ろのカードが前を覆う形にする */
    .dg-mana-civ-stack > .dg-card-chip { position: relative; z-index: 1; }
    .dg-mana-civ-stack > .dg-card-chip + .dg-card-chip { margin-left: var(--dg-mana-overlap); }
    .dg-mana-civ-stack > .dg-card-chip:hover { z-index: 2; }
    .dg-v2-solo .dg-mana-civ-group { --dg-mana-overlap: -54px; }
    .dg-v2:not(.dg-v2-solo) .dg-mana-civ-group { --dg-mana-overlap: calc((100cqh - 4px) * -0.49); }
    .dg-mana-civ-label {
      position: absolute;
      top: 2px;
      left: 2px;
      z-index: 5;
      pointer-events: none;
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
      padding: 1px 6px;
      border-radius: 999px;
      background: var(--dg-mana-civ);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    .dg-mana-civ-label b { font-size: 12px; }
    .dg-mana-civ-label small { font-size: 10px; font-weight: 600; opacity: 0.9; }