/* V4: desktop battle screen legacy-style alignment */
    .dg-full-root {
      background:
        radial-gradient(1200px 520px at 78% -18%, rgba(59,110,165, 0.18), transparent 60%),
        radial-gradient(920px 460px at -8% 105%, rgba(122, 145, 166, 0.14), transparent 68%),
        #f4f6fa;
      color: var(--text);
    }

    .dg-turn-pill {
      border-radius: 999px;
      border: 1px solid #e4e9f1;
      background: #f4f6fa;
      color: #243447;
      font-size: var(--fs-sm);
      font-weight: 700;
      padding: 4px 11px;
      letter-spacing: 0.01em;
    }

    .dg-turn-pill b {
      color: #33415a;
      font-weight: 800;
      font-family: var(--font-num);
      letter-spacing: 0.02em;
    }

    .dg-full-state {
      border-color: #e4e9f1;
      background: #f4f6fa;
      color: #33415a;
    }

    .dg-full-state.mine {
      border-color: #5d6b7d;
      background: #e8edf4;
      color: #243447;
    }

    .dg-full-state.opponent {
      border-color: #b8c7d3;
      background: #e9eff4;
      color: #4f667a;
    }

    .dg-full-state.solo {
      border-color: #d8dfe9;
      background: #f4f6fa;
      color: #243447;
    }

    .dg-btn.deck-mana { background: #5e8b66; }
    .dg-btn.deck-grave { background: #33415a; }
    .dg-btn.deck-shield { background: #7d7298; }
    .dg-btn.shield-break { background: #7466a6; }
    .dg-btn.deck-reveal { background: #33415a; }
    .dg-btn.deck-peek { background: #5f7286; }
    .dg-btn.deck-all { background: #3f6d86; }
    .dg-btn.mana-untap { background: #4f7d67; }

    .dg-card-chip.hand,
    .dg-card-chip.battle {
      width: 68px;
      height: 95px;
      border-radius: 7px;
      font-size: 0.62rem;
      transition: transform .12s, box-shadow .12s;
    }
    /* タップ時のスロット幅アニメ用トランジション（実際の幅は盤面モード側で指定） */
    .dg-card-chip.battle,
    .dg-card-chip.mana { transition: width var(--dur-normal) var(--ease-out), box-shadow .12s; }

    /* マナ/シールドは手札と同寸（SP版とも揃えるサイズパリティ） */
    .dg-card-chip.mana {
      width: 68px;
      height: 95px;
      border-radius: 7px;
      font-size: 0.62rem;
    }

    .dg-card-chip.grave {
      width: 46px;
      height: 64px;
      border-radius: 7px;
      font-size: 0.6rem;
    }

    .dg-card-chip.shield {
      width: 68px;
      height: 95px;
      flex-shrink: 0;
      border-radius: 7px;
      font-size: var(--fs-sm);
    }

    .dg-card-chip.hand:hover,
    .dg-card-chip.battle:hover,
    .dg-card-chip.mana:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 18px rgba(23,32,46, 0.22);
      z-index: 4;
    }

    /* タップ回転はカードボディ側で表現（スロットは回転しない）。
       相手盤面カードは相手視点で180度回転（ボディ側に適用） */
    .dg-card-chip.opponent .dg-card-body {
      transform: translate(-50%, -50%) rotate(180deg);
    }
    /* マナの180度反転（非タップのみ）は相手視点でも同様に効くため、
       相手の未タップマナは結果として自陣から見て正立(0度)になる。 */
    .dg-card-chip.opponent.mana:not(.tapped) .dg-card-body {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    .dg-card-chip.battle.field-card.opponent .dg-card-body {
      transform: translate(-50%, -50%) rotate(270deg);
    }
    .dg-card-chip.battle.field-card.opponent.field-inverted .dg-card-body {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .dg-v2-row.opp-shield .dg-back-card,
    .dg-v2-row.opp-hand .dg-back-card {
      transform: rotate(180deg);
    }

    /* 相手シールドが表向き表示になった場合も、裏面同様に相手視点で180度回転させる
       （opp-hand/opp-battle/opp-mana の実カード表示と揃える）。 */
    .dg-v2-row.opp-shield .dg-card-chip.shield {
      transform: rotate(180deg);
    }

    .dg-back-card {
      border-radius: 6px;
    }

    .dg-more-chip {
      height: 48px;
      min-width: 36px;
      border-radius: 6px;
    }

    .mg-header.mine-turn {
      background: #2f7b56;
    }

    .mg-header.opponent-turn {
      background: #33415a;
    }

    .mg-header.solo-turn {
      background: var(--secondary);
    }

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

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

    .dm-confirm-modal {
      position: fixed;
      inset: 0;
      z-index: 3100;
      display: none;
    }

    .dm-confirm-modal.open {
      display: block;
    }

    .dm-confirm-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.35);
    }

    .dm-confirm-body {
      /* 配置は後方の .dm-confirm-modal 定義（相手カード確認セクション）の
         flexセンタリングに委ねる。ここで left/top/transform を指定すると
         後方定義の position:relative と合成されて右下へずれる */
      position: relative;
      width: min(440px, calc(100% - 24px));
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 10px 24px rgba(0,0,0,0.2);
    }

    .dm-confirm-body.mobile {
      width: min(420px, calc(100% - 20px));
    }

    .dm-confirm-message {
      color: var(--text);
      font-size: var(--fs-md);
      line-height: 1.45;
      margin-bottom: 12px;
    }

    .dm-confirm-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .dm-confirm-btn {
      border: none;
      border-radius: 8px;
      padding: 9px 14px;
      font-weight: 700;
      cursor: pointer;
      color: #fff;
    }

    .dm-confirm-btn.ok { background: var(--success); }
    .dm-confirm-btn.cancel { background: var(--neutral); }

    .dm-input-field {
      width: 100%;
      border: 1px solid var(--border, #d8dfe9);
      border-radius: 6px;
      padding: 8px 12px;
      font-size: var(--fs-lg);
      color: var(--text, #1d2733);
      background: #fff;
      margin-bottom: 14px;
      box-sizing: border-box;
    }

    .dm-input-field:focus {
      outline: none;
      border-color: var(--accent, #f4600c);
      box-shadow: 0 0 0 2px rgba(59,110,165,0.15);
    }

    /* 数値入力モーダル（askMobileNumber/askDesktopNumber）の−／＋ステッパー行。PC/SP共通。 */
    .dm-number-stepper-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    /* 枚数は−／＋ボタンのみで操作する読み取り専用の表示欄。キーボードは開かせない。 */
    .dm-number-stepper-row .dm-number-stepper-input {
      flex: 1 1 auto;
      min-width: 0;
      margin-bottom: 0;
      cursor: default;
      caret-color: transparent;
      user-select: none;
      -webkit-user-select: none;
    }

    .dm-number-step-btn {
      flex: 0 0 auto;
    }

    .dm-card-detail-modal {
      position: fixed;
      inset: 0;
      z-index: 3250;
      display: none;
    }

    /* 選択モーダル(3720)のカードを右クリックして開いた詳細は、その上へ重ねる */
    .dm-card-detail-modal.above-choice {
      z-index: 3760;
    }

    .dm-card-detail-modal.open {
      display: block;
    }

    .dm-card-detail-modal.above-under-modal {
      z-index: 3450;
    }

    /* 墓地・山札・シールド等の一覧モーダル(3320)から開いた詳細は、その上へ重ねる。
       素の 3250 のままだと一覧の裏に潜って表示が崩れる */
    .dm-card-detail-modal.above-list-modal {
      z-index: 3400;
    }

    /* 呪文の「唱える」とクリーチャー/フィールドの「場に出す」で使う、PC/SP共通の非ブロッキング演出。 */
    .dm-cast-overlay {
      position: fixed;
      inset: 0;
      z-index: 3150;
      display: grid;
      place-items: center;
      visibility: hidden;
      pointer-events: none;
      background: transparent;
    }

    /* 演出中はタップで飛ばせる（skipDMFx） */
    .dm-cast-overlay.active {
      visibility: visible;
      pointer-events: auto;
      cursor: pointer;
    }

    .dm-cast-inner {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 8px;
      width: min(38vh, 46vw, 240px);
      opacity: 0;
      filter: drop-shadow(0 12px 22px rgba(38, 76, 121, 0.25));
      isolation: isolate;
    }

    .dm-cast-overlay.active .dm-cast-inner {
      animation:
        dmCastIn 160ms var(--ease-spring) forwards,
        dmCastOut 150ms var(--ease-out) 470ms forwards;
    }

    .dm-cast-card {
      display: block;
      width: 100%;
      max-height: min(58vh, 420px);
      object-fit: contain;
      border-radius: 10px;
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.9),
        0 0 24px rgba(62, 133, 214, 0.6),
        0 12px 30px rgba(19, 42, 70, 0.3);
    }

    /* フィールドは横向きが正位置。盤面へ入る前のカットインも同じ向きにする。 */
    .dm-cast-inner.field-entry {
      width: min(58vh, 70vw, 420px);
    }

    .dm-cast-inner.field-entry:not(.no-image) .dm-cast-card {
      width: min(38vh, 46vw, 240px);
      transform: rotate(90deg);
    }

    .dm-cast-inner::after {
      content: '';
      position: absolute;
      z-index: 2;
      inset: 0 0 38px;
      border-radius: 12px;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.18) 72%, transparent 100%);
      background-repeat: no-repeat;
      background-position: -60% 50%;
      background-size: 34% 145%;
      opacity: 0;
    }

    .dm-cast-overlay.active .dm-cast-inner::after {
      animation: dmCastSweep 340ms var(--ease-out) 110ms 1 both;
    }

    .dm-cast-label {
      position: relative;
      z-index: 3;
      max-width: min(80vw, 420px);
      padding: 6px 12px;
      border: 1px solid rgba(102, 135, 170, 0.28);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 5px 16px rgba(31, 54, 82, 0.18);
      color: var(--text, #1d2733);
      font-size: var(--fs-sm, 0.82rem);
      font-weight: 800;
      line-height: 1.35;
      text-align: center;
      white-space: pre-line;
    }

    .dm-cast-inner.no-image {
      width: min(76vw, 360px);
      min-height: min(42vh, 170px);
      align-content: center;
      padding: 24px;
      border: 2px solid rgba(255,255,255,0.95);
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(239,247,255,0.98), rgba(255,255,255,0.98));
      box-shadow: 0 0 28px rgba(62, 133, 214, 0.48), 0 12px 30px rgba(19,42,70,0.22);
    }

    .dm-cast-inner.no-image::after,
    .dm-cast-inner.no-image .dm-cast-card {
      display: none;
    }

    .dm-cast-inner.no-image .dm-cast-label {
      border: 0;
      background: transparent;
      box-shadow: none;
      font-size: var(--fs-xl, 1.15rem);
    }

    @keyframes dmCastIn {
      from { opacity: 0; transform: scale(0.55); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes dmCastSweep {
      0% { background-position: -60% 50%; opacity: 0; }
      18% { opacity: 1; }
      82% { opacity: 1; }
      100% { background-position: 160% 50%; opacity: 0; }
    }

    @keyframes dmCastOut {
      from { opacity: 1; transform: scale(1); }
      to { opacity: 0; transform: scale(1.06); }
    }

    @media (prefers-reduced-motion: reduce) {
      .dm-cast-overlay.active .dm-cast-inner {
        animation:
          dmCastIn 150ms linear forwards,
          dmCastOut 150ms linear 150ms forwards;
      }

      .dm-cast-overlay.active .dm-cast-inner::after {
        animation: none;
        display: none;
      }
    }

    /* PC/SP共通のカード移動演出。小さな光点＋短い尾＋到着残光だけを描く。 */
    .dm-card-move-fx,
    .dm-card-move-arrival,
    .dm-card-move-departure {
      --dm-card-move-accent: #55c8ff;
      --dm-card-move-accent-rgb: 85, 200, 255;
      pointer-events: none;
    }

    .dm-card-move-fx.is-opponent,
    .dm-card-move-fx[data-side="opponent"],
    .dm-card-move-arrival.is-opponent,
    .dm-card-move-departure.is-opponent {
      --dm-card-move-accent: #ffb454;
      --dm-card-move-accent-rgb: 255, 180, 84;
    }

    .dm-card-move-fx,
    .dm-card-move-fx.is-mobile {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 3790;
      display: block;
      width: 0;
      height: 0;
      overflow: visible;
      isolation: isolate;
    }

    .dm-card-move-comet,
    .dm-card-move-fx.is-mobile .dm-card-move-comet {
      position: fixed;
      top: 0;
      left: 0;
      box-sizing: border-box;
      width: 9px;
      height: 9px;
      border: 1px solid rgba(255, 255, 255, .92);
      border-radius: 50%;
      background: #fff;
      box-shadow:
        0 0 5px 2px rgba(var(--dm-card-move-accent-rgb), .9),
        0 0 12px 5px rgba(var(--dm-card-move-accent-rgb), .38);
      transform-origin: center;
      will-change: transform, opacity;
    }

    .dm-card-move-comet::before {
      content: '';
      position: absolute;
      top: 50%;
      right: 4px;
      width: 30px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(var(--dm-card-move-accent-rgb), .78));
      filter: blur(.7px);
      transform: translateY(-50%);
    }

    .dm-card-move-arrival,
    .dm-card-move-departure {
      position: fixed;
      z-index: 3789;
      box-sizing: border-box;
      width: 12px;
      height: 12px;
      border: 2px solid rgba(var(--dm-card-move-accent-rgb), .86);
      border-radius: 50%;
      box-shadow: 0 0 10px 3px rgba(var(--dm-card-move-accent-rgb), .42);
      transform: translate(-50%, -50%);
      will-change: transform, opacity, box-shadow;
    }

    .dm-card-move-arrival::after,
    .dm-card-move-departure::after {
      content: '';
      position: absolute;
      inset: -5px;
      border: 1px solid rgba(var(--dm-card-move-accent-rgb), .5);
      border-radius: 50%;
    }

    .dm-card-move-follow {
      position: absolute;
      inset: 0;
      z-index: 30;
      box-sizing: border-box;
      border: 2px solid rgba(85, 200, 255, .96);
      border-radius: inherit;
      box-shadow: inset 0 0 8px rgba(85, 200, 255, .62);
      pointer-events: none;
      opacity: 0;
      animation: dmCardMoveFollow 240ms ease-out var(--dm-follow-delay, 170ms) both;
    }

    .dm-card-move-follow.is-opponent {
      border-color: rgba(255, 180, 84, .96);
      box-shadow: inset 0 0 8px rgba(255, 180, 84, .62);
    }

    @keyframes dmCardMoveFollow {
      0% { opacity: 0; }
      28% { opacity: 1; }
      100% { opacity: 0; }
    }

    @media (max-width: 700px) {
      .dm-card-move-comet,
      .dm-card-move-fx.is-mobile .dm-card-move-comet {
        width: 8px;
        height: 8px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .dm-card-move-comet { display: none; }
      .dm-card-move-arrival::after,
      .dm-card-move-departure::after { display: none; }
      .dm-card-move-follow { animation-duration: 180ms; }
    }

    .dm-destroy-fx-card,
    .dm-shield-break-fx-card {
      position: fixed !important;
      z-index: 3160;
      margin: 0 !important;
      pointer-events: none !important;
      transform-origin: center;
      will-change: transform, opacity, filter;
    }
    .dm-destroy-fx-card {
      animation: dmDestroyShatter 420ms cubic-bezier(.2,.7,.25,1) 130ms both;
      clip-path: var(--dm-fx-clip);
      filter: saturate(1.8) brightness(1.2) drop-shadow(0 0 8px rgba(220,38,38,.9));
    }
    .dm-destroy-fx-flash {
      position: fixed;
      z-index: 3159;
      border-radius: 8px;
      pointer-events: none;
      background: rgba(239,68,68,.72);
      box-shadow: 0 0 18px rgba(220,38,38,.9);
      animation: dmDestroyFlash 160ms ease-out both;
    }
    @keyframes dmDestroyFlash {
      from { opacity: 0; transform: scale(.96); }
      45% { opacity: 1; }
      to { opacity: 0; transform: scale(1.04); }
    }
    @keyframes dmDestroyShatter {
      0% { opacity: 1; transform: translate(0, 0) rotate(0); }
      72% { opacity: .9; }
      100% { opacity: 0; transform: translate(var(--dm-fx-x), var(--dm-fx-y)) rotate(var(--dm-fx-r)); }
    }

    .dm-shield-break-fx-card {
      overflow: hidden;
      border-radius: 8px;
      opacity: 0;
      box-shadow: 0 0 18px rgba(255,255,255,.95), 0 0 30px rgba(96,165,250,.65);
    }
    .dm-shield-break-fx-card.active {
      animation: dmShieldBreakBurst 400ms cubic-bezier(.18,.76,.28,1) both;
    }
    .dm-shield-break-fx-card::before {
      content: '';
      position: absolute;
      z-index: 20;
      inset: -10%;
      background:
        linear-gradient(115deg, transparent 47%, #fff 48% 51%, transparent 52%),
        linear-gradient(55deg, transparent 46%, #fff 47% 50%, transparent 51%),
        linear-gradient(145deg, transparent 48%, rgba(255,255,255,.9) 49% 51%, transparent 52%);
      filter: drop-shadow(0 0 3px #fff);
    }
    .dm-shield-break-fx-card::after {
      content: '';
      position: absolute;
      z-index: 21;
      inset: 0;
      background: #fff;
    }
    .dm-shield-break-fx-card.active::after {
      animation: dmShieldBreakFlash 400ms ease-out both;
    }
    @keyframes dmShieldBreakBurst {
      0% { opacity: 0; transform: scale(.94); }
      18% { opacity: 1; transform: scale(1.05); }
      72% { opacity: 1; transform: scale(1.02); }
      100% { opacity: 0; transform: scale(1.16); }
    }
    @keyframes dmShieldBreakFlash {
      0% { opacity: 0; }
      18% { opacity: .94; }
      42%, 100% { opacity: 0; }
    }

    .dm-block-fx {
      position: fixed !important;
      z-index: 3165;
      display: grid !important;
      place-items: center;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      pointer-events: none !important;
      transform: none !important;
    }
    .dm-block-fx-shield {
      width: 76%;
      height: 84%;
      overflow: visible;
      filter: drop-shadow(0 0 9px rgba(37,99,235,.95));
      animation: dmBlockShieldBurst 400ms cubic-bezier(.18,.76,.28,1) both;
    }
    .dm-block-fx-label {
      position: absolute;
      left: 50%;
      top: calc(100% + 5px);
      translate: -50% 0;
      padding: 2px 9px;
      border: 1px solid rgba(255,255,255,.95);
      border-radius: 999px;
      background: #1d4ed8;
      box-shadow: 0 0 12px rgba(37,99,235,.8);
      color: #fff;
      font-size: clamp(.68rem, 2.5vw, .82rem);
      font-weight: 900;
      line-height: 1.25;
      white-space: nowrap;
      animation: dmBlockLabelBurst 400ms ease-out both;
    }
    @keyframes dmBlockShieldBurst {
      0% { opacity: 0; transform: scale(.42); }
      22% { opacity: 1; transform: scale(1.08); }
      72% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.3); }
    }
    @keyframes dmBlockLabelBurst {
      0% { opacity: 0; transform: translateY(4px); }
      22%, 72% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-3px); }
    }
    @keyframes dmBlockFade {
      0%, 70% { opacity: 1; }
      100% { opacity: 0; }
    }

    .dm-battle-fx {
      position: fixed;
      inset: 0;
      z-index: 3170;
      display: grid;
      place-items: center;
      visibility: hidden;
      pointer-events: none;
    }
    .dm-battle-fx.active { visibility: visible; pointer-events: auto; cursor: pointer; }
    .dm-battle-fx-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(8px, 2vw, 18px);
      max-width: calc(100vw - 24px);
      padding: 10px 18px;
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 14px;
      background: rgba(23,32,46,.9);
      box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 18px rgba(255,255,255,.25);
      color: #fff;
      font-weight: 900;
      font-size: clamp(1.15rem, 5vw, 2rem);
      white-space: nowrap;
    }
    .dm-battle-fx.active .dm-battle-fx-panel {
      animation: dmBattleResult 560ms cubic-bezier(.2,.72,.25,1) both;
    }
    .dm-battle-fx-vs { color: #fbbf24; font-size: .62em; }
    /* 数字を読む間もわずかに寄せ続け、止まって見えないようにする */
    @keyframes dmBattleResult {
      0% { opacity: 0; transform: scale(.75); }
      18% { opacity: 1; transform: scale(1); }
      78% { opacity: 1; transform: scale(1.04); }
      100% { opacity: 0; transform: scale(1.08); }
    }

    .dm-turn-change-fx {
      position: fixed;
      inset: 0;
      z-index: 3400;
      display: grid;
      place-items: center;
      visibility: hidden;
      pointer-events: none;
      background: rgba(8, 15, 29, .34);
      opacity: 0;
    }
    .dm-turn-change-fx.active {
      visibility: visible;
      pointer-events: auto;
      cursor: pointer;
      animation: dmTurnChangeBackdrop 440ms ease-in-out both;
    }
    .dm-turn-change-fx-lines {
      display: none;
    }
    .dm-turn-change-fx-panel {
      width: min(360px, calc(100vw - 32px));
      padding: 12px 20px 14px;
      border: 1px solid rgba(255,255,255,.62);
      border-radius: 12px;
      background: rgba(15, 23, 42, .9);
      box-shadow: 0 8px 22px rgba(0,0,0,.32);
      color: #fff;
      text-align: center;
      opacity: 0;
      transform: translateY(6px) scale(.98);
    }
    .dm-turn-change-fx.active .dm-turn-change-fx-panel {
      animation: dmTurnChangePanel 440ms ease-in-out both;
    }
    .dm-turn-change-fx-extra {
      min-height: 1.2em;
      color: #fcd34d;
      font-size: clamp(.66rem, 2.4vw, .8rem);
      font-weight: 900;
      letter-spacing: .18em;
      line-height: 1.2;
    }
    .dm-turn-change-fx:not(.extra) .dm-turn-change-fx-extra { display: none; }
    .dm-turn-change-fx-turn {
      margin-top: 5px;
      font-size: clamp(1.35rem, 6vw, 2.1rem);
      font-weight: 950;
      letter-spacing: .08em;
      line-height: 1.05;
    }
    .dm-turn-change-fx-player {
      margin-top: 6px;
      font-size: clamp(.9rem, 3.6vw, 1.15rem);
      font-weight: 850;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    @keyframes dmTurnChangeBackdrop {
      0%, 100% { opacity: 0; }
      16%, 78% { opacity: 1; }
    }
    @keyframes dmTurnChangePanel {
      0% { opacity: 0; transform: translateY(6px) scale(.98); }
      18% { opacity: 1; transform: translateY(0) scale(1); }
      76% { opacity: 1; transform: translateY(-2px) scale(1.02); }
      100% { opacity: 0; transform: translateY(-4px) scale(1.02); }
    }

    @media (prefers-reduced-motion: reduce) {
      .dm-destroy-fx-card { display: none; }
      .dm-destroy-fx-flash { animation-duration: 200ms; }
      .dm-shield-break-fx-card.active { animation: dmShieldBreakFlash 200ms linear both; }
      .dm-shield-break-fx-card::before { display: none; }
      .dm-shield-break-fx-card.active::after { animation-duration: 200ms; }
      .dm-block-fx-shield,
      .dm-block-fx-label { animation: dmBlockFade 200ms linear both; }
      .dm-battle-fx.active .dm-battle-fx-panel { animation: dmBattleResult 220ms linear both; }
      .dm-turn-change-fx.active { animation: dmTurnChangeBackdrop 180ms linear both; }
      .dm-turn-change-fx.active .dm-turn-change-fx-panel { animation: dmTurnChangePanel 180ms linear both; }
    }

    .dm-card-detail-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.42);
    }

    .dm-card-detail-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(860px, calc(100% - 28px));
      max-height: calc(100vh - 56px);
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.24);
      display: flex;
      flex-direction: column;
    }

    .dm-card-detail-body.mobile {
      width: calc(100% - 20px);
      left: 10px;
      right: 10px;
      top: auto;
      bottom: 12px;
      transform: none;
      max-height: 78vh;
    }

    .dm-card-detail-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid #e1e7e2;
      background: #f3f6f4;
    }

    .dm-card-detail-title {
      font-size: var(--fs-lg);
      font-weight: 700;
      color: #2f3d35;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-card-detail-close {
      border: none;
      border-radius: 8px;
      background: var(--neutral);
      color: #fff;
      width: 34px;
      height: 30px;
      font-size: var(--fs-lg);
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
    }

    .dm-card-detail-content {
      padding: 12px 14px 14px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .dm-card-detail-loading,
    .dm-card-detail-error {
      padding: 18px 8px;
      font-size: var(--fs-md);
      text-align: center;
      color: #56635d;
    }

    .dm-card-detail-error {
      color: #33415a;
    }

    .dm-card-detail-main {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .dm-card-detail-art-wrap {
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #d7dfda;
      background: #eef2ef;
      aspect-ratio: 0.72;
      width: 100%;
      max-width: 180px;
    }

    .dm-card-detail-art-wrap.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dm-card-detail-art {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .dm-card-detail-art-placeholder {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: #6c7a72;
    }

    .dm-card-detail-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--fs-md);
    }

    .dm-card-detail-table th,
    .dm-card-detail-table td {
      padding: 5px 6px;
      border-bottom: 1px solid #e8eeea;
      text-align: left;
      vertical-align: top;
    }

    .dm-card-detail-table th {
      color: #6d7a73;
      width: 66px;
      font-weight: 700;
      font-size: var(--fs-sm);
    }

    .dm-card-detail-twinpact-divider {
      text-align: center;
      font-size: var(--fs-sm);
      color: #33415a;
      letter-spacing: 0.1em;
      margin: 10px 0 6px;
      opacity: 0.8;
    }

    .dm-card-detail-civ {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      padding: 1px 10px;
      border-radius: 999px;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #fff;
      background: #8d969c;
    }

    .dm-card-detail-civ.fire { background: #e35d2b; }
    .dm-card-detail-civ.water { background: #4f86c5; }
    .dm-card-detail-civ.nature { background: #5b9a5a; }
    .dm-card-detail-civ.light { background: #c9a83d; color: #5a4a1d; }
    .dm-card-detail-civ.dark,
    .dm-card-detail-civ.darkness { background: #6c5a7e; }

    .dm-card-detail-id {
      font-size: 0.75rem;
      color: #6d7a73;
      word-break: break-all;
    }

    .dm-card-detail-text {
      font-size: var(--fs-md);
      color: #33423a;
      line-height: 1.5;
      padding: 10px 12px;
      border: 1px solid #e0e7e2;
      border-radius: 8px;
      background: #f8fbf9;
    }

    .dm-card-detail-text.empty {
      color: #76847d;
      text-align: center;
      font-size: var(--fs-md);
    }

    .dm-card-detail-sub-actions {
      display: flex;
      justify-content: flex-end;
    }

    .dm-card-detail-illustration-btn {
      border: 1px solid #d2dbd5;
      border-radius: 8px;
      padding: 8px 12px;
      background: #ffffff;
      color: #2f3d35;
      font-size: var(--fs-sm);
      font-weight: 700;
      cursor: pointer;
    }

    .dm-card-detail-illustration-btn:hover {
      background: #f4f7f5;
    }

    .dm-card-detail-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .dm-card-detail-add {
      border: none;
      border-radius: 8px;
      padding: 9px 14px;
      background: #5d6b7d;
      color: #fff;
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
    }
    .dm-card-detail-add.ex {
      padding: 9px 12px;
      background: #6d5494;
      font-size: var(--fs-sm);
    }
    .dm-card-detail-add.ex:hover { background: #5c4680; }

    /* デッキ内カード詳細の枚数調整行（PC/SP共通）: [−][x枚数][＋]（イラスト変更）[削除] */
    .dm-card-detail-qty-btn {
      border: none;
      border-radius: 8px;
      min-width: 44px;
      padding: 9px 12px;
      background: #5d6b7d;
      color: #fff;
      font-size: var(--fs-lg);
      font-weight: 700;
      cursor: pointer;
    }
    .dm-card-detail-qty-btn:hover { background: #4e5b6b; }
    .dm-card-detail-qty-num {
      min-width: 44px;
      text-align: center;
      font-size: var(--fs-md);
      font-weight: 700;
      color: #2f3d35;
    }
    .dm-card-detail-del {
      border: none;
      border-radius: 8px;
      padding: 9px 14px;
      background: var(--danger);
      color: #fff;
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
    }
    .dm-card-detail-del:hover { filter: brightness(0.95); }

    .dm-art-picker-modal {
      position: fixed;
      inset: 0;
      z-index: 3300;
      display: none;
    }

    .dm-art-picker-modal.open {
      display: block;
    }

    .dm-art-picker-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.46);
    }

    .dm-art-picker-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(900px, calc(100% - 28px));
      max-height: calc(100vh - 56px);
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.24);
      display: flex;
      flex-direction: column;
    }

    .dm-art-picker-body.mobile {
      width: calc(100% - 20px);
      left: 10px;
      right: 10px;
      top: auto;
      bottom: 12px;
      transform: none;
      max-height: 76vh;
    }

    .dm-art-picker-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 11px 13px;
      border-bottom: 1px solid #e1e7e2;
      background: #f3f6f4;
    }

    .dm-art-picker-title {
      font-size: var(--fs-lg);
      font-weight: 700;
      color: #2f3d35;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dm-art-picker-close {
      border: none;
      border-radius: 8px;
      background: var(--neutral);
      color: #fff;
      width: 34px;
      height: 30px;
      font-size: var(--fs-lg);
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
    }

    .dm-art-picker-content {
      padding: 12px 14px 14px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .dm-art-picker-loading,
    .dm-art-picker-error,
    .dm-art-picker-empty {
      padding: 18px 8px;
      font-size: var(--fs-md);
      text-align: center;
      color: #56635d;
    }

    .dm-art-picker-error {
      color: #33415a;
    }

    .dm-art-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
      gap: 10px;
    }

    .dm-art-picker-item {
      border: 1px solid #d3ddd7;
      border-radius: 10px;
      background: #fff;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      cursor: pointer;
      transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .dm-art-picker-item:hover {
      border-color: #b9c8bf;
    }

    .dm-art-picker-item.selected {
      border-color: #5d6b7d;
      box-shadow: 0 0 0 2px rgba(244,96,12,0.16);
    }

    .dm-art-picker-thumb {
      width: 100%;
      aspect-ratio: 0.72;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid #e2e9e4;
      background: #edf2ee;
      display: block;
    }

    .dm-art-picker-thumb.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-xs);
      font-weight: 700;
      color: #6c7a72;
    }

    .dm-art-picker-label {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: #4a5b52;
      text-align: left;
      line-height: 1.3;
      min-height: 2.2em;
      word-break: break-word;
    }

    @media (max-width: 768px) {
      .dm-card-detail-main {
        grid-template-columns: 1fr;
      }

      .dm-card-detail-art-wrap {
        max-width: 150px;
      }

      .dm-card-detail-sub-actions,
      .dm-card-detail-actions {
        justify-content: flex-start;
      }

      .dm-art-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
      }
    }

    /* V3: graveyard modal viewer */
    .dm-grave-modal {
      position: fixed;
      inset: 0;
      z-index: 3200;
      display: none;
    }

    .dm-grave-modal.open {
      display: block;
    }

    .dm-grave-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.38);
    }

    .dm-grave-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(560px, calc(100% - 28px));
      max-height: calc(100vh - 60px);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(0,0,0,0.2);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .dm-grave-body.mobile {
      width: calc(100% - 20px);
      left: 10px;
      right: 10px;
      top: auto;
      bottom: 14px;
      transform: none;
      max-height: 70vh;
    }

    .dm-grave-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border-bottom: 1px solid #e1e7e2;
      background: #f3f6f4;
    }

    .dm-grave-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
    }

    .dm-grave-close {
      border: none;
      border-radius: 6px;
      padding: 7px 10px;
      background: var(--neutral);
      color: #fff;
      font-size: var(--fs-sm);
      font-weight: 700;
      cursor: pointer;
    }

    .dm-grave-list {
      padding: 10px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .dm-grave-item {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 8px;
      align-items: center;
      border: 1px solid #d9e1dc;
      border-left: 4px solid #9ca6ad;
      background: #f8fbf9;
      border-radius: 8px;
      padding: 7px 9px;
    }

    .dm-grave-item.fire { border-left-color: #e35d2b; }
    .dm-grave-item.water { border-left-color: #4f86c5; }
    .dm-grave-item.nature { border-left-color: #5b9a5a; }
    .dm-grave-item.light { border-left-color: #c9a83d; }
    .dm-grave-item.dark,
    .dm-grave-item.darkness { border-left-color: #6c5a7e; }
    .dm-grave-item.multi,
    .dm-grave-item.neutral { border-left-color: #8d969c; }

    .dm-grave-item-no {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e7ece9;
      color: #52615a;
      font-size: var(--fs-xs);
      font-weight: 700;
    }

    .dm-grave-item-meta {
      font-size: var(--fs-xs);
      color: #617069;
      margin-top: 1px;
    }

    .dm-modal-card-grid {
      flex: 1;
      padding: 12px;
      overflow: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
      gap: 8px;
      align-content: start;
      background: #eff3f8;
    }

    .dm-modal-card {
      position: relative;
      min-width: 0;
      border: 1px solid #cdd6e0;
      border-radius: 10px;
      background: #f8fbff;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .dm-modal-card.interactive {
      cursor: pointer;
    }

    .dm-modal-card.interactive:hover {
      border-color: #8fa6bd;
      background: #ffffff;
    }

    .dm-modal-card-no {
      position: absolute;
      top: 5px;
      left: 5px;
      min-width: 22px;
      height: 18px;
      border-radius: 999px;
      background: rgba(42, 58, 76, 0.88);
      color: #ffffff;
      font-size: 0.68rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      line-height: 1;
      z-index: 1;
    }

    .dm-modal-card-art {
      width: min(86px, 100%);
      aspect-ratio: 5 / 7;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 12px rgba(56, 65, 77, 0.22);
    }

    .dm-modal-card-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border: 1px solid rgba(95, 115, 136, 0.4);
      background: #dce6f0;
    }

    .dm-modal-card-thumb.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #617588;
      font-size: 0.56rem;
      font-weight: 800;
    }

    .dm-bulk-move-modal {
      position: fixed;
      inset: 0;
      z-index: 3350;
      display: none;
    }

    .dm-bulk-move-modal.open { display: block; }

    .dm-bulk-move-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.48);
    }

    .dm-bulk-move-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(980px, calc(100% - 36px));
      max-height: calc(100vh - 64px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f7f8fa;
      border: 3px solid #5d6b7d;
      border-radius: 16px;
      box-shadow: 0 16px 36px rgba(0,0,0,.28);
    }

    .dm-bulk-move-head,
    .dm-bulk-move-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: #fbfcff;
    }

    .dm-bulk-move-head {
      justify-content: space-between;
      border-bottom: 1px solid #d8dde4;
    }

    .dm-bulk-move-title { color: #4b5a6c; font-size: var(--fs-lg); font-weight: 800; }
    .dm-bulk-move-close,
    .dm-bulk-move-submit {
      border: 0;
      border-radius: 8px;
      padding: 8px 14px;
      color: #fff;
      font-weight: 800;
      cursor: pointer;
    }
    .dm-bulk-move-close { background: #8a8f98; }
    .dm-bulk-move-submit { background: #2f6f9f; }
    .dm-bulk-move-peek { border: 0; border-radius: 8px; padding: 8px 14px; background: #3f6ea8; color: #fff; font-weight: 800; cursor: pointer; }
    .dm-bulk-move-submit:disabled { opacity: .45; cursor: default; }

    .dm-bulk-move-list {
      min-height: 0;
      padding: 14px;
      overflow: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 10px;
      background: #edf0f5;
    }

    .dm-bulk-move-card {
      position: relative;
      min-width: 0;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 5px;
      background: #fff;
      cursor: pointer;
    }
    .dm-bulk-move-card.selected { border-color: #2f6f9f; box-shadow: 0 0 0 2px rgba(47,111,159,.16); }
    .dm-bulk-move-thumb { display: block; width: 100%; aspect-ratio: 5/7; object-fit: cover; border-radius: 6px; }
    .dm-bulk-move-card-back {
      background-image: var(--card-back-image);
      background-position: center;
      background-size: cover;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
    }
    .dm-bulk-move-no,
    .dm-bulk-move-check {
      position: absolute;
      z-index: 1;
      top: 8px;
      display: grid;
      place-items: center;
      min-width: 22px;
      height: 22px;
      border-radius: 999px;
      color: #fff;
      font-size: .72rem;
      font-weight: 900;
    }
    .dm-bulk-move-no { left: 8px; background: rgba(31,41,55,.78); }
    .dm-bulk-move-check { right: 8px; background: #2f6f9f; }
    .dm-bulk-move-card:not(.selected) .dm-bulk-move-check { display: none; }
    .dm-effect-target-badge {
      display: block;
      width: 100%;
      margin-top: 6px;
      border-radius: 6px;
      padding: 4px 3px;
      color: #334155;
      background: #e2e8f0;
      font-size: .72rem;
      font-weight: 900;
      line-height: 1.35;
      white-space: normal;
      overflow-wrap: anywhere;
      text-align: center;
    }
    .dm-effect-target-badge.match { color: #14532d; background: #dcfce7; }
    .dm-effect-target-badge.outside { color: #7c2d12; background: #ffedd5; }
    .dm-effect-target-badge.unknown { color: #713f12; background: #fef3c7; }
    .dm-bulk-move-controls { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid #d8dde4; }
    .dm-bulk-move-check-all { margin-right: auto; color: #4b5a6c; font-weight: 800; }
    .dm-bulk-move-select { min-width: 180px; border: 1px solid #b8c0cb; border-radius: 8px; padding: 8px 10px; background: #fff; }
    .dm-bulk-move-select[hidden], .dm-reveal-select[hidden], .dm-bulk-move-check-all[hidden], .dm-reveal-check-all[hidden] { display: none; }
    /* 効果の対象選択（PC）: 候補を読める大きさで中央に並べ、選んだカードを枠で示す */
    .dm-bulk-move-modal.effect-pick .dm-bulk-move-list {
      grid-template-columns: repeat(auto-fit, minmax(128px, 150px));
      justify-content: center;
      align-content: start;
    }
    .dm-bulk-move-modal.effect-pick .dm-bulk-move-card { border-width: 3px; }
    .dm-bulk-move-modal.effect-pick .dm-bulk-move-card.selected {
      border-color: #1f6fb2; background: #eaf4ff; box-shadow: 0 0 0 3px rgba(31,111,178,.3);
    }
    .dm-bulk-move-modal.effect-pick .dm-bulk-move-check { min-width: 26px; height: 26px; font-size: .8rem; }

    .dm-reveal-modal {
      position: fixed;
      inset: 0;
      z-index: 3300;
      display: none;
    }

    .dm-reveal-modal.open {
      display: block;
    }
    .dm-reveal-peek { border: 0; border-radius: 8px; padding: 8px 14px; background: #3f6ea8; color: #fff; font-weight: 800; cursor: pointer; }

    .dm-reveal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.42);
    }

    .dm-reveal-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(1080px, calc(100% - 36px));
      max-height: calc(100vh - 64px);
      background: #f7f8fa;
      border: 3px solid #5d6b7d;
      border-radius: 16px;
      box-shadow: 0 16px 36px rgba(0,0,0,0.28);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .dm-reveal-head {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid #d8dde4;
      background: #fbfcff;
    }

    .dm-reveal-title {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: var(--fs-lg);
      font-weight: 800;
      color: #4b5a6c;
    }

    .dm-reveal-close {
      flex-shrink: 0;
      border: none;
      border-radius: 8px;
      background: #8a8f98;
      color: #fff;
      font-size: var(--fs-sm);
      font-weight: 700;
      padding: 8px 12px;
      cursor: pointer;
    }

    .dm-reveal-list {
      min-height: 0;
      padding: 12px 14px;
      overflow: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
      gap: 8px;
      background: #f2f4f8;
    }

    .dm-reveal-card {
      position: relative;   /* 選択順バッジ（.dm-reveal-order）の基準 */
      border-radius: 10px;
      border: 1px solid #d2d8df;
      background: #eceff4;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: border-color 0.14s ease, transform 0.14s ease;
    }

    .dm-reveal-card.selected {
      border-color: #5d6b7d;
      background: #ffffff;
    }
    /* 効果の対象選択（SP）: 選ぶ手段はカードのタップだけ。選んだカードを枠で示す */
    .dm-reveal-modal.effect-pick .dm-reveal-card { border-width: 2px; }
    .dm-reveal-modal.effect-pick .dm-reveal-card.selected {
      border-color: #1f6fb2; background: #eaf4ff; box-shadow: 0 0 0 3px rgba(31,111,178,.3);
    }

    .dm-reveal-card:hover {
      transform: translateY(-1px);
    }

    .dm-reveal-card.readonly {
      cursor: default;
    }

    .dm-reveal-card.readonly:hover {
      transform: none;
    }

    .dm-reveal-cb {
      width: 18px;
      height: 18px;
    }

    .dm-reveal-art {
      width: 72px;
      aspect-ratio: 5 / 7;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 12px rgba(56, 65, 77, 0.24);
    }

    .dm-reveal-thumb {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border: 1px solid rgba(95, 115, 136, 0.4);
      background: #dde7f0;
    }

    .dm-reveal-thumb.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.58rem;
      color: #62778d;
      font-weight: 700;
    }

    .dm-reveal-pos {
      font-size: var(--fs-xs);
      color: #526174;
      line-height: 1;
    }

    /* 選択順バッジ（選んだ順＝実行順）。SPまとめ移動モーダルで使う */
    .dm-reveal-order {
      position: absolute;
      top: 4px;
      right: 4px;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: 9px;
      background: #2e6fd8;
      color: #ffffff;
      font-size: 0.66rem;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      pointer-events: none;
    }

    .dm-reveal-quick {
      width: 100%;
      margin-top: 2px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 3px;
    }

    .dm-reveal-quick-btn {
      border: 1px solid #c8d0da;
      border-radius: 6px;
      background: #f3f6fa;
      color: #2e3f53;
      font-size: 0.62rem;
      font-weight: 700;
      line-height: 1;
      min-height: 22px;
      padding: 3px 2px;
      cursor: pointer;
    }

    .dm-reveal-quick-btn.hand { background: #eef6ef; border-color: #b7cdb8; color: #2f5a31; }
    .dm-reveal-quick-btn.battle { background: #ffffff; border-color: #e4e9f1; color: #243447; }
    .dm-reveal-quick-btn.mana { background: #edf4ee; border-color: #b8cab9; color: #2f5b38; }
    .dm-reveal-quick-btn.shield { background: #f0edf9; border-color: #c6bee1; color: #4b4572; }
    .dm-reveal-quick-btn.grave { background: #ffffff; border-color: #e4e9f1; color: #243447; }
    .dm-reveal-quick-btn.deck { background: #eef2f8; border-color: #bcc8d8; color: #32455d; }

    .dm-reveal-controls {
      flex-shrink: 0;
      border-top: 1px solid #d5dbe3;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: #f8f9fc;
    }

    .dm-reveal-check-all {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--fs-md);
      font-weight: 700;
      color: #3d4a58;
      white-space: nowrap;
    }

    .dm-reveal-select {
      min-width: 180px;
      flex: 1;
      border-radius: 9px;
      border: 1px solid #c7cfdb;
      background: #ecf0f6;
      color: #2f3f53;
      font-size: 0.96rem;
      font-weight: 700;
      padding: 9px 10px;
    }

    .dm-reveal-move,
    .dm-reveal-return {
      border: none;
      border-radius: 10px;
      padding: 9px 14px;
      font-size: 0.96rem;
      font-weight: 800;
      cursor: pointer;
    }

    .dm-reveal-move {
      background: #5d6b7d;
      color: #fff;
    }

    /* G・ストライク / S・トリガーの複数宣言。個別の実行カットインとは別レイヤーで一度だけ表示する。 */
    .dm-break-fx-overlay {
      position: fixed;
      inset: 0;
      z-index: 3650;
      display: grid;
      place-items: center;
      visibility: hidden;
      pointer-events: none;
      background: transparent;
    }
    .dm-break-fx-overlay.active { visibility: visible; pointer-events: auto; cursor: pointer; }
    .dm-break-fx-inner {
      width: min(94vw, 980px);
      display: grid;
      gap: 12px;
      justify-items: center;
      opacity: 0;
      transform: translateY(22px) scale(.92);
      filter: drop-shadow(0 12px 22px rgba(38, 76, 121, 0.28));
    }
    .dm-break-fx-overlay.active .dm-break-fx-inner {
      animation: dmCastIn 160ms var(--ease-spring) forwards, dmCastOut 160ms var(--ease-out) 660ms forwards;
    }
    .dm-break-fx-cards {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(6px, 1.2vw, 14px);
      flex-wrap: nowrap;
    }
    .dm-break-fx-card {
      position: relative;
      flex: 0 1 156px;
      min-width: 60px;
      max-width: 156px;
      aspect-ratio: 5/7;
      overflow: hidden;
      border-radius: 10px;
      background: #f4f6fa;
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.92),
        0 0 26px rgba(62, 133, 214, 0.55),
        0 14px 32px rgba(19, 42, 70, 0.34);
      isolation: isolate;
    }
    .dm-break-fx-card img,
    .dm-break-fx-card .placeholder {
      width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: grid; place-items: center;
    }
    .dm-break-fx-card::after {
      content: '';
      position: absolute;
      z-index: 2;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.18) 72%, transparent 100%);
      background-repeat: no-repeat;
      background-position: -60% 50%;
      background-size: 40% 145%;
      opacity: 0;
    }
    .dm-break-fx-overlay.active .dm-break-fx-card::after {
      animation: dmCastSweep 480ms var(--ease-out) 150ms 1 both;
    }
    .dm-break-fx-order {
      position: absolute;
      z-index: 3;
      top: -9px;
      right: -9px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #ec4b2f;
      color: #fff;
      font-weight: 900;
      font-size: .82rem;
      box-shadow: 0 3px 10px rgba(0,0,0,.3);
    }
    .dm-break-fx-title {
      padding: 5px 16px;
      border: 1px solid rgba(102, 135, 170, 0.28);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.96);
      color: var(--text, #1d2733);
      font-size: var(--fs-sm, 0.82rem);
      font-weight: 800;
      letter-spacing: .04em;
      box-shadow: 0 4px 14px rgba(31, 54, 82, 0.16);
    }
    .dm-break-fx-title.gs { color: #184f87; border-color: rgba(37,114,173,0.55); }
    .dm-break-fx-title.trigger { color: #a11a3f; border-color: rgba(220,38,38,0.6); }

    .dm-reveal-return {
      background: #e6ebf2;
      color: #29394c;
      border: 1px solid #c6cfdb;
    }

    .dm-deckall-modal {
      position: fixed;
      inset: 0;
      z-index: 3320;
      display: none;
    }

    .dm-deckall-modal.open {
      display: block;
    }

    .dm-deckall-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.48);
    }

    .dm-deckall-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(1160px, calc(100% - 32px));
      max-height: calc(100vh - 40px);
      background: #f7f9fc;
      border: 3px solid #2f6f90;
      border-radius: 16px;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .dm-deckall-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid #d5dce6;
      background: #fbfdff;
    }

    .dm-deckall-head-left {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dm-deckall-title {
      min-width: 0;
      font-size: var(--fs-lg);
      font-weight: 800;
      color: #3c5065;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dm-deckall-shuffle,
    .dm-deckall-close {
      border: none;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: var(--fs-sm);
      font-weight: 800;
      cursor: pointer;
    }

    .dm-deckall-shuffle {
      background: #2f6f90;
      color: #ffffff;
    }

    .dm-deckall-close {
      background: #8a8f98;
      color: #ffffff;
    }

    .dm-deckall-list {
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 8px;
      overflow: auto;
      background: #eff3f8;
    }

    .dm-deckall-card {
      position: relative;
      border: 1px solid #cdd6e0;
      border-radius: 10px;
      background: #f8fbff;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-height: 150px;
    }

    .dm-deckall-no {
      position: absolute;
      top: 5px;
      left: 5px;
      min-width: 22px;
      height: 18px;
      border-radius: 999px;
      background: rgba(42, 58, 76, 0.88);
      color: #ffffff;
      font-size: 0.68rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      line-height: 1;
    }

    .dm-deckall-art {
      width: 100%;
      aspect-ratio: 5 / 7;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 12px rgba(56, 65, 77, 0.22);
    }

    .dm-deckall-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border: 1px solid rgba(95, 115, 136, 0.4);
      background: #dce6f0;
    }

    .dm-deckall-thumb.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.56rem;
      color: #617588;
      font-weight: 800;
    }

    .dm-deckall-card.image-only {
      justify-content: center;
      min-height: 0;
      cursor: pointer;
    }

    .dm-deckall-card.image-only .dm-deckall-art {
      width: min(96px, 100%);
    }

    .dm-deckall-empty {
      grid-column: 1 / -1;
      padding: 18px;
      border-radius: 10px;
      border: 1px dashed #bfcad8;
      text-align: center;
      color: #607186;
      font-weight: 700;
      background: #f8fbff;
    }

    @media (max-width: 900px) {
      .dm-reveal-body {
        width: calc(100% - 20px);
        max-height: calc(100vh - 24px);
      }

      .dm-reveal-list {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      }

      .dm-reveal-art {
        width: 62px;
      }

      .dm-reveal-controls {
        gap: 8px;
      }

      .dm-reveal-select {
        min-width: 150px;
        width: 100%;
      }

      .dm-deckall-body {
        width: calc(100% - 16px);
        max-height: calc(100vh - 18px);
      }

      .dm-deckall-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      #mobile-zonelist-list.dm-zone-card-list,
      #mobile-deckall-list,
      #mobile-graveyard-list {
        grid-template-columns: repeat(auto-fill, minmax(86px, 96px));
        justify-content: center;
      }

      .dm-modal-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
      }

      .dm-deckall-card.image-only .dm-deckall-art {
        width: min(76px, 100%);
      }

      .dm-deckall-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .dm-deckall-head-left {
        width: 100%;
        flex-wrap: wrap;
      }

      .dm-deckall-close {
        align-self: flex-end;
      }
    }

    /* V3: Design-1 warm online lobby theme override */
    .dol-root {
      background: radial-gradient(circle at 48% 12%, rgba(59,110,165, 0.38) 0%, rgba(255,255,255, 0.05) 34%), linear-gradient(118deg, #f4f6fa 0%, #e8edf4 50%, #e8edf4 100%);
      color: #243447;
      font-family: 'Segoe UI', 'Hiragino Sans', sans-serif;
    }

    .dol-owner,
    .dol-center,
    .dol-guest {
      background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.96) 100%);
      border: 1px solid rgba(59,110,165, 0.45);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
      color: #243447;
    }

    .dol-owner .dol-badge-title,
    .dol-guest .dol-badge-title,
    .dol-owner .dol-badge-sub,
    .dol-guest .dol-badge-sub,
    .dol-label,
    .dol-room-entry-label,
    .dol-opponent-label,
    .dol-note {
      color: #33415a;
    }

    .dol-profile,
    .dol-opponent-card,
    .dol-room-card,
    .dol-stat-box,
    .dol-status {
      background: rgba(255,255,255, 0.82);
      border-color: rgba(52,74,106, 0.42);
      color: #243447;
    }

    .dol-input,
    .dol-select,
    .dol-room-input {
      color: #243447;
      background: rgba(255,255,255,0.8);
      border-color: rgba(52,74,106, 0.48);
    }

    .dol-copy-btn,
    .dol-join-btn,
    .dol-create-btn {
      background: linear-gradient(180deg, #5d6b7d 0%, #33415a 100%);
      box-shadow: 0 4px 12px rgba(52,74,106, 0.24);
      color: #fff;
    }

    .dol-ghost-action,
    .dol-owner-btn.back {
      background: rgba(255,255,255,0.62);
      border-color: rgba(52,74,106,0.5);
      color: #243447;
    }

    .dol-owner-btn.logout,
    .dol-cancel-btn {
      background: rgba(52,74,106, 0.16);
      border-color: rgba(52,74,106, 0.42);
      color: #243447;
    }

    .dol-opponent-name,
    .dol-room-code,
    .dol-head-title,
    .dol-stat-value {
      color: #243447;
    }

    @media (max-width: 1280px) {
      .dl-root {
        grid-template-columns: 230px 1fr 280px;
      }

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

      .dl-editor-tools {
        gap: 8px;
      }

      .dl-editor-tools-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .dl-deck-zone-layout {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 28%);
      }

      .dl-cloud-item {
        flex-direction: column;
        align-items: flex-start;
      }

      .dl-root-focus {
        grid-template-columns: 1fr;
        padding: 14px;
      }

      .dl-panel-focus {
        min-height: calc(100vh - 28px);
      }

      .dol-root {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
      }

      .dol-root.dol-fixed-lobby {
        grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
        height: 100vh;
        min-height: 0;
      }

    }