/* Shared card visuals */
    .dg-card-chip,
    .mg-card-chip {
      overflow: hidden;
      position: relative;
    }

    .dg-card-chip > .dg-card-chip-img,
    .dg-card-chip > .dg-card-cost,
    .dg-card-chip > .dg-card-name,
    .dg-card-chip > .dg-card-power,
    .mg-card-chip > .mg-card-chip-img,
    .mg-card-chip > .mg-card-cost,
    .mg-card-chip > .mg-card-name,
    .mg-card-chip > .mg-card-power {
      position: relative;
      z-index: 10;
    }

    .dg-card-chip.has-under,
    .mg-card-chip.has-under {
      overflow: visible;
    }

    /* 大きさは実カードの印刷コストアイコンと同じ比率（幅の約12%）。カード名は幅の
       約15%から始まるので、この比率なら名前へかからない。チップの実寸に追従させる
       ため%指定にする（PC対戦モードは行の高さでチップ寸法が変わる）。 */
    .dm-current-cost-badge {
      position: absolute;
      top: 1.5%;
      left: 0.5%;
      z-index: 22;
      width: 19.5%;
      aspect-ratio: 1;
      pointer-events: none;
      container-type: inline-size;
    }

    /* ツインパクトは下面（呪文）のコストアイコンが実カードでは右側・カード高の
       約50〜58%の位置に印刷される（上面は左上）。バッジも印刷位置へ重ねるため、
       twin時だけカード全面を覆う枠にして、アイコンごとに配置する。 */
    .dm-current-cost-badge.twin {
      right: 0.5%;
      bottom: 1.5%;
      width: auto;
      aspect-ratio: auto;
    }

    .dm-current-cost-badge.twin .dm-current-cost-icon {
      /* 枠幅がカード幅の99%になるので、単面時の19.5%と同寸になる比率にする。 */
      width: 19.7%;
    }

    /* 実カードのコストアイコン準拠: 面は文明色のフラットな一重円。立体感は縁だけで、
       上辺に明るいベベル・下辺に影が乗り、外周を太い黒フチが囲む。 */
    .dm-current-cost-icon {
      --dm-cost-fill: #9aa2ab;
      position: absolute;
      top: 0;
      left: 0;
      /* 数字のcqwはアイコン自身の幅を基準にする（枠がカード全面になるtwin時でも
         単面時と同じ字面になる）。 */
      container-type: inline-size;
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--dm-cost-fill);
      box-shadow:
        inset 0 1px 1px -0.3px rgba(255,255,255,0.62),
        inset 0 -1.2px 1.2px -0.4px rgba(0,0,0,0.52),
        0 0 0 1px #0a0a0a,
        0 0.5px 1.5px rgba(0,0,0,0.6);
    }

    .dm-current-cost-icon.civ-light { --dm-cost-fill: #f7dc4a; }
    .dm-current-cost-icon.civ-water { --dm-cost-fill: #12a5e8; }
    .dm-current-cost-icon.civ-dark { --dm-cost-fill: #908d8a; }
    .dm-current-cost-icon.civ-fire { --dm-cost-fill: #d8232e; }
    .dm-current-cost-icon.civ-nature { --dm-cost-fill: #3da654; }
    .dm-current-cost-icon.civ-zero { --dm-cost-fill: #d9d9d4; }
    /* 多色はパイ分割（inline styleの--dm-cost-pieで文明色を指定）。縁の作りは単色と同じ。
       実カードでは2色は境目そのまま、3色以上だけ細い白の仕切りが入る。 */
    .dm-current-cost-icon.civ-multi {
      background: var(--dm-cost-pie, var(--dm-cost-fill));
    }

    .dm-current-cost-value {
      color: #fff;
      font-family: "Oswald", "Zen Kaku Gothic New", sans-serif;
      /* 表示実寸が15px前後。フチを太くすると字が潰れるので控えめにする。
         cqw未対応環境向けにpxも残す。 */
      font-size: 13px;
      font-size: 84cqw;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      text-shadow:
        -0.5px -0.5px 0 #000, 0 -0.6px 0 #000, 0.5px -0.5px 0 #000,
        -0.6px 0 0 #000, 0.6px 0 0 #000,
        -0.5px 0.5px 0 #000, 0 0.6px 0 #000, 0.5px 0.5px 0 #000;
    }

    .dm-current-cost-icon.wide .dm-current-cost-value {
      font-size: 9px;
      font-size: 60cqw;
      letter-spacing: -0.08em;
    }

    /* コスト修正が入っている時は白い縁光で「印刷値と違う」ことを示す。 */
    .dm-current-cost-icon.adjusted {
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.95),
        0 0 5px rgba(255,255,255,0.85),
        0 0.5px 1.5px rgba(0,0,0,0.55);
    }

    /* 印刷位置（カード高の約49.4〜57.5%、右端から約3%）へ重ねる。枠の高さは
       カード高の97%なので、カード基準47.5%は枠基準47.4%。 */
    .dm-current-cost-badge.twin .dm-current-cost-icon.spell {
      top: 47.4%;
      left: auto;
      right: 0;
    }

    /* 「別」はアイコンの真下へ置く。カード名の帯より下なので名前を隠さない。 */
    .dm-current-cost-alt {
      position: absolute;
      top: calc(100% + 1px);
      left: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 11px;
      height: 10px;
      padding: 0 1px;
      border: 0.5px solid rgba(48,33,0,0.75);
      border-radius: 2px;
      background: #f3c969;
      box-shadow: 0 0.5px 1.5px rgba(0,0,0,0.55);
      color: #302100;
      font-size: 7px;
      font-weight: 900;
      line-height: 1;
    }

    /* twin時は枠がカード全面なので、上面アイコンの真下（枠高の約14.4%）に置く。 */
    .dm-current-cost-badge.twin .dm-current-cost-alt {
      top: calc(14.4% + 1px);
    }

    .dg-under-stack,
    .mg-under-stack {
      position: absolute;
      right: 3px;
      bottom: 3px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 1;
      pointer-events: none;
    }

    .dg-under-layer,
    .mg-under-layer {
      width: 16px;
      height: 4px;
      border-radius: 999px;
      border: 1px solid rgba(52,74,106,0.45);
      background: rgba(255,255,255,0.95);
      box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    }

    .dg-under-layer:nth-child(2), .mg-under-layer:nth-child(2) { margin-left: 2px; }
    .dg-under-layer:nth-child(3), .mg-under-layer:nth-child(3) { margin-left: 4px; }
    .dg-under-layer:nth-child(4), .mg-under-layer:nth-child(4) { margin-left: 6px; }
    .dg-under-layer:nth-child(5), .mg-under-layer:nth-child(5) { margin-left: 8px; }
    .dg-under-layer:nth-child(6), .mg-under-layer:nth-child(6) { margin-left: 10px; }
    .dg-under-layer:nth-child(7), .mg-under-layer:nth-child(7) { margin-left: 12px; }
    .dg-under-layer:nth-child(8), .mg-under-layer:nth-child(8) { margin-left: 14px; }

    .dg-under-count,
    .mg-under-count {
      position: absolute;
      left: 2px;
      top: 2px;
      min-width: 18px;
      height: 16px;
      padding: 0 4px;
      border-radius: 999px;
      background: rgba(23,32,46,0.86);
      color: #ffffff;
      font-size: 0.62rem;
      font-weight: 700;
      line-height: 16px;
      text-align: center;
      z-index: 11;
      pointer-events: none;
    }

    /* Under-card peek layers */
    .dg-card-chip.has-under,
    .mg-card-chip.has-under {
      position: relative;
      z-index: 2;
    }

    .dg-under-peek-layer,
    .mg-under-peek-layer {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      border: 1px solid rgba(52,74,106,0.4);
      background: #ffffff;
      background-size: cover;
      background-position: center;
      box-sizing: border-box;
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%);
      transform-origin: center;
      transition: transform var(--dur-normal) var(--ease-spring);
      pointer-events: none;
    }

    .dg-under-peek-layer.masked,
    .mg-under-peek-layer.masked {
      background-image: var(--card-back-image);
      background-size: cover;
      background-position: center;
    }

    /* 下敷きも表札と同じ向きへ回し、束全体を一枚としてタップしているように見せる。 */
    .dg-card-chip.opponent .dg-under-peek-layer,
    .mg-card-chip.opponent .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(180deg);
    }
    .dg-card-chip.battle.tapped .dg-under-peek-layer,
    .mg-card-chip.battle.tapped .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(90deg);
    }
    .dg-card-chip.opponent.battle.tapped .dg-under-peek-layer,
    .dg-card-chip.opponent.mana.tapped .dg-under-peek-layer,
    .mg-card-chip.opponent.battle.tapped .mg-under-peek-layer,
    .mg-card-chip.opponent.mana.tapped .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(270deg);
    }
    /* マナは常にタップ270度基準（自分側）。相手側は上のopponent.mana.tappedで270度と一致。 */
    .dg-card-chip.mana.tapped .dg-under-peek-layer,
    .mg-card-chip.mana.tapped .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(270deg);
    }
    .dg-card-chip.battle.field-card .dg-under-peek-layer,
    .mg-card-chip.battle.field-card .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(90deg);
    }
    .dg-card-chip.battle.field-card.field-inverted .dg-under-peek-layer,
    .mg-card-chip.battle.field-card.field-inverted .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(270deg);
    }
    .dg-card-chip.battle.field-card.opponent .dg-under-peek-layer,
    .mg-card-chip.battle.field-card.opponent .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(270deg);
    }
    .dg-card-chip.battle.field-card.opponent.field-inverted .dg-under-peek-layer,
    .mg-card-chip.battle.field-card.opponent.field-inverted .mg-under-peek-layer {
      transform: translate(calc(-50% + var(--under-offset, 0px)), -50%) rotate(90deg);
    }

    .dg-under-peek-layer.fire,
    .mg-under-peek-layer.fire { background: linear-gradient(160deg, #fff4ee 0%, #fbdccb 100%); border-color: #e35d2b; }
    .dg-under-peek-layer.water,
    .mg-under-peek-layer.water { background: linear-gradient(160deg, #eef5ff 0%, #cfe2fb 100%); border-color: #4f86c5; }
    .dg-under-peek-layer.nature,
    .mg-under-peek-layer.nature { background: linear-gradient(160deg, #eef8ee 0%, #cfe8ce 100%); border-color: #5b9a5a; }
    .dg-under-peek-layer.light,
    .mg-under-peek-layer.light { background: linear-gradient(160deg, #fffbef 0%, #f8f0cf 100%); border-color: #c9a83d; }
    .dg-under-peek-layer.dark,
    .dg-under-peek-layer.darkness,
    .mg-under-peek-layer.dark,
    .mg-under-peek-layer.darkness { background: linear-gradient(160deg, #f5f1fa 0%, #ddd1ea 100%); border-color: #6c5a7e; }

    /* Under-cards modal */
    .dm-under-modal {
      position: fixed;
      inset: 0;
      z-index: 3350;
      display: none;
    }
    .dm-under-modal.open {
      display: block;
    }
    .dm-under-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
    }
    .dm-under-body {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(480px, calc(100% - 28px));
      max-height: calc(100vh - 56px);
      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-under-body.mobile {
      width: calc(100% - 20px);
      left: 10px;
      right: 10px;
      top: auto;
      bottom: 14px;
      transform: none;
      max-height: 72vh;
    }
    .dm-under-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid #e4ece4;
      flex-shrink: 0;
    }
    .dm-under-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: #243447;
    }
    .dm-under-close {
      background: none;
      border: none;
      font-size: var(--fs-lg);
      color: var(--text-dim);
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .dm-under-close:hover { background: #f4f6fa; }
    .dm-under-list { min-height: 0; }
    .dm-under-card-button {
      appearance: none;
      font: inherit;
      color: inherit;
    }
    .dm-under-card-button .dm-modal-card-art { display: block; }

    .dg-card-chip.stack-target,
    .mg-card-chip.stack-target {
      box-shadow: 0 0 0 2px rgba(244,96,12,0.45);
    }

    .dg-card-chip.under-source,
    .mg-card-chip.under-source {
      box-shadow: 0 0 0 2px rgba(76,122,170,0.5);
    }

    .dg-card-chip.has-image,
    .mg-card-chip.has-image {
      padding: 0;
      background: transparent;
    }

    .dg-card-chip-img,
    .mg-card-chip-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
    }

    .dg-card-chip-img.placeholder,
    .mg-card-chip-img.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #243447;
      background: linear-gradient(145deg, #f4f6fa 0%, #e8edf4 100%);
    }

    /* 2層構造: スロット(回転しない・幅アニメ) + カードボディ(回転する本体) */
    .dg-card-body,
    .mg-card-body {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: inherit;
      background: inherit;
      background-image: inherit;
      background-size: cover;
      background-position: center;
      transform: translate(-50%, -50%);
      transform-origin: center;
      transition: transform var(--dur-normal) var(--ease-spring);
      z-index: 10;
      overflow: hidden;
    }
    /* バトル/マナのみタップ概念。スロット幅を カード横→カード縦 にアニメし、
       ボディは原寸のまま90度回転（隣カードが押し出される「横倒し」感）。
       ボディの実寸は盤面モード(ソロ/対戦)ごとに別途指定する */
    .dg-card-chip.battle.tapped .dg-card-body { transform: translate(-50%, -50%) rotate(90deg); }
    .dg-card-chip.opponent.tapped .dg-card-body { transform: translate(-50%, -50%) rotate(270deg); }
    /* マナゾーンは実物のテーブル慣習（マナは逆向きに置くのが正位置）に合わせ、
       常に180度反転した状態を基準にし、タップはそこからさらに90度回す
       （非タップ180度・タップ270度）。相手のタップ済みマナは既存の
       .opponent.tapped ルールにより270度になり、自分側と同じ向きになる。 */
    .dg-card-chip.mana:not(.tapped) .dg-card-body { transform: translate(-50%, -50%) rotate(180deg); }
    .dg-card-chip.mana.tapped .dg-card-body { transform: translate(-50%, -50%) rotate(270deg); }
    /* フィールドはバトルゾーンで常に横向き。inverted はDスイッチ等の上下反転を表す。 */
    .dg-card-chip.battle.field-card .dg-card-body { transform: translate(-50%, -50%) rotate(90deg); }
    .dg-card-chip.battle.field-card.field-inverted .dg-card-body { transform: translate(-50%, -50%) rotate(270deg); }
    .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-card-chip.flipped,
    .mg-card-chip.flipped { outline: 2px solid #d97706; outline-offset: -2px; }
    .dg-card-chip.flipped::after,
    .mg-card-chip.flipped::after {
      content: "裏";
      position: absolute;
      top: 2px;
      left: 2px;
      z-index: 20;
      font-size: 10px;
      line-height: 1;
      padding: 2px 3px;
      border-radius: 3px;
      background: rgba(217, 119, 6, 0.92);
      color: #fff;
      pointer-events: none;
    }

    /* 赤丸マーカー（用途自由のメモ）: シールド/バトル/マナのカード中央に重ねる。
       裏返しの「裏」バッジ(::after 左上)と共存できるよう ::before を使う */
    .dg-card-chip.marked::before,
    .mg-card-chip.marked::before,
    .dg-back-card.marked::before,
    .mg-back-card.marked::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #dc2626;
      border: 1.5px solid #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      pointer-events: none;
    }
    .mg-card-chip.marked::before,
    .mg-back-card.marked::before { width: 10px; height: 10px; }
    .dg-back-card.marked,
    .mg-back-card.marked { position: relative; }

    .dg-card-cost,
    .mg-card-cost {
      font-size: 0.62rem;
      font-weight: 700;
      line-height: 1;
    }

    .dg-card-name,
    .mg-card-name {
      font-size: 0.62rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
      word-break: break-word;
    }

    .dg-card-power,
    .mg-card-power {
      font-size: 0.6rem;
      font-weight: 700;
      line-height: 1;
    }

    @keyframes dmPulse {
      0% { box-shadow: 0 0 0 0 rgba(219, 147, 84, 0.45); }
      70% { box-shadow: 0 0 0 10px rgba(219, 147, 84, 0); }
      100% { box-shadow: 0 0 0 0 rgba(219, 147, 84, 0); }
    }