/* ── UIリニューアル第3弾: 対戦画面演出 ── */
    @keyframes dgToastIn {
      from { opacity: 0; transform: translateX(-50%) scale(0.92); }
      to   { opacity: 1; transform: translateX(-50%) scale(1); }
    }
    .dg-turn-toast, .mg-turn-toast {
      padding: 12px 26px;
      font-size: var(--fs-lg);
      background: linear-gradient(135deg, var(--neutral), var(--neutral-hover));
      box-shadow: var(--shadow-3);
    }
    .mg-turn-toast { font-size: var(--fs-md); padding: 10px 20px; }
    .dg-turn-toast.show, .mg-turn-toast.show { animation: dgToastIn var(--dur-normal) var(--ease-spring); }
    .dg-turn-toast.mine, .mg-turn-toast.mine { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); }

    /* 通知の置き場（PC/SP共通。UI仕様「通知の表示位置」）。通常の通知とターン通知を
       画面上端の中央へ縦に積む。操作は塞がない（pointer-events: none） */
    .dm-toast-stack {
      position: fixed; z-index: 3900; top: max(8px, env(safe-area-inset-top)); left: 50%;
      transform: translateX(-50%); width: min(640px, calc(100vw - 32px));
      display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
    }
    .dm-toast-stack > .dg-toast, .dm-toast-stack > .mg-toast,
    .dm-toast-stack > .dg-turn-toast, .dm-toast-stack > .mg-turn-toast {
      position: static; left: auto; top: auto; bottom: auto; transform: none;
      max-width: 100%; box-sizing: border-box; text-align: center; line-height: 1.45;
      white-space: normal; overflow-wrap: anywhere;
    }
    /* 効果のスタック表示（web/ui/shared/effect-stack.js）。PCは右端に縦、SP・狭い画面は上端に横。
       選ぶ画面（3720〜3735）より前、処理中バー（3760）より奥。操作は塞がない。 */
    .dm-effect-stack {
      position: fixed; z-index: 3740; right: 12px; top: 50%; transform: translateY(-50%);
      width: 220px; max-height: 80vh; overflow: hidden; display: none; flex-direction: column; gap: 6px;
      padding: 8px; border-radius: 12px; background: rgba(23,32,46,.86); color: #fff;
      box-shadow: 0 10px 28px rgba(16,24,40,.35); pointer-events: none;
    }
    .dm-effect-stack.open { display: flex; }
    .dm-effect-stack-head { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
    .dm-effect-stack-count { padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.18); font-weight: 600; }
    .dm-effect-stack-progress { flex-basis: 100%; font-size: .7rem; font-weight: 600; color: #fde68a; white-space: normal; }
    .dm-effect-stack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
    .dm-effect-stack-item {
      display: flex; gap: 7px; align-items: flex-start; padding: 5px; border-radius: 8px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); opacity: .78;
    }
    .dm-effect-stack-item.active { opacity: 1; background: rgba(212,85,63,.28); border-color: #f0a08f; box-shadow: 0 0 0 1px rgba(240,160,143,.45); }
    .dm-effect-stack-item.paused { opacity: .9; border-style: dashed; }
    .dm-effect-stack-img { flex: 0 0 auto; width: 40px; height: 56px; object-fit: cover; border-radius: 4px; background: #334155; }
    .dm-effect-stack-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .dm-effect-stack-badge { align-self: flex-start; padding: 0 6px; border-radius: 999px; font-size: .64rem; font-weight: 700; background: rgba(255,255,255,.2); }
    .dm-effect-stack-item.active .dm-effect-stack-badge { background: #d4553f; }
    .dm-effect-stack-name { font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-effect-stack-ability {
      font-size: .66rem; line-height: 1.35; color: rgba(255,255,255,.82);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .dm-effect-stack.is-mobile, .dm-effect-stack.open.is-mobile {
      top: max(6px, env(safe-area-inset-top)); left: 8px; right: 8px; transform: none; width: auto;
      max-height: none; padding: 5px 7px; gap: 4px; flex-direction: row; align-items: center;
    }
    .dm-effect-stack.is-mobile .dm-effect-stack-head { flex: 0 0 96px; font-size: .7rem; }
    .dm-effect-stack.is-mobile .dm-effect-stack-progress { font-size: .6rem; line-height: 1.3; }
    .dm-effect-stack.is-mobile .dm-effect-stack-list { flex-direction: row; gap: 4px; overflow: hidden; }
    .dm-effect-stack.is-mobile .dm-effect-stack-item { flex: 0 0 auto; flex-direction: column; align-items: center; gap: 2px; padding: 3px; }
    .dm-effect-stack.is-mobile .dm-effect-stack-img { width: 34px; height: 48px; }
    .dm-effect-stack.is-mobile .dm-effect-stack-text { align-items: center; }
    .dm-effect-stack.is-mobile .dm-effect-stack-name, .dm-effect-stack.is-mobile .dm-effect-stack-ability { display: none; }
    .dm-effect-stack.is-mobile .dm-effect-stack-badge { align-self: center; font-size: .56rem; padding: 0 4px; white-space: nowrap; }
    @media (max-width: 900px) {
      .dm-effect-stack:not(.is-mobile) {
        top: max(6px, env(safe-area-inset-top)); left: 50%; right: auto; transform: translateX(-50%);
        width: min(640px, calc(100vw - 16px)); flex-direction: row; align-items: center;
      }
      .dm-effect-stack:not(.is-mobile) .dm-effect-stack-list { flex-direction: row; }
      .dm-effect-stack:not(.is-mobile) .dm-effect-stack-item { flex: 0 0 150px; }
    }
    /* 上端がモーダルや処理中バーで塞がっている間は下端へ移す（dmToastStackReposition） */
    .dm-toast-stack.at-bottom { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); flex-direction: column-reverse; }
    .dm-toast-stack > [hidden] { display: none; }
    .dm-toast-stack.collapsed > :not(:last-child) { display: none; }
    .dm-toast-stack > .dg-turn-toast.show, .dm-toast-stack > .mg-turn-toast.show {
      animation: dmToastStackIn var(--dur-normal) var(--ease-spring);
    }
    @keyframes dmToastStackIn {
      from { opacity: 0; transform: scale(0.94); }
      to   { opacity: 1; transform: scale(1); }
    }
    /* SPは画面幅いっぱい（左右16px）の角丸長方形。長文を楕円に折り返さない */
    .dm-toast-stack > .mg-toast, .dm-toast-stack > .mg-turn-toast { width: 100%; border-radius: 12px; }

    /* カード移動先ゾーンの一瞬ハイライト */
    @keyframes dmZoneFlash {
      0%   { box-shadow: inset 0 0 0 2px var(--accent), 0 0 12px rgba(59,110,165,0.35); }
      100% { box-shadow: inset 0 0 0 2px rgba(59,110,165,0), 0 0 0 rgba(59,110,165,0); }
    }
    .dm-zone-flash { animation: dmZoneFlash 0.45s var(--ease-out); border-radius: var(--radius-sm); }

    /* タップ状態: 回転で表現（彩度低下フィルタは撤去）。box-shadowはトランジション対象 */
    .dg-card-chip, .mg-card-chip { transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-fast) ease; }

    /* カードの実体感: 常時影（墓地のカウンタチップは対象外）と手札ホバーリフト。
       バトル/マナは影を回転するカードボディ側に付け、タップ時も本体に影が残るようにする */
    .dg-card-chip:not(.grave):not(.battle):not(.mana), .mg-card-chip:not(.battle):not(.mana), .dg-back-card, .mg-back-card { box-shadow: var(--card-shadow); }
    .dg-card-chip.battle .dg-card-body, .dg-card-chip.mana .dg-card-body,
    .mg-card-chip.battle .mg-card-body, .mg-card-chip.mana .mg-card-body { box-shadow: var(--card-shadow); }
    .dg-card-chip.hand { transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-fast) ease; }
    .dg-card-chip.hand:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); }

    /* Board cards without artwork retain their core information and civilization identity. */
    .dg-card-chip.no-image-board,
    .mg-card-chip.no-image-board {
      --no-img-civ: var(--civ-multi);
      --no-img-civ-glow: rgba(138, 132, 148, 0.64);
    }
    .dg-card-chip.no-image-board.civ-fire,
    .mg-card-chip.no-image-board.civ-fire {
      --no-img-civ: var(--civ-fire);
      --no-img-civ-glow: rgba(227, 93, 43, 0.68);
    }
    .dg-card-chip.no-image-board.civ-water,
    .mg-card-chip.no-image-board.civ-water {
      --no-img-civ: var(--civ-water);
      --no-img-civ-glow: rgba(61, 127, 212, 0.68);
    }
    .dg-card-chip.no-image-board.civ-nature,
    .mg-card-chip.no-image-board.civ-nature {
      --no-img-civ: var(--civ-nature);
      --no-img-civ-glow: rgba(74, 154, 82, 0.68);
    }
    .dg-card-chip.no-image-board.civ-light,
    .mg-card-chip.no-image-board.civ-light {
      --no-img-civ: var(--civ-light);
      --no-img-civ-glow: rgba(201, 168, 61, 0.68);
    }
    .dg-card-chip.no-image-board.civ-dark,
    .mg-card-chip.no-image-board.civ-dark {
      --no-img-civ: var(--civ-dark);
      --no-img-civ-glow: rgba(109, 84, 148, 0.68);
    }
    .dg-card-chip.no-image-board > .dg-card-body,
    .mg-card-chip.no-image-board > .mg-card-body {
      background: linear-gradient(145deg, #eef1f4 0%, #c8d0d8 100%);
      border: 2px solid var(--no-img-civ);
      box-sizing: border-box;
      color: #253342;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.74), 0 0 9px var(--no-img-civ-glow);
      text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    }
    .dg-card-chip.no-image-board .dg-card-cost,
    .mg-card-chip.no-image-board .mg-card-cost {
      position: absolute;
      top: 4px;
      left: 4px;
      min-width: 1.45em;
      padding: 2px 3px;
      border-radius: 999px;
      background: var(--no-img-civ);
      color: #fff;
      font-size: clamp(0.48rem, 1.05vw, 0.72rem);
      line-height: 1;
      text-align: center;
      text-shadow: none;
      z-index: 1;
    }
    .dg-card-chip.no-image-board .dg-card-name,
    .mg-card-chip.no-image-board .mg-card-name {
      max-width: calc(100% - 12px);
      font-size: clamp(0.5rem, 1.1vw, 0.74rem);
      font-weight: 800;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }
    .dg-card-chip.no-image-board .dg-card-power,
    .mg-card-chip.no-image-board .mg-card-power { display: none; }

    /* ブレイク中シールドの脈動 */
    @keyframes dmBreakPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(244,96,12,0); }
      50%      { box-shadow: 0 0 0 4px rgba(244,96,12,0.45); }
    }
    .dm-break-card { animation: dmBreakPulse 1.2s ease-in-out infinite; border-radius: var(--radius-sm); }

    /* ドローで手札に加わったカードのフェードイン */
    @keyframes dmCardIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
    .dm-card-in { animation: dmCardIn var(--dur-normal) var(--ease-out); }

    /* ── UIリニューアル第4弾: モーダル共通演出 ── */
    @keyframes dmModalIn {
      from { opacity: 0; scale: 0.965; }
      to   { opacity: 1; scale: 1; }
    }
    @keyframes dmBackdropIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .dm-break-backdrop, .dm-card-detail-backdrop, .dm-confirm-backdrop,
    .dm-deckall-backdrop, .dm-grave-backdrop, .dm-hd-backdrop,
    .dm-reveal-backdrop, .dm-under-backdrop, .dm-art-picker-backdrop,
    .mg-sheet-backdrop {
      animation: dmBackdropIn var(--dur-fast) ease;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    /* タッチ端末（スマホのPWA等）ではモーダルの背景をぼかさない。Android の Chrome は、ぼかす下の盤面を
       描き終えるまでその領域をグレーで仮表示するので、盤面の画像が多い疑似対戦でモーダルごとグレーに
       なって中身が見えなかった。半透明の背景だけでモーダルは区別できる */
    @media (hover: none) and (pointer: coarse) {
      .dm-break-backdrop, .dm-card-detail-backdrop, .dm-confirm-backdrop,
      .dm-deckall-backdrop, .dm-grave-backdrop, .dm-hd-backdrop,
      .dm-reveal-backdrop, .dm-under-backdrop, .dm-art-picker-backdrop,
      .mg-sheet-backdrop, .dm-effect-backdrop, .dm-break-choice-backdrop, .dm-game-result {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }
    .dm-break-body, .dm-card-detail-body, .dm-confirm-body,
    .dm-deckall-body, .dm-grave-body, .dm-hd-body,
    .dm-reveal-body, .dm-under-body, .dm-art-picker-body,
    .ml-ol-modal {
      animation: dmModalIn var(--dur-normal) var(--ease-out);
      box-shadow: var(--shadow-3);
    }
    /* PC/SP common trial-draw preview. */
    .dm-trial-draw-modal {
      position: fixed;
      inset: 0;
      z-index: 11800;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .dm-trial-draw-modal.open { display: flex; }
    .dm-trial-draw-backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(17,25,38,0.66);
      cursor: default;
    }
    .dm-trial-draw-panel {
      position: relative;
      width: min(900px, calc(100vw - 32px));
      max-height: min(92dvh, 860px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(61,82,111,0.28);
      border-radius: 14px;
      background: #f8fafc;
      color: #243447;
      box-shadow: 0 22px 70px rgba(8,15,26,0.42);
    }
    .dm-trial-draw-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px 12px;
      border-bottom: 1px solid #d8e0ea;
      background: #fff;
    }
    .dm-trial-draw-head h2 { margin: 0; font-size: 1.15rem; }
    .dm-trial-draw-head p {
      max-width: min(70vw, 620px);
      margin: 3px 0 0;
      overflow: hidden;
      color: #677487;
      font-size: 0.76rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dm-trial-draw-close {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50%;
      background: #e7edf4;
      color: #40546d;
      font-size: 1.55rem;
      line-height: 1;
      cursor: pointer;
    }
    .dm-trial-draw-content {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 14px 16px;
    }
    .dm-trial-draw-section + .dm-trial-draw-section { margin-top: 16px; }
    .dm-trial-draw-section h3 {
      margin: 0 0 7px;
      color: #26384e;
      font-size: 0.92rem;
    }
    .dm-trial-draw-section h3 span { color: #68788d; font-size: 0.76rem; font-weight: 700; }
    .dm-trial-card-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      min-height: 126px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 2px 5px;
      scrollbar-width: thin;
    }
    .dm-trial-drawn-row { flex-wrap: wrap; overflow-x: visible; overflow-y: visible; }
    .dm-trial-card {
      flex: 0 0 88px;
      width: 88px;
      aspect-ratio: 5 / 7;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #b7c3d2;
      border-radius: 6px;
      background: #e9eef5;
      box-shadow: 0 2px 5px rgba(28,43,63,0.18);
    }
    .dm-trial-card img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
    .dm-trial-card.placeholder {
      padding: 6px;
      color: #657286;
      font-size: 0.63rem;
      line-height: 1.35;
      text-align: center;
      overflow-wrap: anywhere;
    }
    .dm-trial-empty {
      align-self: center;
      margin: auto 0;
      color: #7b8797;
      font-size: 0.78rem;
    }
    .dm-trial-draw-actions {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px));
      border-top: 1px solid #d8e0ea;
      background: #fff;
    }
    .dm-trial-draw-actions button {
      min-height: 44px;
      border: 0;
      border-radius: 8px;
      background: #3197b6;
      color: #fff;
      font: 800 0.9rem/1.2 inherit;
      cursor: pointer;
    }
    .dm-trial-draw-actions button:disabled { background: #aeb7c2; color: #edf0f4; cursor: not-allowed; }
    .dm-trial-draw-actions button span { margin-left: 4px; font-size: 0.68rem; opacity: 0.9; }
    @media (max-width: 600px) and (orientation: portrait) {
      .dm-trial-draw-modal { padding: 8px; }
      .dm-trial-draw-panel { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
      .dm-trial-draw-head { padding: 10px 12px 8px; }
      .dm-trial-draw-head h2 { font-size: 1rem; }
      .dm-trial-draw-close { width: 34px; height: 34px; }
      .dm-trial-draw-content { padding: 10px 12px; }
      .dm-trial-draw-section + .dm-trial-draw-section { margin-top: 12px; }
      .dm-trial-card-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        min-height: 0;
        overflow: visible;
        padding: 1px;
      }
      .dm-trial-card { width: auto; min-width: 0; }
      .dm-trial-drawn-row { align-items: start; }
      .dm-trial-empty { grid-column: 1 / -1; min-height: 58px; display: grid; place-items: center; }
      .dm-trial-draw-actions { gap: 8px; padding: 9px 12px max(9px, env(safe-area-inset-bottom, 0px)); }
      .dm-trial-draw-actions button { min-height: 42px; font-size: 0.82rem; }
    }
    @media (orientation: landscape) and (max-height: 500px) {
      .dm-trial-draw-modal { padding: 6px; }
      .dm-trial-draw-panel { width: min(860px, calc(100vw - 12px)); max-height: calc(100dvh - 12px); }
      .dm-trial-draw-head { padding: 7px 12px; }
      .dm-trial-draw-head h2 { font-size: 0.96rem; }
      .dm-trial-draw-head p { margin-top: 1px; }
      .dm-trial-draw-close { width: 32px; height: 32px; }
      .dm-trial-draw-content { padding: 8px 12px; }
      .dm-trial-draw-section + .dm-trial-draw-section { margin-top: 9px; }
      .dm-trial-draw-section h3 { margin-bottom: 4px; font-size: 0.8rem; }
      .dm-trial-card-row { min-height: 94px; gap: 5px; }
      .dm-trial-card { flex-basis: 64px; width: 64px; }
      .dm-trial-draw-actions { padding: 7px 12px; }
      .dm-trial-draw-actions button { min-height: 36px; }
    }

    .dm-custom-card-body { width: min(1040px, calc(100vw - 28px)); max-height: min(920px, calc(100vh - 28px)); overflow: auto; }
    .dm-custom-card-form { display: grid; gap: 14px; padding: 18px; }
    .dm-custom-card-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
    .dm-custom-card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .dm-custom-card-modes { display: grid; gap: 8px; justify-items: start; }
    .dm-custom-card-twin-toggle { border: 1px solid #aeb9c8; border-radius: 999px; padding: 7px 15px; background: #fff; color: #334155; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
    .dm-custom-card-twin-toggle.active { border-color: #65507f; background: #65507f; color: #fff; }
    /* ツインパクトとハイパーモードは排他なので、片方を選ぶともう片方は無効化して並べる。 */
    .dm-custom-card-twin-toggle:disabled { opacity: .42; cursor: default; }
    .dm-custom-card-mode-row { display: flex; gap: 8px; flex-wrap: wrap; }
    /* 画像からの読み取り。結果は入力欄へ入るだけなので、状態はボタンの横の短い文で伝える。 */
    .dm-custom-card-extract { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
    .dm-custom-card-extract .dm-custom-card-note { flex: 1 1 240px; min-width: 0; }
    .dm-custom-card-extract .dm-custom-card-note.error { color: #b42318; }
    .dm-custom-card-faces { display: flex; gap: 6px; }
    .dm-custom-card-faces[hidden] { display: none; }
    .dm-custom-card-faces button { border: 1px solid #aeb9c8; border-bottom-width: 3px; border-radius: 8px 8px 0 0; padding: 7px 20px; background: #eef1f6; color: #475569; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
    .dm-custom-card-faces button.active { border-color: #65507f; background: #fff; color: #3f2f56; }
    .dm-custom-card-shared { display: grid; gap: 8px; }
    .dm-custom-card-shared label[hidden] { display: none; }
    /* 「1手戻す」の確認に出す、戻る地点の直前のログと取り消される操作 */
    .dm-choice-detail-lines { margin: 0; padding: 8px 10px; list-style: none; display: grid; gap: 4px; max-height: 40vh; overflow: auto; text-align: left; font-size: 0.85rem; line-height: 1.45; color: #334155; background: #f1f5f9; border-radius: 8px; }
    .dm-custom-card-shared label { display: grid; gap: 6px; color: #334155; font-size: 0.9rem; font-weight: 700; }
    .dm-custom-card-shared input[type="file"] { width: 100%; box-sizing: border-box; border: 1px solid #aeb9c8; border-radius: 8px; padding: 8px; background: #fff; color: #1f2937; font: inherit; font-weight: 400; }
    /* 広い画面では左に基本情報、右にテキストと効果パターンを並べる。
       効果を選びながらテキスト欄を見られるようにするのが狙いなので、右列は縦に伸ばす。 */
    @media (min-width: 900px) {
      /* 左列は文明チップ6個が1行に収まる幅を確保する（折り返すと縦に伸びてボタンが画面外に出る）。 */
      .dm-custom-card-form { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; column-gap: 20px; row-gap: 12px; padding: 16px; }
      .dm-custom-card-col { gap: 12px; }
      .dm-custom-card-extract,
      .dm-custom-card-modes,
      .dm-custom-card-shared { grid-column: 1 / -1; }
      .dm-custom-card-col .dm-custom-card-field.effects { align-content: start; }
      /* 画面が高いほど一覧を長く見せる。低い画面ではモーダル全体が
         はみ出さない高さまで縮め、スクロールは一覧の中だけで完結させる。 */
      .dm-custom-card-form .dm-effect-picker-list { max-height: clamp(160px, calc(100vh - 522px), 380px); }
    }
    .dm-custom-card-body { background: #f8fafc; }
    .dm-custom-card-form label { display: grid; gap: 6px; color: #334155; font-size: 0.9rem; font-weight: 700; }
    .dm-custom-card-form input,
    .dm-custom-card-form select,
    .dm-custom-card-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #aeb9c8; border-radius: 8px; padding: 10px 12px; background: #fff; color: #1f2937; font: inherit; resize: vertical; }
    .dm-custom-card-form select { font-weight: 400; }
    .dm-custom-card-form input[type="file"] { padding: 8px; font-weight: 400; }
    .dm-custom-card-form .required { color: #ffadad; font-size: .75rem; }
    .dm-custom-card-field { display: grid; gap: 6px; color: #334155; font-size: 0.9rem; font-weight: 700; }
    .dm-custom-card-civs { display: flex; flex-wrap: wrap; gap: 7px; }
    .dm-custom-card-civ { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #aeb9c8; border-radius: 999px; padding: 6px 12px; background: #fff; color: #1f2937; font-size: .85rem; font-weight: 700; cursor: pointer; }
    .dm-custom-card-civ input { width: auto; margin: 0; accent-color: currentColor; }
    .dm-custom-card-civ::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--civ-multi); }
    .dm-custom-card-civ.light::before  { background: var(--civ-light); }
    .dm-custom-card-civ.water::before  { background: var(--civ-water); }
    .dm-custom-card-civ.dark::before   { background: var(--civ-dark); }
    .dm-custom-card-civ.fire::before   { background: var(--civ-fire); }
    .dm-custom-card-civ.nature::before { background: var(--civ-nature); }
    .dm-custom-card-civ:has(input:checked) { border-color: #397354; background: #eef7f1; }
    .dm-effect-picker { display: grid; gap: 8px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px; background: #fff; }
    .dm-effect-picker-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
    .dm-effect-picker-tabs button { border: 1px solid #aeb9c8; border-radius: 999px; padding: 5px 11px; background: #f1f5f9; color: #334155; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
    .dm-effect-picker-tabs button.active { border-color: #397354; background: #397354; color: #fff; }
    .dm-effect-picker-search { width: 100%; box-sizing: border-box; border: 1px solid #aeb9c8; border-radius: 8px; padding: 8px 11px; background: #fff; color: #1f2937; font: inherit; font-weight: 400; }
    .dm-effect-picker-list { max-height: 260px; overflow-y: auto; display: grid; gap: 9px; }
    .dm-effect-picker-empty, .dm-effect-picker-more { margin: 4px 2px; color: #64748b; font-size: .78rem; font-weight: 400; }
    .dm-effect-row { display: grid; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid #eef2f7; }
    .dm-effect-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .dm-effect-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .dm-effect-label { color: #334155; font-size: .82rem; font-weight: 700; }
    .dm-effect-axis { border-radius: 4px; padding: 1px 6px; background: #e2e8f0; color: #475569; font-size: .68rem; font-weight: 700; }
    .dm-effect-manual { border-radius: 4px; padding: 1px 6px; background: #fdf0d5; color: #8a6410; font-size: .68rem; font-weight: 700; }
    .dm-effect-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .dm-effect-chip { max-width: 100%; border: 1px solid #cbd5e1; border-radius: 7px; padding: 5px 9px; background: #f8fafc; color: #1f2937; font: inherit; font-size: .78rem; font-weight: 400; text-align: left; cursor: pointer; }
    .dm-effect-chip:hover { border-color: #397354; background: #eef7f1; }
    .dm-effect-chip.template { border-color: #397354; background: #eef7f1; font-weight: 700; }
    .dm-effect-picker-none { color: #94a3b8; font-size: .75rem; font-weight: 400; }
    .dm-custom-card-note { margin: 0; color: #64748b; font-size: .78rem; line-height: 1.55; }
    /* 入力欄が増えると低い画面ではモーダル内スクロールになるので、決定ボタンは常に見せる。
       高さの微調整でボタンを画面内に収めようとすると、画面サイズごとに破綻する。 */
    .dm-custom-card-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 9px; padding: 12px 18px; background: #f8fafc; box-shadow: 0 -8px 12px -8px rgba(15, 23, 42, .18); }
    .dm-custom-card-actions button { border: 1px solid rgba(140,160,190,.4); border-radius: 8px; padding: 9px 15px; background: #28354a; color: #fff; cursor: pointer; }
    .dm-custom-card-actions button.primary { background: #397354; border-color: #579872; }
    .mlb-bar-btn.custom { background: #65507f; }
    @media (max-width: 600px) {
      .dm-custom-card-body { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
      .dm-custom-card-form { padding: 14px; gap: 11px; }
      .dm-custom-card-actions button { flex: 1; }
    }

    /* 公開用開始画面: 既存の認証IDと操作契約は維持 */
    #auth-screen { inset: 0; width: 100%; min-height: 100vh; min-height: 100dvh; height: auto; overflow-y: auto; padding: 32px 20px; background: var(--bg-gradient); }
    #auth-screen.active { gap: 16px; }
    #auth-screen .auth-box { max-width: 920px; width: min(92vw, 920px); padding: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-lg); }
    .auth-brand { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 44px 36px 32px; background: radial-gradient(ellipse at 50% 30%, #f8fafd 0%, #eaeef5 55%, #dfe6ef 100%); border-right: 1px solid var(--border); }
    .auth-brand::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--civ-light) 0 20%, var(--civ-water) 20% 40%, var(--civ-dark) 40% 60%, var(--civ-fire) 60% 80%, var(--civ-nature) 80% 100%); }
    .auth-wordmark { display: flex; align-items: baseline; gap: 2px; color: var(--text); font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; }
    .auth-wordmark b { font-family: var(--font-num); font-weight: 600; }
    .auth-subtitle { color: var(--text-dim); font-size: .95rem; line-height: 1.7; }
    .auth-modes { display: grid; gap: 12px; margin: 4px 0 auto; color: var(--text-dim); font-size: .85rem; line-height: 1.55; }
    .auth-mode { display: grid; grid-template-columns: 8px 1fr; gap: 10px; align-items: baseline; }
    .auth-mode-dot { width: 6px; height: 6px; border-radius: 50%; }
    .auth-mode-dot.fire { background: var(--civ-fire); } .auth-mode-dot.water { background: var(--civ-water); } .auth-mode-dot.nature { background: var(--civ-nature); }
    .auth-mode strong { color: var(--text); }
    .auth-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .8rem; }
    .auth-links a { color: var(--secondary); text-decoration: none; } .auth-links a:hover { text-decoration: underline; }
    .auth-action { position: relative; display: flex; flex-direction: column; padding: 36px 40px 28px; }
    #auth-screen .auth-action h1 { margin: 0 0 16px; color: var(--text); font-size: 1.2rem; font-weight: 700; text-align: left; letter-spacing: 0; }
    #auth-screen .auth-action h1::after { display: none; }
    #auth-screen .auth-form, #auth-screen .auth-form-section { flex-direction: column; gap: 12px; }
    #auth-screen .auth-form { display: flex; } #auth-screen .auth-form-section { display: none; } #auth-screen .auth-form-section.active { display: flex; }
    #auth-screen .auth-form-section input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; font: inherit; font-size: 16px; outline: 0; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
    #auth-screen .auth-form-section input:focus { border-color: var(--secondary); box-shadow: var(--ring); }
    #auth-screen .auth-user-id-field { display: flex; align-items: center; height: 48px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
    #auth-screen .auth-user-id-field:focus-within { border-color: var(--secondary); box-shadow: var(--ring); }
    #auth-screen .auth-user-id-prefix { padding: 0 0 0 12px; color: var(--text); font-size: 16px; font-weight: 700; }
    #auth-screen .auth-form-section .auth-user-id-field input { flex: 1; width: auto; min-width: 0; height: 46px; padding-left: 2px; border: 0; border-radius: 0; text-transform: uppercase; box-shadow: none; }
    #auth-screen .auth-form-section .auth-user-id-field input:focus { border: 0; box-shadow: none; }
    #auth-screen .auth-user-id-field.legacy-mode .auth-user-id-prefix { display: none; }
    #auth-screen .auth-form-section .auth-user-id-field.legacy-mode input { padding-left: 12px; text-transform: none; }
    #auth-screen .auth-action .auth-legacy-login-toggle { align-self: flex-start; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--secondary); font-size: .8rem; font-weight: 700; text-decoration: underline; }
    #auth-screen .auth-legacy-note { display: none; margin: -4px 0 0; color: var(--text-dim); font-size: .76rem; line-height: 1.6; }
    #auth-screen .auth-legacy-note.show { display: block; }
    #auth-screen .auth-action button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--radius-md); cursor: pointer; font: inherit; font-size: 1rem; font-weight: 700; transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
    #auth-screen .btn-primary { background: var(--accent); color: #fff; } #auth-screen .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-2); transform: translateY(-1px); }
    #auth-screen .btn-secondary { background: var(--secondary); color: #fff; } #auth-screen .btn-secondary:hover { background: var(--secondary-hover); }
    .auth-guest-cta { width: 100%; min-height: 52px !important; }
    #auth-screen .auth-guest-note { margin: 8px 0 0; color: var(--text-dim); font-size: .8rem; line-height: 1.7; text-align: center; }
    .auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; color: var(--text-dim); font-size: .78rem; white-space: nowrap; }
    .auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
    #auth-screen .auth-tabs { display: flex; gap: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
    #auth-screen .auth-tab { flex: 0 0 auto; position: relative; padding: 10px 2px; background: transparent; border: 0; border-radius: 0; color: var(--text-dim); }
    #auth-screen .auth-tab.active { background: transparent; color: var(--text); }
    #auth-screen .auth-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
    #auth-screen .error-msg { color: #b84545; background: transparent; }
    #auth-screen .api-status { margin: auto 0 0; padding: 16px 0 0; border: 0; background: transparent; color: var(--text-dim); font-size: .72rem; text-align: right; }
    #auth-screen .api-status.ok { background: transparent; color: #2e7342; } #auth-screen .api-status.warn { background: transparent; color: var(--text-dim); }
    .auth-register-note { color: var(--text-dim); font-size: .78rem; line-height: 1.7; }
    .auth-session-note { margin: 2px 0 8px; color: var(--text-dim); font-size: .76rem; line-height: 1.6; }
    .auth-issued-id { display: none; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.72); }
    .auth-issued-id.show { display: grid; gap: 10px; }
    .auth-issued-id h2 { margin: 0; font-size: 1rem; }
    .auth-issued-id p { margin: 0; color: var(--text-dim); font-size: .78rem; line-height: 1.6; }
    .auth-id-copy-row { display: flex; gap: 8px; }
    .auth-id-copy-row code { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font-size: .9rem; overflow-wrap: anywhere; user-select: all; }
    .auth-id-copy-row button { flex: 0 0 auto; }
    .auth-disclaimer { width: min(92vw, 720px); color: var(--text-dim); font-size: .72rem; line-height: 1.7; text-align: center; }
    .auth-mobile-links { display: none; }
    .auth-tab-guest-legacy { display: none !important; }
    @media (max-width: 768px) {
      #auth-screen { padding: 20px 12px; justify-content: flex-start; }
      #auth-screen .auth-box { width: min(100%, 520px); grid-template-columns: 1fr; }
      .auth-brand { padding: 24px 20px; gap: 6px; border-right: 0; border-bottom: 1px solid var(--border); }
      .auth-wordmark { font-size: 1.4rem; } .auth-subtitle { font-size: .85rem; }
      .auth-brand .auth-modes, .auth-brand .auth-links { display: none; }
      .auth-action { padding: 24px 20px; } #auth-screen .auth-action h1 { margin-bottom: 12px; }
      #auth-screen .auth-action button, #auth-screen .auth-form-section input { min-height: 48px; }
      .auth-mobile-links { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
      .auth-mobile-links .auth-modes { display: grid; } .auth-mobile-links .auth-links { display: grid; grid-template-columns: 1fr 1fr; }
      #auth-screen .api-status { text-align: left; }
    }
    @media (prefers-reduced-motion: reduce) { #auth-screen.active .auth-box, #auth-screen .auth-form-section.active { animation: none; } #auth-screen .auth-action button { transition: none; } }

    /* PC/SP 共通アカウントメニュー */
    .account-menu-modal { display: none; position: fixed; inset: 0; z-index: 12000; align-items: center; justify-content: center; padding: 16px; }
    .account-menu-modal.open { display: flex; }
    .account-menu-backdrop { position: absolute; inset: 0; background: rgba(17,25,38,.62); }
    .account-menu-panel { position: relative; width: min(94vw, 560px); max-height: min(88dvh, 760px); overflow: auto; padding: 22px; border: 1px solid rgba(55,78,110,.3); border-radius: 12px; background: #f7f9fc; color: #243447; box-shadow: 0 20px 60px rgba(12,20,32,.3); }
    .account-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .account-menu-head h2 { margin: 0; font-size: 1.18rem; }
    .account-menu-close { border: 1px solid #aab5c4; border-radius: 6px; background: #fff; color: #243447; padding: 6px 10px; cursor: pointer; }
    .account-menu-summary { display: grid; gap: 5px; margin-bottom: 16px; padding: 12px; border-radius: 8px; background: #eaf0f7; }
    .account-menu-name { font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
    .account-menu-label { color: #687588; font-size: .72rem; font-weight: 700; }
    .account-menu-id-row { display: flex; align-items: stretch; gap: 8px; }
    .account-menu-id { flex: 1; min-width: 0; padding: 9px; border: 1px solid #c4ceda; border-radius: 6px; background: #fff; font-family: ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
    .account-menu-copy { border: 1px solid #6680a3; border-radius: 6px; background: #fff; color: #243447; padding: 8px 12px; cursor: pointer; }
    .account-id-notice { display: none; gap: 10px; margin-bottom: 16px; padding: 14px; border: 2px solid #b66b15; border-radius: 9px; background: #fff4dc; color: #55330d; }
    .account-id-notice.show { display: grid; }
    .account-id-notice h3 { margin: 0; font-size: 1rem; }
    .account-id-notice p { margin: 0; font-size: .82rem; font-weight: 700; line-height: 1.65; }
    .account-id-notice .account-menu-action { background: #8a4d08; }
    .account-menu-section { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid #d5dde7; }
    .account-menu-section h3 { margin: 0; font-size: .9rem; }
    .account-menu-section p { margin: 0; color: #687588; font-size: .75rem; line-height: 1.55; }
    .account-menu-section input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #b9c5d3; border-radius: 6px; background: #fff; color: #243447; }
    .account-menu-action { justify-self: start; border: 0; border-radius: 6px; padding: 9px 14px; background: #3b6ea5; color: #fff; font-weight: 700; cursor: pointer; }
    .account-menu-action:disabled { opacity: .55; cursor: wait; }
    .account-menu-danger { background: #a33b3b; }
    .account-menu-footer { display: flex; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid #d5dde7; }
    .account-menu-logout { border: 1px solid #8f9cad; border-radius: 6px; padding: 9px 14px; background: #fff; color: #243447; cursor: pointer; }
    .account-menu-status { min-height: 1.3em; margin: 8px 0 0; color: #2e7342; font-size: .78rem; }
    .account-menu-status.error { color: #a33b3b; }
    .account-menu-se-controls { display: grid; grid-template-columns: minmax(0, 1fr) 4ch; align-items: center; gap: 12px; }
    .account-menu-section input.account-menu-se-range {
      width: 100%; min-height: 32px; padding: 0; border: 0; background: transparent;
      accent-color: #3b6ea5; cursor: pointer;
    }
    .account-menu-se-output { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
    @media (max-width: 600px) {
      .account-menu-modal { align-items: flex-end; padding: 0; }
      .account-menu-panel { width: 100%; max-height: 92dvh; padding: 18px 16px; border-radius: 14px 14px 0 0; }
    }

    /* ── AI検索モード（通常/AI検索 切替トグルと検索実行ボタン） ── */
    /* PC版 */
    .dl-search-mode {
      display: inline-flex;
      margin-bottom: 8px;
      border: 1px solid #d3cabb;
      border-radius: 8px;
      overflow: hidden;
      background: #f3efe7;
    }
    .dl-search-mode-btn {
      border: none;
      background: transparent;
      color: #6a6255;
      padding: 6px 15px;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
    }
    .dl-search-mode-btn:hover:not(.active) { background: #ece6db; }
    .dl-search-mode-btn.active { background: var(--secondary); color: #fff; }
    .dl-search-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }
    .dl-search-input-row .dl-input { flex: 1 1 auto; margin-bottom: 0; }
    .dl-search-run-btn {
      flex: 0 0 auto;
      border: 1px solid var(--secondary-hover);
      background: var(--secondary);
      color: #fff;
      border-radius: 8px;
      padding: 8px 15px;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }
    .dl-search-run-btn:hover { background: var(--secondary-hover); }
    .dl-ai-note {
      margin: 4px 0 0;
      color: var(--text-dim);
      font-size: var(--fs-xs);
      line-height: 1.6;
    }

    /* SP版 */
    .mlb-search-mode {
      display: inline-flex;
      align-self: flex-start;
      border: 1px solid rgba(59,110,165,0.4);
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .mlb-search-mode-btn {
      border: none;
      background: rgba(255,255,255,0.7);
      color: #3f4b5a;
      padding: 5px 13px;
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: pointer;
    }
    .mlb-search-mode-btn.active { background: var(--secondary); color: #fff; }
    .mlb-search-custom-btn { display: none; }
    .mlb-search-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .mlb-search-input-row .mlb-search-input { flex: 1 1 auto; }
    .mlb-search-run-btn {
      flex: 0 0 auto;
      border: 1px solid var(--secondary-hover);
      background: var(--secondary);
      color: #fff;
      border-radius: 8px;
      padding: 7px 13px;
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }
    .mlb-ai-note {
      margin: 2px 0 0;
      color: var(--table-label);
      font-size: var(--fs-xs);
      line-height: 1.5;
      flex-shrink: 0;
    }
    .ml-search-loading-label {
      margin-top: 10px;
      font-size: var(--fs-sm);
      color: var(--text-dim);
    }

    /* 選択中・処理中のカード（UI仕様「選択中・処理中のカード」） */
    /* SP: 操作パネルを開いているカード */
    .mg-card-chip.mg-selected {
      outline: 3px solid #2f7de1; outline-offset: 1px;
      box-shadow: 0 0 0 5px rgba(47,125,225,.28);
      z-index: 5;
    }
    /* 効果の発生元。提案モーダルの暗幕越しでも分かる太い枠と光 */
    .dg-card-chip.dm-effect-source, .mg-card-chip.dm-effect-source {
      outline: 3px solid #f2a900; outline-offset: 2px;
      box-shadow: 0 0 0 6px rgba(242,169,0,.32), 0 0 18px rgba(242,169,0,.75);
      z-index: 6;
    }
    /* 盤面のマークの説明（カード詳細・PCのカード欄） */
    .dm-badge-legend { margin-top: 8px; border-top: 1px solid #e2e7f0; padding-top: 8px; }
    .dm-badge-legend-title { font-size: var(--fs-xs); font-weight: 800; color: #41506a; margin-bottom: 4px; }
    .dm-badge-legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
    .dm-badge-legend-row { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-xs); line-height: 1.45; color: #243447; }
    .dm-badge-legend-text {
      flex: 0 0 auto; min-width: 28px; text-align: center; border-radius: 6px; padding: 1px 6px;
      background: #243447; color: #fff; font-weight: 800;
    }
    .dm-badge-legend-icon { flex: 0 0 auto; display: inline-flex; width: 20px; height: 20px; }
    .dm-badge-legend-icon svg { width: 20px; height: 20px; }
    .dm-badge-legend-meaning { min-width: 0; overflow-wrap: anywhere; }