:root {
    --bg: #0a0d20;
    --felt: #10142c;
    --felt-2: #171735;
    --line: rgba(244, 240, 230, .10);
    --rail: #f4f0e6;
    --rail-dim: rgba(244, 240, 230, .82);
    --dirt: #c9a66a;
    --gold: #e3b23c;
    --gold-2: #ffe082;
    --guard: #c1443c;
    --force: #e3b23c;
    --horse: #3f8a56;
    --item: #b98a4e;
    --situation: #5b6b93;
    --maroon: #5a1620;
    --mat-image: url("images/table-felt.png");
    --card-back-image: url("images/card-back.jpg");
    --maroon-2: #7c2230;
    --ink: #0a120d;
    --shadow: 0 10px 24px rgba(0, 0, 0, .45);
    --radius: 14px;
  }

  * {
    box-sizing: border-box;
    touch-action: manipulation;
  }

  .img-icon {
    display: inline-block;
    vertical-align: -0.18em;
    width: 1.15em;
    height: 1.15em;
    object-fit: contain;
    pointer-events: none;
  }

  .img-icon-lg {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.22em;
  }

  .img-icon-inline {
    margin-right: 5px;
  }

  .img-icon-standalone {
    display: inline-block;
    vertical-align: middle;
  }

  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    background-color: #000108;
    color: var(--rail);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  /* Three.js 3D Space Background (Active in Classic and Nature mode) */
  #three-bg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* Cyber mode: Hide 3D canvas, show cyber card playfield background */
  body.field-cyber #three-bg {
    display: none !important;
  }

  body.field-cyber {
    background-color: #050c18;
    background:
      radial-gradient(ellipse at 50% 120%, rgba(62, 224, 255, .22) 0%, rgba(14, 165, 233, .12) 40%, transparent 75%),
      repeating-radial-gradient(circle at 50% 100%, rgba(62, 224, 255, .04) 0px, rgba(62, 224, 255, .04) 1.5px, transparent 1.5px, transparent 28px),
      repeating-linear-gradient(0deg, rgba(62, 224, 255, .035) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(62, 224, 255, .035) 0 1px, transparent 1px 28px),
      linear-gradient(180deg, #050c18 0%, #081426 50%, #0d223a 100%);
    background-attachment: fixed;
  }

  /* Nature mode: 3D背景を前面に見せるため画面全体を透明化 */
  body.field-nature,
  body[data-theme="nature"],
  body.field-classic,
  body[data-theme="classic"] {
    background-color: #010d06 !important;
    background-image: none !important;
  }

  body.field-nature #three-bg,
  body[data-theme="nature"] #three-bg,
  body.field-classic #three-bg {
    display: block !important;
    opacity: 1 !important;
    z-index: 0;
    pointer-events: none;
  }

  body.space-bg #three-bg {
    opacity: 0;
  }

  body::before,
  body::after {
    display: none;
  }

  body.space-bg::before {
    background:
      /* 中央の明るい光源 */
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 1%, rgba(255, 255, 255, 0.3) 2%, rgba(255, 255, 255, 0.1) 4%, transparent 8%),
      /* 主要な星雲 */
      radial-gradient(ellipse at 50% 50%, rgba(74, 222, 128, 0.25) 0%, transparent 35%),
      radial-gradient(ellipse at 30% 70%, rgba(147, 51, 234, 0.2) 0%, transparent 40%),
      radial-gradient(ellipse at 70% 30%, rgba(59, 130, 246, 0.2) 0%, transparent 40%),
      radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.15) 0%, transparent 35%),
      radial-gradient(ellipse at 80% 80%, rgba(34, 197, 94, 0.15) 0%, transparent 35%),
      /* 渦巻き効果 */
      conic-gradient(from 45deg at 50% 50%, transparent 0deg, rgba(74, 222, 128, 0.05) 90deg, transparent 180deg, rgba(147, 51, 234, 0.05) 270deg, transparent 360deg),
      conic-gradient(from 225deg at 50% 50%, transparent 0deg, rgba(59, 130, 246, 0.05) 90deg, transparent 180deg, rgba(34, 197, 94, 0.05) 270deg, transparent 360deg),
      /* 多くの星 - 小 */
      radial-gradient(1px 1px at 5% 15%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 8% 35%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 12% 55%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 15% 75%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 18% 25%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 22% 65%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 25% 45%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 28% 85%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 32% 15%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 35% 55%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 38% 75%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 42% 25%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 45% 65%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 48% 45%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 52% 85%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 55% 15%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 58% 55%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 62% 75%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 65% 25%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 68% 65%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 72% 45%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 75% 85%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 78% 15%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 82% 55%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 75%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 88% 25%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 92% 65%, white 0%, transparent 100%),
      radial-gradient(1px 1px at 95% 45%, white 0%, transparent 100%),
      /* 中程度の星 */
      radial-gradient(1.5px 1.5px at 10% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 20% 60%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 30% 40%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 40% 80%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 50% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 60% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 70% 70%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 80% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 90% 60%, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
      /* 大きな輝く星 */
      radial-gradient(2px 2px at 15% 50%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
      radial-gradient(3px 3px at 15% 50%, rgba(74, 222, 128, 0.4) 0%, transparent 100%),
      radial-gradient(2px 2px at 85% 50%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
      radial-gradient(3px 3px at 85% 50%, rgba(147, 51, 234, 0.4) 0%, transparent 100%),
      radial-gradient(2px 2px at 50% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
      radial-gradient(3px 3px at 50% 15%, rgba(59, 130, 246, 0.4) 0%, transparent 100%),
      radial-gradient(2px 2px at 50% 85%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
      radial-gradient(3px 3px at 50% 85%, rgba(34, 197, 94, 0.4) 0%, transparent 100%),
      /* ベース背景 */
      linear-gradient(180deg, #0a1a0d 0%, #0f2912 50%, #0a1a0d 100%);
    background-size:
      100% 100%,
      100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
      100% 100%, 100% 100%,
      100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
      100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
      100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
      100% 100%;
    animation: spacePulse 8s ease-in-out infinite alternate;
  }

  body.space-bg::after {
    background: none;
    animation: none;
  }

  @keyframes spacePulse {
    0% {
      opacity: 0.85;
    }

    100% {
      opacity: 1;
    }
  }

  .num,
  .brand,
  .step-label,
  .card-stat,
  .zone-label,
  .btn {
    font-family: 'Oswald', 'Zen Kaku Gothic New', sans-serif;
  }

  .app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: transparent;
  }

  /* ---------- Topbar ---------- */
  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px calc(8px + env(safe-area-inset-top, 0px));
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, #10142c, rgba(16, 20, 44, .4));
    border-bottom: 1px solid var(--line);
    z-index: 30;
  }

  .topbar-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .short-label {
    display: none;
  }

  .brand {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--gold-2);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  }

  .brand span {
    color: var(--rail-dim);
    font-weight: 500;
    font-size: 10px;
    display: block;
    letter-spacing: .2em;
  }

  .race-info {
    flex: none;
    font-size: 10px;
    color: var(--gold-2);
    white-space: nowrap;
    padding: 4px 8px;
    border: 1px solid rgba(227, 178, 60, .3);
    border-radius: 999px;
    background: rgba(10, 18, 13, .48);
  }

  .race-info:empty {
    display: none;
  }

  /* ---------- Modern Cyber Game Track & HUD Progress ---------- */
  .track-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 2px;
  }

  .track-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    padding: 0 1px;
  }

  .track-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #38ef7d;
    text-transform: uppercase;
    background: rgba(56, 239, 125, .12);
    border: 1px solid rgba(56, 239, 125, .35);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(56, 239, 125, .18);
  }

  .badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #38ef7d;
    box-shadow: 0 0 6px #38ef7d;
    animation: badgePulse 1.8s ease-in-out infinite;
  }

  @keyframes badgePulse {

    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: .4;
      transform: scale(.75);
    }
  }

  .step-label {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'Oswald', 'Zen Kaku Gothic New', sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--rail-dim);
  }

  .step-prefix {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    color: rgba(160, 190, 220, .8);
  }

  .step-current {
    font-size: 12.5px;
    font-weight: 700;
    color: #00f0ff;
    text-shadow: 0 0 8px rgba(0, 240, 255, .75);
  }

  .step-slash {
    font-size: 10px;
    color: rgba(255, 255, 255, .35);
    margin: 0 1px;
  }

  .step-total {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .65);
  }

  /* サイバートラック（高精細HUDバー） */
  .track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(5, 12, 24, .95) 0%, rgba(10, 22, 40, .85) 100%);
    border: 1px solid rgba(62, 224, 255, .35);
    box-shadow:
      inset 0 1px 3px rgba(0, 0, 0, .8),
      0 0 8px rgba(62, 224, 255, .15),
      0 1px 0 rgba(255, 255, 255, .08);
    overflow: visible;
  }

  /* HUDグリッド目盛り（16分割） */
  .track-grid {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-image: repeating-linear-gradient(90deg,
        transparent 0,
        transparent calc(6.25% - 1px),
        rgba(62, 224, 255, .2) calc(6.25% - 1px),
        rgba(62, 224, 255, .2) 6.25%);
    pointer-events: none;
  }

  /* エナジープログレスフィル */
  .track-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        #0284c7 0%,
        #00f0ff 40%,
        #10b981 85%,
        #34d399 100%);
    box-shadow:
      0 0 12px rgba(0, 240, 255, .7),
      0 0 4px rgba(52, 211, 153, .9);
    transition: width .45s cubic-bezier(.25, .8, .25, 1);
    overflow: visible;
  }

  /* フィル内の流れる光彩シマー */
  .track-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, .45) 50%,
        transparent 100%);
    background-size: 40px 100%;
    animation: cyberEnergyShine 1.8s linear infinite;
  }

  @keyframes cyberEnergyShine {
    0% {
      background-position: -40px 0;
    }

    100% {
      background-position: 160px 0;
    }
  }

  /* 先端の発光ノード */
  .track-head-glow {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
      0 0 6px #ffffff,
      0 0 10px #00f0ff,
      0 0 16px #34d399;
  }

  /* サイバーホースピン（インジケーター） */
  .track-horse {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -64%);
    z-index: 5;
    transition: left .45s cubic-bezier(.25, .8, .25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }

  .horse-pin-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #0d223a 0%, #06101e 100%);
    border: 1.5px solid #00f0ff;
    box-shadow:
      0 0 10px rgba(0, 240, 255, .65),
      0 2px 6px rgba(0, 0, 0, .75);
    animation: horseGlide 2s ease-in-out infinite alternate;
  }

  .horse-icon {
    font-size: 13px;
    line-height: 1;
    color: #00f0ff;
    text-shadow: 0 0 6px rgba(0, 240, 255, .9);
    display: block;
  }

  .horse-pin-arrow {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid #00f0ff;
    margin-top: -1px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
  }

  @keyframes horseGlide {
    0% {
      transform: translateY(0) rotate(-1deg);
    }

    100% {
      transform: translateY(-2px) rotate(2deg);
    }
  }

  /* ゴールフラッグゲート */
  .track-flag {
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(10, 18, 32, .88);
    border: 1px solid rgba(227, 178, 60, .6);
    box-shadow:
      0 0 8px rgba(227, 178, 60, .3),
      0 2px 4px rgba(0, 0, 0, .6);
    transition: transform .3s ease, border-color .3s, box-shadow .3s;
  }

  .track-flag .flag-icon {
    font-size: 12px;
    line-height: 1;
  }

  .track-flag.goal-reached {
    border-color: #ffd700;
    box-shadow:
      0 0 16px rgba(255, 215, 0, .8),
      0 0 24px rgba(255, 170, 0, .5);
    transform: translateY(-50%) scale(1.15);
    animation: goalCelebrate .8s ease-in-out infinite alternate;
  }

  @keyframes goalCelebrate {
    0% {
      transform: translateY(-50%) scale(1.1);
    }

    100% {
      transform: translateY(-50%) scale(1.22);
    }
  }

  @media (max-width: 760px) {
    .race-info {
      display: none;
    }
  }

  .theme-switch,
  .mode-switch {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    border: 1px solid rgba(227, 178, 60, .4);
    background: rgba(20, 16, 10, .65);
    border-radius: 999px;
    padding: 2px;
  }

  .theme-opt,
  .mode-opt {
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--rail-dim);
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    transition: background .18s, color .18s, box-shadow .18s;
  }

  .theme-opt:hover,
  .mode-opt:hover {
    color: var(--rail);
  }

  .theme-opt.active,
  .theme-opt[data-theme="cyber"].active {
    background: linear-gradient(135deg, #00f0ff, #0284c7);
    color: #03202e;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 240, 255, .65);
  }

  .theme-opt[data-theme="dark"].active {
    background: linear-gradient(135deg, #38bdf8, #0369a1);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(56, 189, 248, .6);
  }

  .theme-opt[data-theme="white"].active {
    background: linear-gradient(135deg, #00d2ff, #0284c7);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 210, 255, .65);
  }

  .theme-opt[data-theme="classic"].active,
  .theme-opt[data-theme="nature"].active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(16, 185, 129, .65);
  }

  .mode-opt.active {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 0 10px rgba(227, 178, 60, .6);
  }

  .mode-opt[data-mode="manual"].active {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #052812;
    box-shadow: 0 0 10px rgba(74, 222, 128, .65);
  }

  body.manual-mode .narrator {
    display: none !important;
  }

  /* manual-modeの時はナレーターのスペースを詰める */
  body.manual-mode .hand-zone {
    margin-top: -16px;
  }

  #command-bar[hidden],
  #command-bar.hidden {
    display: none !important;
  }

  .restart-btn {
    background: rgba(20, 16, 10, .6);
    border: 1px solid rgba(227, 178, 60, .4);
    color: var(--rail-dim);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    cursor: pointer;
    white-space: nowrap;
  }

  .restart-btn:hover {
    color: var(--rail);
    border-color: var(--rail);
  }

  .bgm-toggle {
    flex: none;
    background: rgba(20, 16, 10, .6);
    border: 1px solid rgba(227, 178, 60, .4);
    color: var(--rail-dim);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s, opacity .15s;
  }

  .bgm-toggle:hover {
    color: var(--rail);
    border-color: var(--rail);
  }

  .bgm-toggle.is-off {
    opacity: .5;
    border-style: dashed;
  }

  .perspective-toggle {
    flex: none;
    background: rgba(20, 16, 10, .6);
    border: 1px solid rgba(227, 178, 60, .4);
    color: var(--rail-dim);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
  }

  .perspective-toggle:hover {
    color: var(--rail);
    border-color: var(--rail);
  }

  .perspective-toggle.is-on {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(227, 178, 60, .55);
  }

  .tilt-select {
    display: none;
    flex: none;
    gap: 3px;
    border: 1px solid rgba(227, 178, 60, .4);
    background: rgba(20, 16, 10, .6);
    border-radius: 999px;
    padding: 2px;
  }

  body.field-3d .tilt-select {
    display: flex;
  }

  .tilt-opt {
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--rail-dim);
    font-size: 10px;
    font-family: 'Oswald', sans-serif;
    padding: 4px 8px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .15s, color .15s;
  }

  .tilt-opt.active {
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
  }

  /* settings panel & gear: 表示設定 */
  .settings-gear {
    background: rgba(20, 16, 10, .6);
    border: 1px solid rgba(227, 178, 60, .4);
    border-radius: 999px;
    color: var(--rail-dim);
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    padding: 3px 10px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
  }

  .settings-gear:hover {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
  }

  .settings-gear:active {
    transform: scale(0.95);
  }

  .settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.2, .7, .3, 1);
  }

  .settings-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  .settings-panel {
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.2, .7, .3, 1);
  }

  .settings-overlay.show .settings-panel {
    transform: translateX(0);
  }

  .settings-panel {
    width: min(320px, 86vw);
    max-height: 100vh;
    overflow-y: auto;
    background: var(--felt);
    border-left: 1px solid var(--line);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: -10px 0 30px rgba(0, 0, 0, .5);
  }

  .settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .settings-title {
    font-family: 'Oswald', sans-serif;
    letter-spacing: .1em;
    font-size: 14px;
    color: var(--rail);
  }

  .settings-close {
    background: transparent;
    border: none;
    color: var(--rail-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
  }

  .settings-close:hover {
    color: var(--rail);
  }

  /* settings tabs */
  .settings-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(227, 178, 60, .25);
    padding-bottom: 10px;
  }

  .settings-tab-btn {
    flex: 1;
    background: rgba(20, 16, 10, .6);
    border: 1px solid rgba(227, 178, 60, .35);
    border-radius: 8px;
    color: var(--rail-dim);
    font-size: 11.5px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    padding: 7px 6px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
  }

  .settings-tab-btn:hover {
    color: var(--rail);
    border-color: rgba(227, 178, 60, .6);
  }

  .settings-tab-btn.active {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
    font-weight: 700;
    box-shadow: 0 0 10px rgba(227, 178, 60, .45);
  }

  .settings-tab-content {
    display: none;
  }

  .settings-tab-content.active {
    display: block;
    animation: settingsTabIn .2s ease-out;
  }

  @keyframes settingsTabIn {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .settings-desc {
    font-size: 10.5px;
    color: var(--rail-dim);
    opacity: .8;
    margin-top: 6px;
    line-height: 1.45;
  }

  .settings-panel .mode-switch,
  .settings-panel .theme-switch {
    width: 100%;
    display: flex;
    box-sizing: border-box;
  }

  .settings-panel .mode-opt,
  .settings-panel .theme-opt {
    flex: 1;
    text-align: center;
    padding: 7px 10px;
    font-size: 11.5px;
  }

  .settings-bgm-toggle {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .settings-group {
    margin-bottom: 16px;
  }

  .settings-label {
    font-size: 11px;
    color: var(--rail-dim);
    margin-bottom: 6px;
    letter-spacing: .05em;
  }

  .preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

  .preset-grid#tilt-select {
    display: grid !important;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }

  .preset-grid.effect-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .preset-btn {
    background: rgba(20, 16, 10, .6);
    border: 1px solid rgba(227, 178, 60, .35);
    color: var(--rail-dim);
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    cursor: pointer;
    text-align: center;
    transition: background .15s, color .15s, border-color .15s;
  }

  .preset-btn.active {
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    border-color: var(--gold);
  }

  .bgm-track-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
  }

  .bgm-track-opt {
    background: rgba(14, 20, 32, 0.75);
    border: 1.5px solid rgba(227, 178, 60, 0.28);
    color: var(--card-fg, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: all .18s ease;
  }

  .bgm-track-opt:hover {
    border-color: var(--gold-2);
    background: rgba(30, 42, 64, 0.85);
  }

  .bgm-track-opt.active {
    border-color: var(--gold-2);
    background: linear-gradient(135deg, rgba(227, 178, 60, 0.22), rgba(0, 210, 255, 0.18));
    color: #ffffff;
    box-shadow: 0 0 12px rgba(227, 178, 60, 0.35);
  }

  .bgm-track-opt .bgm-badge {
    font-size: 9.5px;
    font-weight: 400;
    color: var(--gold-2);
    opacity: 0.85;
  }

  .bgm-track-opt.active .bgm-badge {
    color: #5eead4;
    font-weight: 700;
  }

  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--rail-dim);
    margin-bottom: 6px;
  }

  .settings-value {
    color: var(--gold-2);
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
  }

  .settings-group input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(227, 178, 60, .25);
    outline: none;
  }

  .settings-group input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(227, 178, 60, .6);
  }

  .settings-group input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    border: none;
    cursor: pointer;
  }

  .settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--rail-dim);
    cursor: pointer;
  }

  .settings-toggle-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
  }

  .settings-reset {
    width: 100%;
    background: rgba(20, 16, 10, .6);
    border: 1px solid rgba(227, 178, 60, .4);
    color: var(--rail-dim);
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    cursor: pointer;
    margin-top: 4px;
    transition: color .15s, border-color .15s;
  }

  .settings-reset:hover {
    color: var(--rail);
    border-color: var(--rail);
  }

  /* ---------- Board ---------- */
  .board {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: transparent;
  }

  @media (min-width:640px) {
    .board {
      max-width: 720px;
      margin: 0 auto;
      width: 100%;
      padding: 12px 12px 6px;
    }
  }

  .opponent-strip {
    flex: none;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    gap: 7px;
    background: linear-gradient(180deg, rgba(18, 35, 24, .9), rgba(18, 35, 24, .55));
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px 3px 3px;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  }

  /* ---------- Field frame (pure CSS, no photo) ---------- */
  .field-tilt {
    position: relative;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), margin-top .45s cubic-bezier(.2, .7, .3, 1);
    transform-style: preserve-3d;
    flex: none;
  }

  body.field-3d .field-tilt {
    transform: perspective(var(--field-perspective, 1300px)) rotateX(var(--tilt-angle, 10deg));
    transform-origin: 50% 100%;
    margin: var(--field-tilt-shift-y, -34px) 0 var(--field-tilt-margin-bottom, 14px);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), margin-top .45s cubic-bezier(.2, .7, .3, 1), margin-bottom .45s cubic-bezier(.2, .7, .3, 1);
  }

  /* radiating "floor" lines that share the field's own tilt and vanishing
     point (bottom-center), so the surrounding space reads as the same
     ground plane receding into the distance instead of a flat cutout the
     card grid is floating on top of. */
  .field-aura {
    display: none !important;
  }

  .field-image-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    transform-origin: 50% 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none;
    clip-path: none;
    background: transparent;
    border: none;
    outline: none;
    flex: none;
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(60px, 20vw, 100px) clamp(4px, 2vw, 12px);
    padding: 3vw 3vw 3.4vw;
  }

  /* ---------- 放射状サイバー飛沫・スピードストリーム背景（枠: サイバーと連動） ---------- */
  .field-splash-bg {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    background:
      radial-gradient(ellipse at 50% 130%, rgba(62, 224, 255, .22) 0%, rgba(14, 165, 233, .12) 40%, transparent 75%),
      repeating-linear-gradient(0deg, rgba(62, 224, 255, .03) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(62, 224, 255, .03) 0 1px, transparent 1px 28px),
      linear-gradient(180deg, #050c18 0%, #081426 50%, #0d223a 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .7);
  }

  body.field-cyber .field-splash-bg {
    display: block;
  }

  .field-splash-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-radial-gradient(circle at 50% 100%,
        rgba(62, 224, 255, .05) 0px,
        rgba(62, 224, 255, .05) 1.5px,
        transparent 1.5px,
        transparent 18px),
      linear-gradient(0deg, rgba(62, 224, 255, .08) 0%, transparent 50%);
    opacity: 0.65;
    pointer-events: none;
  }

  .field-splash-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: screen;
  }

  /* ---------- 状況カード背景（field-image-wrapの背景として設置） ---------- */
  /* ---------- 状況カード背景（field-image-wrapの背景として設置） ---------- */
  .field-situation-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none; /* 背景全体は操作をブロックしない */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  }

  .field-situation-bg.active {
    opacity: 1;
    transform: scale(1);
  }

  .field-situation-card {
    position: relative;
    width: clamp(310px, 56vw, 500px);
    aspect-ratio: 1.22 / 1;
    border-radius: 22px;
    opacity: 0.90; /* 状況カードは背景の薄さ設定に影響されず鮮明に表示 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 55px rgba(56, 189, 248, 0.55), 0 0 100px rgba(14, 165, 233, 0.35);
    border: 2px solid rgba(125, 211, 252, 0.85);
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.72));
    overflow: hidden;
    pointer-events: none; /* 背景カード本体はタップ無効化 */
    user-select: none;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
  }

  .field-situation-card .card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 60%);
    pointer-events: none;
  }

  /* 状況カード確認ボタン（このボタンでのみ確認可能） */
  .field-situation-check-btn {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(16, 28, 48, 0.94) 0%, rgba(30, 58, 95, 0.94) 100%);
    border: 1.5px solid rgba(251, 226, 136, 0.85);
    color: var(--gold-light, #fbe288);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(251, 191, 36, 0.3);
    cursor: pointer;
    pointer-events: auto; /* ボタンのみタップ有効 */
    touch-action: manipulation;
    font-family: inherit;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  }

  .field-situation-check-btn:hover {
    background: linear-gradient(135deg, rgba(24, 42, 72, 0.98) 0%, rgba(45, 85, 140, 0.98) 100%);
    border-color: #ffd859;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 18px rgba(251, 191, 36, 0.55);
    transform: translateX(-50%) scale(1.04);
  }

  .field-situation-check-btn:active {
    transform: translateX(-50%) scale(0.96);
  }

  .field-situation-check-btn .check-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
  }

  .field-situation-check-btn .check-btn-icon img,
  .field-situation-check-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
  }

  body.field-3d .field-image-wrap {
    box-shadow: 0 40px 60px -10px rgba(0, 0, 0, .6), var(--shadow);
  }

  /* optional test-field background (toggled via the テストF chip) */
  body.field-test-bg .field-image-wrap {
    background: url("images/field-test-bg.jpg") center/cover no-repeat;
  }

  body.field-test-bg .field-splash-bg {
    display: none !important;
  }

  @media (min-width:760px) {
    .field-image-wrap {
      gap: 112px 12px;
      padding: 18px 18px 22px;
      border-radius: 20px;
    }
  }

  .overlay {
    position: relative;
    z-index: 5;
    display: flex;
    transition: box-shadow .25s, outline-color .25s;
    border-radius: 8px;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  .overlay.zone-active {
    outline-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(227, 178, 60, .22), 0 0 18px rgba(227, 178, 60, .5);
    animation: zonePulse 1.4s ease-in-out infinite;
  }

  @keyframes zonePulse {

    0%,
    100% {
      box-shadow: 0 0 0 4px rgba(227, 178, 60, .22), 0 0 18px rgba(227, 178, 60, .5);
    }

    50% {
      box-shadow: 0 0 0 7px rgba(227, 178, 60, .34), 0 0 30px rgba(227, 178, 60, .8);
    }
  }

  /* 自分の馬カード置き場（.field-body）は .overlay ではないので、専用にハイライトを定義する。
     ov-field 全体（相手の置き場も含む対角配置ぶん）ではなく、自分の枠だけをハイライトする */
  #field-body.zone-active {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(227, 178, 60, .22), 0 0 18px rgba(227, 178, 60, .5);
    animation: zonePulse 1.4s ease-in-out infinite;
    transition: box-shadow .25s, outline-color .25s;
  }

  .ov-opp-deck {
    grid-row: 1;
    grid-column: 1/5;
    pointer-events: none;
    z-index: 6;
  }

  .ov-farm {
    grid-row: 2;
    grid-column: 1/2;
    align-items: center;
    justify-content: center;
    z-index: 8;
  }

  /* 状況カードより上のレイヤーに馬置き場を配置 */
  .ov-field {
    grid-row: 2;
    grid-column: 2/4;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
  }

  .ov-opp-farm {
    grid-row: 2;
    grid-column: 4/5;
    align-items: center;
    justify-content: center;
    z-index: 8;
  }

  .farm-pile-opp {
    border-color: rgba(255, 140, 150, .6);
  }

  .ov-deck {
    grid-row: 3;
    grid-column: 1/5;
  }

  .opp-lanes {
    width: 82%;
    margin: 0 auto;
    display: flex;
    gap: 2.2%;
    align-items: stretch;
    justify-content: center;
  }

  .opp-lane {
    position: relative;
    flex: 0 0 18.5%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5/7;
    border-radius: 9px;
    border: 1.5px solid rgba(255, 140, 150, .6);
    box-shadow: inset 0 0 14px rgba(255, 100, 120, .20), 0 0 10px rgba(255, 80, 100, .25);
    background: radial-gradient(120% 140% at 50% 0%, rgba(255, 100, 120, .18), transparent 65%), rgba(30, 14, 26, .75);
  }

  .opp-lane .lane-stack {
    width: 84%;
    opacity: .92;
    transform: rotate(180deg);
  }

  /* 相手の山札：重なり・厚みが見える方向を逆向き（プレイヤー側／フィールド側）に反転 */
  .opp-lane .lane-back-0 {
    --t: var(--stack-t, 1);
    transform: translateY(calc(4.5px * var(--t)));
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .4), 0 calc(-1px * var(--t)) 0 0 rgba(235, 225, 200, 0.85);
    border-color: #8a6f36;
  }

  .opp-lane .lane-back-1 {
    --t: var(--stack-t, 1);
    transform: translateY(calc(2px * var(--t)));
    box-shadow: 0 -1.5px 3px rgba(0, 0, 0, .35), 0 calc(-1px * var(--t)) 0 0 rgba(220, 205, 175, 0.7);
  }

  .opp-lane .lane-back-2 {
    --t: var(--stack-t, 1);
    transform: translateY(0);
    box-shadow:
      0 -2px 4px rgba(0, 0, 0, .45),
      0 calc(-1px * var(--t)) 0 0 #1c160f,
      0 calc(-2px * var(--t)) 0 0 #eae3cf,
      0 calc(-2.8px * var(--t)) 0 0 #231c14,
      0 calc(-3.8px * var(--t)) 0 0 #dfd6bf,
      0 calc(-4.6px * var(--t)) 0 0 #1c160f,
      0 calc(-5.6px * var(--t)) 0 0 #e6dfcb,
      0 calc(-6.4px * var(--t)) 0 0 #231c14,
      0 calc(-7.4px * var(--t)) 0 0 #d9cfb5,
      0 calc(-8.2px * var(--t)) 0 0 #1c160f,
      0 calc(-9.2px * var(--t)) 0 0 #e2dac4,
      0 calc(-10px * var(--t)) 0 0 #231c14,
      0 calc(-11px * var(--t)) 0 0 #cfc3a5,
      0 calc(-11.8px * var(--t)) 0 0 #16110a,
      0 calc(-12.8px * var(--t)) 0 0 #bfae8b,
      0 calc(-15px * var(--t)) 6px 0 rgba(0, 0, 0, .65);
  }

  .opp-lane .lane-badge {
    transform: rotate(180deg);
  }

  .opp-lane.active {
    border-style: solid;
    border-color: var(--gold);
    box-shadow: inset 0 0 12px rgba(227, 178, 60, .25), 0 0 14px rgba(227, 178, 60, .55);
  }

  .opp-lane.empty {
    opacity: .55;
  }

  .zone-label {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--dirt);
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }

  .opponent-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #274a33, #16261b);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--line);
    flex: none;
    overflow: hidden;
  }

  .opponent-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
  }

  .opponent-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
  }

  .opponent-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--rail);
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .opponent-sub {
    font-size: 8px;
    color: var(--rail-dim);
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .opponent-bubble {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) scale(.92);
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    white-space: nowrap;
    z-index: 25;
  }

  .opponent-bubble.show {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .opponent-bubble::after {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 6px 5px 0;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
  }

  .zone-body {
    width: 64%;
    aspect-ratio: 5/7;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.5px solid rgba(227, 178, 60, .65);
    box-shadow: inset 0 0 14px rgba(227, 178, 60, .20), 0 0 10px rgba(227, 178, 60, .25);
    background: radial-gradient(120% 140% at 50% 0%, rgba(227, 178, 60, .18), transparent 65%), rgba(16, 24, 40, .65);
  }

  #zone-opp-farm .farm-pile {
    width: 70%;
    aspect-ratio: 5/7;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 140, 150, .6);
    box-shadow: inset 0 0 16px rgba(255, 100, 120, .22), 0 0 12px rgba(255, 80, 100, .28);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(255, 100, 120, .18), transparent 65%),
      rgba(30, 14, 26, .75);
  }

  .ov-deck.tappable {
    border-radius: 10px;
  }

  .lanes {
    width: 74%;
    margin: 0 auto;
    display: flex;
    gap: 1.8%;
    align-items: stretch;
    justify-content: space-between;
  }

  .lane {
    position: relative;
    flex: 1;
    min-width: 0;
    aspect-ratio: 5/7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 9px;
    border: 1.5px solid rgba(227, 178, 60, .65);
    box-shadow: inset 0 0 14px rgba(227, 178, 60, .20), 0 0 10px rgba(227, 178, 60, .25);
    background: radial-gradient(120% 140% at 50% 0%, rgba(227, 178, 60, .18), transparent 65%), rgba(16, 24, 40, .65);
    transition: border-color .2s, box-shadow .2s, opacity .2s;
  }

  .lane.active {
    border-style: solid;
    border-color: var(--gold);
    box-shadow:
      inset 0 0 12px rgba(227, 178, 60, .25),
      0 0 14px rgba(227, 178, 60, .55);
  }

  .lane.empty {
    opacity: .55;
  }

  .lane-stack {
    position: relative;
    width: 84%;
    aspect-ratio: 5/7;
  }

  .lane-card-back {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    border: 1.5px solid #d7b25a;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
  }

  .lane-back-2 {
    --t: var(--stack-t, 1);
    transform: translateY(0);
    z-index: 1;
    opacity: calc(.8 + .2*var(--t));
    transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;
    /* 山札の断面の厚み：スケッチのように整然とカードが重なり、下方向へ水平ラインの厚みが出るよう調整 */
    box-shadow:
      0 2px 4px rgba(0, 0, 0, .45),
      0 calc(1px*var(--t)) 0 0 #1c160f,
      0 calc(2px*var(--t)) 0 0 #eae3cf,
      0 calc(2.8px*var(--t)) 0 0 #231c14,
      0 calc(3.8px*var(--t)) 0 0 #dfd6bf,
      0 calc(4.6px*var(--t)) 0 0 #1c160f,
      0 calc(5.6px*var(--t)) 0 0 #e6dfcb,
      0 calc(6.4px*var(--t)) 0 0 #231c14,
      0 calc(7.4px*var(--t)) 0 0 #d9cfb5,
      0 calc(8.2px*var(--t)) 0 0 #1c160f,
      0 calc(9.2px*var(--t)) 0 0 #e2dac4,
      0 calc(10px*var(--t)) 0 0 #231c14,
      0 calc(11px*var(--t)) 0 0 #cfc3a5,
      0 calc(11.8px*var(--t)) 0 0 #16110a,
      0 calc(12.8px*var(--t)) 0 0 #bfae8b,
      0 calc(15px*var(--t)) 6px 0 rgba(0, 0, 0, .65);
  }

  .lane-back-1 {
    --t: var(--stack-t, 1);
    transform: translateY(calc(-2px*var(--t)));
    z-index: 2;
    opacity: calc(.82 + .18*var(--t));
    transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, .35), 0 calc(1px*var(--t)) 0 0 rgba(220, 205, 175, 0.7);
  }

  .lane-back-0 {
    --t: var(--stack-t, 1);
    transform: translateY(calc(-4.5px*var(--t)));
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    transition: transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 calc(1px*var(--t)) 0 0 rgba(235, 225, 200, 0.85);
  }

  .lane[data-lane="nige"] .lane-back-0 {
    border-color: #7ea3d9;
  }

  .lane[data-lane="senko"] .lane-back-0 {
    border-color: #e08fa0;
  }

  .lane[data-lane="sashi"] .lane-back-0 {
    border-color: #7fd396;
  }

  .lane[data-lane="oikomi"] .lane-back-0 {
    border-color: #e3b23c;
  }

  .lane-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    font-size: 11px;
    min-width: 18px;
    text-align: center;
    padding: 1px 4px;
    border-radius: 8px;
    border: 2px solid var(--ink);
  }

  .lane-label {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.2;
    padding: 1.5px 7px;
    border-radius: 999px;
    background: rgba(8, 14, 24, .92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(227, 178, 60, .65);
    color: #e8dcc4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .8), 0 0 4px rgba(0, 0, 0, .4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  /* 相手側山札のラベル（デッキの反対側／枠上端に配置） */
  .opp-lane .lane-label {
    top: -9px;
    bottom: auto;
  }

  /* 脚質ごとの枠色・文字色アクセント */
  .lane[data-lane="nige"] .lane-label,
  .opp-lane[data-lane="nige"] .lane-label {
    color: #aed0ff;
    border-color: rgba(126, 163, 217, .85);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .75), 0 0 6px rgba(126, 163, 217, .25);
  }

  .lane[data-lane="senko"] .lane-label,
  .opp-lane[data-lane="senko"] .lane-label {
    color: #ffb8c7;
    border-color: rgba(224, 143, 160, .85);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .75), 0 0 6px rgba(224, 143, 160, .25);
  }

  .lane[data-lane="sashi"] .lane-label,
  .opp-lane[data-lane="sashi"] .lane-label {
    color: #aeffc5;
    border-color: rgba(127, 211, 150, .85);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .75), 0 0 6px rgba(127, 211, 150, .25);
  }

  .lane[data-lane="oikomi"] .lane-label,
  .opp-lane[data-lane="oikomi"] .lane-label {
    color: #ffe082;
    border-color: rgba(227, 178, 60, .85);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .75), 0 0 6px rgba(227, 178, 60, .25);
  }

  /* 現在引く対象のアクティブ山札を強調 */
  .lane.active .lane-label,
  .opp-lane.active .lane-label {
    background: rgba(16, 24, 40, .98);
    font-weight: 900;
    border-width: 1.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .85), 0 0 10px rgba(227, 178, 60, .65);
    transform: translateX(-50%) scale(1.06);
  }

  .deck-card {
    width: 64px;
    height: 90px;
    border-radius: 6px;
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    border: 1.5px solid #d7b25a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 8px rgba(227, 178, 60, .3);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.field-cyber .deck-card,
  body[data-theme="cyber"] .deck-card {
    border-color: var(--cyber-cyan);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 12px rgba(62, 224, 255, .5);
  }

  .mini-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .mini-card {
    width: 88%;
    aspect-ratio: 5/7;
    border-radius: 6px;
    background: linear-gradient(165deg, #f6d27a, var(--gold) 55%, #a9791c);
    border: 2px solid #8a611a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
    font-size: clamp(11px, 3.2vw, 17px);
  }

  .mini-card.mini-card-img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
  }

  .mini-label {
    font-family: 'Oswald', sans-serif;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--rail);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9);
  }

  .field-body {
    position: relative;
    z-index: 10;
    width: 44%;
    aspect-ratio: 5/7;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 11px;
    border: 1.5px solid rgba(227, 178, 60, .65);
    box-shadow: inset 0 0 15px rgba(227, 178, 60, .20), 0 0 11px rgba(227, 178, 60, .25);
    background: radial-gradient(120% 140% at 50% 0%, rgba(227, 178, 60, .18), transparent 65%), rgba(16, 24, 40, .65);
    /* フィールドと相手側の位置を均等に配置（相手の山札〜相手馬、自分山札〜自分馬の距離を対称に揃える） */
    transform: translateY(47%) translateX(-55%) translateY(var(--field-extra-shift, 0px));
  }

  /* 相手の馬カード置き場：自分のフィールド枠（.field-body）と同じ大きさで、
     行の外側（上のすき間）に対称に配置する。相手ファームと同様に赤い枠と赤背景に設定 */
  .field-body-opp {
    position: absolute;
    width: 44%;
    aspect-ratio: 5/7;
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translateY(-47%) translateX(9%) translateY(var(--field-opp-extra-shift, 0px));
    z-index: 12;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 140, 150, .6);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(255, 100, 120, .18), transparent 65%),
      rgba(30, 14, 26, .75);
    box-shadow: inset 0 0 16px rgba(255, 100, 120, .22), 0 0 12px rgba(255, 80, 100, .28);
  }

  .field-placeholder-opp {
    font-size: 8px;
  }

  /* 相手の馬カード置き場のカードは対戦相手視点に合わせて上下逆（180度回転）で表示 */
  .field-body-opp .field-mini {
    transform: rotate(180deg);
  }

  .field-mini-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .field-mini {
    position: relative;
    height: 96%;
    width: auto;
    aspect-ratio: 5/7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .55);
    border: 1.5px solid rgba(0, 0, 0, .35);
    padding: 2px;
    overflow: hidden;
  }

  .field-mini.type-horse {
    background: linear-gradient(165deg, #dcefe2, #8fc7a0 55%, #3f8a56);
  }

  .field-mini.field-mini-img {
    background-size: cover;
    background-position: center;
    padding: 0;
  }

  .field-mini .fm-icon {
    font-size: clamp(16px, 4.8vw, 28px);
    line-height: 1;
  }

  .field-mini .fm-name {
    font-size: 7.5px;
    font-weight: 700;
    text-align: center;
    color: #141414;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 走破選択時に自分の場の馬が選択可能な場合のハイライト */
  .field-mini.is-field-selectable,
  #field-body.selectable-horse .field-mini {
    cursor: pointer;
    border: 2px solid #00f0ff !important;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.45), 0 0 20px rgba(0, 240, 255, 0.8), 0 6px 16px rgba(0, 0, 0, 0.6) !important;
    animation: fieldHorsePulse 1.3s ease-in-out infinite alternate;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

  .field-mini.is-field-selectable:hover,
  #field-body.selectable-horse .field-mini:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.7), 0 0 26px rgba(0, 240, 255, 0.95), 0 8px 22px rgba(0, 0, 0, 0.7) !important;
    filter: brightness(1.12);
  }

  .field-mini.is-field-selectable:active,
  #field-body.selectable-horse .field-mini:active {
    transform: scale(0.98);
    filter: brightness(1.2);
  }

  #field-body.selectable-horse {
    overflow: visible !important;
  }

  /* 「タップで続けて走破」フローティングバッジ（カード中央に美しく収まり枠外見切れを防止） */
  .field-reuse-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    background: linear-gradient(180deg, rgba(14, 23, 42, 0.96) 0%, rgba(6, 11, 22, 0.98) 100%);
    color: #ffffff;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: clamp(10px, 2.7vw, 11.5px);
    font-weight: 900;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1.5px solid #ffd859;
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.85),
      0 0 16px rgba(251, 191, 36, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    white-space: nowrap !important;
    pointer-events: none;
    animation: reuseBadgePulse 1.4s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    gap: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    max-width: none !important;
  }

  .field-reuse-badge .img-icon-inline {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
  }

  @keyframes fieldHorsePulse {
    0% {
      box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.35), 0 0 12px rgba(0, 240, 255, 0.55);
    }
    100% {
      box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.65), 0 0 22px rgba(0, 240, 255, 0.95);
    }
  }

  @keyframes reuseBadgePulse {
    0% {
      transform: translate(-50%, -50%) scale(0.96);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 12px rgba(251, 191, 36, 0.45);
    }
    100% {
      transform: translate(-50%, -50%) scale(1.05);
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.9), 0 0 20px rgba(251, 191, 36, 0.85);
    }
  }

  .stat-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 4;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 70%);
    border: 2px solid #fff8e6;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 800;
    font-size: 10px;
    color: #3a2a05;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    line-height: 1;
  }

  .stat-badge-run {
    background: radial-gradient(circle at 35% 30%, #ff9db4, #c9316a 70%);
    color: #fff;
    border-color: #ffd6e0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }

  .stat-badge-guard {
    left: auto;
    right: -8px;
    background: radial-gradient(circle at 35% 30%, #a7e6ba, #2f7043 70%);
    color: #fff;
    border-color: #dcffe6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }

  /* 相手がガード時に使った馬カードは field-body-opp（相手の馬カード置き場）にそのまま表示し、
     このタグでそれが「ガード」であることを示す（自分のフィールドとは重ねない） */
  .field-opp-tag {
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 7;
    background: linear-gradient(165deg, #ff8a8a, #c62f3f 70%);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 800;
    font-size: 8px;
    letter-spacing: .03em;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    white-space: nowrap;
    animation: guardTagPop .3s cubic-bezier(.34, 1.56, .64, 1) both;
  }

  @keyframes guardTagPop {
    0% {
      opacity: 0;
      transform: scale(.5);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .field-placeholder {
    font-size: 9px;
    color: rgba(244, 240, 230, .0);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .farm-pile {
    position: relative;
    width: 70%;
    aspect-ratio: 5/7;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    border: 1.5px solid rgba(227, 178, 60, .65);
    box-shadow: inset 0 0 14px rgba(227, 178, 60, .20), 0 0 10px rgba(227, 178, 60, .25);
    background: radial-gradient(120% 140% at 50% 0%, rgba(227, 178, 60, .18), transparent 65%), rgba(16, 24, 40, .65);
  }

  .farm-stack {
    position: relative;
    width: 94%;
    aspect-ratio: 5/7;
  }

  .farm-mini {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(0, 0, 0, .35);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
    font-size: clamp(13px, 3.8vw, 19px);
  }

  .farm-mini.type-force {
    background: linear-gradient(165deg, #f6d27a, #e3b23c 60%, #a9791c);
  }

  .farm-mini.type-horse {
    background: linear-gradient(165deg, #9fe0ad, #3f8a56 60%, #245c34);
  }

  .farm-mini.type-item {
    background: linear-gradient(165deg, #e3c290, #b98a4e 60%, #7b5a2c);
  }

  .farm-mini.type-situation {
    background: linear-gradient(165deg, #9fb0d6, #5b6b93 60%, #38455e);
  }

  .farm-mini.farm-mini-img {
    background-size: cover;
    background-position: center;
  }

  .farm-back-1 {
    transform: translate(2px, 2px) rotate(1deg);
    z-index: 1;
    opacity: .85;
  }

  .farm-back-0 {
    z-index: 2;
  }

  /* 相手ファームのカードは対戦相手視点に合わせて上下逆（180度回転）で表示 */
  .farm-pile-opp .farm-mini,
  #zone-opp-farm .farm-mini {
    transform: rotate(180deg);
  }

  .farm-pile-opp .farm-back-1,
  #zone-opp-farm .farm-back-1 {
    transform: translate(2px, 2px) rotate(181deg);
    z-index: 1;
    opacity: .85;
  }

  .farm-pile-opp .farm-back-0,
  #zone-opp-farm .farm-back-0 {
    transform: rotate(180deg);
    z-index: 2;
  }

  /* 相手が手札からプレイ・ファームに送るアニメーションカードの上下逆設定 */
  .ghost-cpu-card,
  .card.ghost-cpu-card {
    transform: rotate(180deg) !important;
  }

  .farm-badge {
    display: none;
    /* フィールド上のファーム枚数バッジは非表示にする */
    position: absolute;
    left: 4px;
    top: 4px;
    z-index: 6;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    font-size: 10px;
    min-width: 16px;
    text-align: center;
    padding: 1px 4px;
    border-radius: 8px;
    border: 1.5px solid var(--ink);
  }

  .hand-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    min-width: 0;
    padding-bottom: 2px;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
    transform-origin: 50% 100%;
  }

  body.field-3d .hand-zone {
    transform: perspective(800px) rotateX(-7deg) scale(1.05);
  }

  .hand-zone .zone-label {
    padding-left: 2px;
  }

  .hand-nav-btn {
    display: none;
    position: absolute;
    top: calc(50% + 4px);
    transform: translateY(-50%);
    z-index: 500;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(14, 25, 42, 0.92);
    border: 1.5px solid rgba(227, 178, 60, 0.85);
    color: var(--gold-2);
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 10px rgba(227, 178, 60, 0.35);
    transition: transform 0.15s, opacity 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    padding: 0;
    user-select: none;
    touch-action: manipulation;
  }

  /* デスクトップで手札が8枚以上のときに矢印を表示 */
  .hand-zone.has-many-cards .hand-nav-btn,
  .hand-zone:has(.card:nth-child(8)) .hand-nav-btn {
    display: flex;
  }

  .hand-nav-btn.nav-disabled {
    opacity: 0.30;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    border-color: rgba(227, 178, 60, 0.3);
  }

  .hand-nav-btn:hover {
    background: rgba(24, 42, 72, 0.98);
    border-color: #ffd875;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85), 0 0 16px rgba(227, 178, 60, 0.6);
    transform: translateY(-50%) scale(1.08);
  }

  .hand-nav-btn:active {
    transform: translateY(-50%) scale(0.92);
  }

  .hand-nav-btn.hand-prev {
    left: 4px;
  }

  .hand-nav-btn.hand-next {
    right: 4px;
  }

  .hand-row {
    flex: 1;
    position: relative;
    z-index: 10;
    min-width: 0;
    height: 166px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0 4px 6px;
    -webkit-overflow-scrolling: touch;
  }

  /* 手札が8枚以上のときは横スクロール可能にし、左右端のカード操作スペースを確保 */
  .hand-zone.has-many-cards .hand-row,
  .hand-zone:has(.card:nth-child(8)) .hand-row {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 40px 6px;
    scrollbar-width: thin;
  }

  .hand-row::-webkit-scrollbar {
    height: 4px;
  }

  .hand-row::-webkit-scrollbar-thumb {
    background: rgba(244, 240, 230, .2);
    border-radius: 4px;
  }

  /* 小さい・中くらいの画面ではフィールドが先に高さを使い、手札が画面下で切れてしまう。
     手札を常に画面下に固定し、ゲーム盤側はそのぶんだけスクロール可能にする。
     デスクトップ幅（860px以上）はこれまで通り通常のレイアウトのまま。 */
  @media (max-width:859px) {
    .board {
      padding-bottom: 24px;
      gap: 4px;
      transition: padding-bottom .35s cubic-bezier(.2, .7, .3, 1);
    }

    body.has-hand-cards .board,
    body:has(.hand-zone.has-cards) .board,
    body.manual-mode .board {
      padding-bottom: 155px;
    }

    /* opponent-strip と盤面の間に適切な余白を確保（相手山札との重なり防止） */
    .opponent-strip {
      margin-bottom: 2px;
      padding: 2.5px 8px 2.5px 3px;
      z-index: 15;
    }

    /* フィールドのグリッド行間をモバイルで広げて縦スペースを有効活用し、
       相手デッキ〜自分デッキの距離を広げて上下の大きな空きを解消する */
    .field-image-wrap {
      gap: clamp(75px, 22vw, 115px) clamp(4px, 2vw, 12px);
      padding-top: 1.5vw;
      padding-bottom: 2.5vw;
    }

    /* 3Dモード時のfield-tiltの引き上げ量・余白をモバイルで角度に応じて動的に適用（相手バー＆手札との隙間を完全解消） */
    body.field-3d .field-tilt {
      margin-top: var(--field-tilt-shift-y, -75px);
      margin-bottom: var(--field-tilt-margin-bottom, 4px);
      transition: margin-top .45s cubic-bezier(.2, .7, .3, 1), margin-bottom .45s cubic-bezier(.2, .7, .3, 1);
    }

    /* ナレーター：手札枠に隠れないようz-indexを50にし、コンパクトなサイズで表示 */
    .narrator {
      position: relative;
      z-index: 50;
      width: 96%;
      max-width: 520px;
      margin: 0px auto 4px;
      gap: 8px;
    }

    /* 3D傾き時はナレーターもモバイルで角度に応じて動的に引き上げる */
    body.field-3d .narrator {
      margin-top: var(--narrator-margin-top, 0px);
      margin-bottom: var(--narrator-margin-bottom, 4px);
    }

    .narrator-portrait {
      flex: none;
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }

    .narrator-bubble {
      min-height: 40px;
      padding: 6px 14px 6px 14px;
      border-radius: 20px;
      gap: 3px;
    }

    .narrator-text {
      font-size: 11.5px;
      line-height: 1.4;
    }

    .narrator-tap-hint {
      font-size: 9.5px;
      margin-top: 0px;
    }

    /* 手札ゾーン：囲う枠（ボーダー、暗い背景、影、ラベル）をすべて完全に撤廃 */
    .hand-zone {
      position: fixed;
      left: 0;
      right: 0;
      bottom: calc(4px + env(safe-area-inset-bottom, 0px));
      z-index: 40;
      height: 145px;
      min-height: 0;
      padding: 0 4px;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      pointer-events: none;
      transition: bottom .35s cubic-bezier(.2, .7, .3, 1), transform .35s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
    }

    /* 手札ラベルの完全非表示 */
    .hand-zone .zone-label {
      display: none !important;
    }

    /* 手札カードが存在しない時（初期状態など）は完全非表示で画面を遮らない */
    .hand-zone:not(.has-cards) {
      display: none !important;
    }

    .hand-zone .card,
    .hand-zone .hand-nav-btn {
      pointer-events: auto;
    }

    /* manual-modeの時はナレーターが無いぶん手札を自然に引き上げてデッキとの間隔を詰める */
    body.manual-mode .hand-zone {
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .hand-row {
      flex: none;
      height: 140px;
      padding: 0 2px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .hand-row::-webkit-scrollbar {
      display: none;
    }

    .hand-nav-btn {
      display: none;
    }

    /* 手札が配られてカードが存在するときのみモバイルで矢印を表示 */
    .hand-zone.has-cards .hand-nav-btn,
    .hand-zone:has(.card) .hand-nav-btn {
      display: flex;
    }

    /* 3Dモード時の手札位置を角度に応じて動的に引き上げてデッキとの隙間を防止 */
    body.field-3d .hand-zone {
      transform: translateY(var(--hand-shift-y, 0px));
    }

    /* モバイル用トップバー：ブランド非表示・トラックバーと設定ボタンをすっきり1行配置 */
    .topbar {
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      padding: 6px 10px calc(4px + env(safe-area-inset-top, 0px));
      padding-top: calc(6px + env(safe-area-inset-top, 0px));
    }

    .topbar .brand {
      display: none;
    }

    .track-wrap {
      order: unset;
      flex: 1;
      min-width: 0;
    }

    .topbar-menu {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: nowrap;
      width: auto;
      overflow: visible;
      flex: none;
    }

    .full-label {
      display: inline;
    }

    .short-label {
      display: none;
    }

    .settings-gear {
      padding: 4px 10px;
      font-size: 11px;
      flex-shrink: 0;
    }

  }

  /* 640〜859px幅は .board 自体が max-width:720px で中央寄せになるため、
     固定表示の手札もその幅に合わせて中央寄せにする（画面いっぱいに広がらないように） */
  @media (min-width:640px) and (max-width:859px) {
    .hand-zone {
      max-width: 720px;
      margin: 0 auto;
    }
  }

  /* スモールモバイル（480px以下） */
  @media (max-width:480px) {
    .board {
      padding-bottom: 16px;
    }

    body.has-hand-cards .board,
    body:has(.hand-zone.has-cards) .board,
    body.manual-mode .board {
      padding-bottom: 145px;
    }

    .narrator-portrait {
      width: 44px;
      height: 44px;
    }

    .narrator-bubble {
      min-height: 38px;
      padding: 5px 12px 5px 12px;
    }

    .narrator-text {
      font-size: 11px;
      line-height: 1.35;
    }

    .hand-zone {
      height: 140px;
      min-height: 0;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .hand-row {
      height: 136px;
    }
  }

  /* ---------- Cards (real FoTH layout) ---------- */
  .card {
    --fan-x: 0px;
    --fan-y: 0px;
    --fan-rot: 0deg;
    --fan-lift: 0px;
    --fan-scale: 1;
    flex: none;
    /* 配布している実カード画像と同じ 5:7 比率に統一する。 */
    width: 116px;
    height: 162px;
    border-radius: 11px;
    padding: 6px 6px 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* border-image は立体変形時に面と枠が別々に描画されることがあるため、
       同じボックスに追従する通常の枠線へ置き換える。 */
    border: 2px solid #e3b23c;
    box-sizing: border-box;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
    position: absolute;
    left: 50%;
    bottom: 0;
    color: var(--ink);
    background: linear-gradient(165deg, #ffffff, #eef1f3 55%, #e2e7ea);
    transition: transform .15s ease, box-shadow .2s ease, left .2s ease;
    transform-origin: 50% 460px;
    transform: translateX(-50%) translateX(var(--fan-x)) translateY(var(--fan-y)) translateY(var(--fan-lift)) rotate(var(--fan-rot)) scale(var(--fan-scale)) rotateX(var(--holo-rx)) rotateY(var(--holo-ry));
    user-select: none;
  }

  /* モバイル（480px以下）では手札枠(150px)に合わせてカードを82*115pxに調整し、上部が絶対に切れないよう余裕を確保 */
  @media (max-width:480px) {
    .card {
      width: 82px;
      height: 115px;
    }
  }

  /* 中くらいのモバイル（481px-760px） */
  @media (min-width:481px) and (max-width:760px) {
    .hand-zone {
      height: 170px;
      min-height: 170px;
    }

    .hand-row {
      height: 146px;
    }

    .card {
      width: 95px;
      height: 133px;
    }
  }

  @media (min-width:760px) {
    .hand-row {
      height: 190px;
    }

    .card {
      width: 124px;
      height: 174px;
    }
  }

  /* holographic pointer-tracked shine (own implementation, general technique) */
  .card {
    --holo-x: 50%;
    --holo-y: 50%;
    --holo-op: 0;
    --holo-rx: 0deg;
    --holo-ry: 0deg;
  }

  .card-shine {
    position: absolute;
    inset: 0;
    border-radius: 9px;
    pointer-events: none;
    z-index: 6;
    mix-blend-mode: color-dodge;
    opacity: var(--holo-op);
    background:
      radial-gradient(circle at var(--holo-x) var(--holo-y),
        rgba(255, 255, 255, .85) 0%, rgba(255, 225, 150, .35) 22%, transparent 55%),
      linear-gradient(115deg,
        transparent 20%, rgba(160, 220, 255, .55) 36%, rgba(255, 180, 230, .55) 44%,
        rgba(255, 240, 150, .55) 52%, transparent 68%);
    background-size: 180% 180%, 250% 250%;
    background-position: var(--holo-x) var(--holo-y), var(--holo-x) var(--holo-y);
    transition: opacity .25s ease;
  }

  .card.holo-active {
    transition: transform .05s linear, box-shadow .2s ease;
  }

  /* real card photo (test assets) — fills the whole card face */
  .card.card-real-art {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    border-width: 2px;
  }

  /* fan hover raises card above its siblings and neutralizes fan rotation */
  .card.selectable:hover,
  .card.selected,
  .card.highlighted {
    z-index: 50;
  }

  /* ---- ガード選択時のガード値フローティングバッジ ---- */
  .card-guard-floating-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 229, 255, 0.6);
    animation: guardBadgePulse 1.4s ease-in-out infinite alternate;
  }

  .card-guard-floating-badge.is-valid {
    background: linear-gradient(135deg, #0284c7 0%, #034f75 100%);
    border: 2px solid #00f0ff;
    color: #ffffff;
  }

  .card-guard-floating-badge.is-valid .guard-lbl {
    font-size: 10.5px;
    color: #e0f2fe;
    font-weight: 700;
  }

  .card-guard-floating-badge.is-valid .guard-val {
    font-size: 16px;
    color: #00f0ff;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.85);
    margin-left: 2px;
  }

  .card-guard-floating-badge.is-valid .guard-dist-ok {
    font-size: 9.5px;
    color: #38bdf8;
    background: rgba(0, 0, 0, 0.45);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 3px;
  }

  .card-guard-floating-badge.is-invalid {
    background: rgba(30, 41, 59, 0.95);
    border: 1.5px solid #ef4444;
    color: #fca5a5;
    font-size: 11px;
    opacity: 0.85;
  }

  .card-guard-floating-badge.is-invalid .guard-lbl {
    font-size: 10px;
    color: #f87171;
  }

  .card-guard-floating-badge.is-invalid .guard-val {
    font-size: 13px;
    color: #ef4444;
    font-weight: 800;
    margin-left: 2px;
  }

  .card-guard-floating-badge .guard-dist-warn {
    font-size: 9.5px;
    color: #fca5a5;
    background: rgba(185, 28, 28, 0.5);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 3px;
  }

  @keyframes guardBadgePulse {
    0% {
      transform: translateX(-50%) scale(1);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 229, 255, 0.4);
    }
    100% {
      transform: translateX(-50%) scale(1.08);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.95), 0 0 22px rgba(0, 229, 255, 0.9);
    }
  }

  /* ガード選択時にガード適性のある全ての馬カードを浮き上がらせて強調 */
  body.guard-selecting .card.selectable {
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.95), 0 0 0 2.5px #00f0ff !important;
    --fan-lift: -24px !important;
    --fan-scale: 1.1 !important;
    z-index: 55 !important;
    opacity: 1 !important;
    cursor: pointer !important;
  }

  @media (max-width:859px) {
    body.guard-selecting .card.selectable {
      --fan-lift: -6px !important;
      --fan-scale: 1.05 !important;
    }
  }

  body.guard-selecting .card.disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
  }

  /* ---------- Desktop: use the exact same mobile layout, just centered ----------
     Previously this breakpoint switched to a 2-column grid rearrangement
     (opponent/field/hand/cmd areas), which made desktop look different from
     mobile. Now desktop simply centers the same stacked mobile layout inside
     a max-width frame, like a phone screen on a wider viewport. */
  @media (min-width:860px) {
    .board {
      max-width: 900px;
      margin: 0 auto;
      padding-top: 8px;
      padding-bottom: 50px;
      gap: 16px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* デスクトップ：フィールドが重なっても opponent-strip が上に来るよう z-index を設定 */
    .opponent-strip {
      padding: 3px 10px 3px 3px;
      margin-bottom: 0;
      position: relative;
      z-index: 15;
    }

    /* デスクトップ: max-width固定なのでgapも固定pxに切り替えてビューポート変動の影響をゼロにする */
    .field-image-wrap {
      gap: 30px 8px;
    }

    /* 3D傾き（0°〜60°全域）およびズーム倍率に応じてフィールド余白を動的に詰める */
    body.field-3d .field-tilt {
      margin-top: var(--field-tilt-shift-y, -285px);
      margin-bottom: var(--field-tilt-margin-bottom, 0px);
      transition: margin-top .45s cubic-bezier(.2, .7, .3, 1), margin-bottom .45s cubic-bezier(.2, .7, .3, 1);
    }

    /* ナレーターは手札とデッキの間に固定配置（デッキのすぐ下に間隔を詰めて配置、角度に応じて動的引き上げ） */
    .narrator {
      position: relative;
      width: 90%;
      max-width: 660px;
      margin: -10px auto 14px;
      z-index: 30;
      transition: margin .45s cubic-bezier(.2, .7, .3, 1), transform .45s cubic-bezier(.2, .7, .3, 1);
    }

    body.field-3d .narrator {
      margin-top: var(--narrator-margin-top, -24px);
      margin-bottom: var(--narrator-margin-bottom, 8px);
    }

    /* 手札ゾーン（ナレーターの下に自然に配置、角度に応じて動的引き上げ） */
    .hand-zone {
      margin-top: 6px;
      min-height: 210px;
      padding-top: 0;
      transition: transform .45s cubic-bezier(.2, .7, .3, 1), margin-top .45s cubic-bezier(.2, .7, .3, 1);
    }

    /* manual-modeの時はナレーターのスペースを詰める */
    body.manual-mode .hand-zone {
      margin-top: calc(var(--hand-margin-top, 6px) - 22px);
    }

    .hand-row {
      height: 200px;
    }

    body.field-3d .hand-zone {
      transform: perspective(1000px) rotateX(-2deg) scale(var(--hand-tilt-scale, 1.01)) translateY(var(--hand-shift-y, 0px));
      transform-origin: 50% 100%;
      margin-top: var(--hand-margin-top, 6px);
      transition: transform .45s cubic-bezier(.2, .7, .3, 1), margin-top .45s cubic-bezier(.2, .7, .3, 1);
    }



    .narrator-bubble {
      padding: 12px 36px 12px 28px;
    }

    .narrator-text {
      font-size: 14.5px;
      line-height: 1.55;
    }

    .narrator-portrait {
      width: 52px;
      height: 52px;
    }

    .cmd-fab {
      width: 60px;
      height: 60px;
      font-size: 26px;
    }

    .cmd-menu-btn {
      padding: 12px 22px;
      font-size: 13px;
    }

    /* フィールドの広々とした余白・カードサイズを維持 */
    .field-image-wrap {
      padding-top: 6px;
      padding-bottom: 12px;
      gap: 155px 16px;
    }

    /* 手札・盤面まわりのカードも大きく、読みやすく */
    .card {
      width: 132px;
      height: 185px;
    }

    .lane-label {
      font-size: 12px;
      padding: 2px 8px;
      top: -10px;
    }

    .opp-lane .lane-label {
      top: -10px;
      bottom: auto;
    }

    /* トップバー・各種操作ボタン */
    .topbar {
      gap: 14px;
      padding: 9px 18px calc(6px + env(safe-area-inset-top, 0px));
    }

    .brand {
      font-size: 16px;
    }

    .brand span {
      font-size: 11px;
    }

    .race-info {
      font-size: 11px;
      padding: 5px 10px;
    }

    .bgm-toggle,
    .perspective-toggle,
    .frame-toggle,
    .restart-btn,
    .settings-gear,
    .tilt-opt {
      font-size: 12px;
      padding: 6px 12px;
    }

    .settings-gear {
      padding: 6px 10px;
    }

    .zone-label {
      font-size: 11px;
    }

    .ov-deck.tappable:hover {
      box-shadow: 0 0 0 3px rgba(227, 178, 60, .4), 0 0 20px rgba(227, 178, 60, .5);
      cursor: pointer;
    }
  }

  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 16px;
  }

  .card-type-tag {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #8a8f95;
    text-transform: uppercase;
  }

  .head-right {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .cost-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: none;
    background: radial-gradient(circle at 32% 28%, #fbe6a8, var(--gold) 62%, #a9791c);
    border: 1.5px solid #8a611a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 2px rgba(227, 178, 60, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 8.5px;
    color: #3c2a08;
    position: relative;
  }

  .cost-badge::before {
    content: '★';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5px;
    color: var(--gold-2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  }

  .turf-badge {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    transform: rotate(45deg);
    background: linear-gradient(160deg, #9fe0ad, #3f8a56);
    border: 1px solid #2c5e3c;
    flex: none;
  }

  .card-name {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin-top: 2px;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-art {
    flex: 1;
    min-height: 0;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, .15);
  }

  .card.type-horse .card-art {
    background: linear-gradient(165deg, #dcefe2, #8fc7a0 55%, #3f8a56);
  }

  .card.type-force .card-art {
    background: linear-gradient(165deg, #e7dbf7, #b79ce0 55%, #6a4aa0);
  }

  .card.type-item .card-art {
    background: linear-gradient(165deg, #f0e0c4, #d3ac72 55%, #8a6530);
  }

  .card.type-jockey .card-art {
    background: linear-gradient(165deg, #d8ecf5, #79b5ce 55%, #356f8a);
  }

  .card.type-situation .card-art {
    background: linear-gradient(165deg, #d7e0f3, #8fa3d6 55%, #465a8f);
  }

  .art-icon {
    font-size: 27px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  }

  .art-en {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    font-family: 'Oswald', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 7.5px;
    letter-spacing: .02em;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    padding: 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-micro {
    font-size: 6.6px;
    color: #555;
    text-align: center;
    letter-spacing: .02em;
    margin-top: 2px;
  }

  .card-fav {
    font-size: 6.2px;
    color: #777;
    text-align: center;
  }

  .apt-block {
    margin-top: 2px;
  }

  .apt-label {
    font-size: 4.8px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #8a8f95;
    text-align: center;
    text-transform: uppercase;
  }

  .apt-row {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: 1px;
  }

  .apt-chip {
    font-size: 5.6px;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .08);
    color: #9a9a9a;
    line-height: 1.3;
  }

  .apt-chip.active {
    background: radial-gradient(circle at 35% 30%, #fbe6a8, var(--gold) 75%);
    color: #3c2a08;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }

  .style-chip.active.nige {
    background: radial-gradient(circle at 35% 30%, #c3dcff, #7ea3d9 75%);
    color: #0d2748;
  }

  .style-chip.active.senko {
    background: radial-gradient(circle at 35% 30%, #ffd9e2, #e08fa0 75%);
    color: #4a0f21;
  }

  .style-chip.active.sashi {
    background: radial-gradient(circle at 35% 30%, #c8f5d6, #7fd396 75%);
    color: #0f3d1e;
  }

  .style-chip.active.oikomi {
    background: radial-gradient(circle at 35% 30%, #fbe6a8, #e3b23c 75%);
    color: #3c2a08;
  }

  .card-stats {
    display: flex;
    gap: 3px;
    margin-top: 2px;
  }

  .pill {
    flex: 1;
    text-align: center;
    border-radius: 6px;
    padding: 2px 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 9.5px;
    color: #fff;
  }

  .pill.run {
    background: linear-gradient(160deg, #ef6f9a, #c9316a);
  }

  .pill.guard {
    background: linear-gradient(160deg, #7fd396, #2f7043);
  }

  .card-effect {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(6, 11, 22, 0.98) 100%);
    border: 1px solid rgba(245, 208, 100, 0.55);
    border-radius: 6px;
    padding: 4px 6px;
    margin-top: 2px;
    color: #f8fafc;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 7.2px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.025em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 5px rgba(0, 0, 0, 0.65);
    position: relative;
    box-sizing: border-box;
  }
  .card-effect b,
  .card-effect strong {
    color: #ffd859;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.45);
  }

  .card-flavor {
    font-size: 6.5px;
    color: #9a9a9a;
    text-align: center;
    margin-top: 2px;
  }

  .card.selectable {
    cursor: pointer;
    touch-action: manipulation;
  }

  .card.selectable:active {
    filter: brightness(1.12);
  }

  /* ホバー挙動はPC（マウス操作）でのみ有効化。スマホでの1タップ目がhoverに取られて反応しなくなる現象を完全防止 */
  @media (hover: hover) and (pointer: fine) {
    .card.selectable:hover {
      --fan-lift: -26px;
      --fan-scale: 1.2;
      z-index: 80;
      box-shadow: 0 10px 20px rgba(0, 0, 0, .55), 0 0 0 2px rgba(227, 178, 60, .7), 0 0 16px rgba(227, 178, 60, .55);
    }

    .card.highlighted:hover {
      --fan-lift: -30px;
      --fan-scale: 1.2;
      z-index: 80;
    }

    .card.selected:hover {
      --fan-lift: -26px;
      --fan-scale: 1.2;
      z-index: 80;
    }
  }

  .card.highlighted {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 3px var(--gold), 0 0 18px rgba(227, 178, 60, .7);
    --fan-lift: -22px;
    z-index: 50;
    animation: cardGlow 1.2s ease-in-out infinite;
  }

  .card.selected {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 3px #ffffff, 0 0 14px rgba(255, 255, 255, .6);
    --fan-lift: -18px;
    z-index: 50;
  }

  .card.disabled {
    opacity: .4;
  }

  /* モバイル環境でのハイライト・選択時の引き上げ量(--fan-lift)を微小に制御（手札枠の上部見切れ防止） */
  @media (max-width:859px) {
    .card.highlighted {
      --fan-lift: -4px;
    }

    .card.selected {
      --fan-lift: -4px;
    }
  }

  .card.shake {
    animation: shake .4s ease;
  }

  .card.stacked {
    position: absolute;
    left: calc(50% - 50px);
    top: 2px;
  }

  @keyframes cardGlow {

    0%,
    100% {
      filter: brightness(1);
    }

    50% {
      filter: brightness(1.12);
    }
  }

  @keyframes shake {

    0%,
    100% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-6px);
    }

    75% {
      transform: translateX(6px);
    }
  }

  @keyframes pulseRing {

    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(227, 178, 60, .5);
    }

    50% {
      box-shadow: 0 0 0 8px rgba(227, 178, 60, 0);
    }
  }

  @keyframes deckShrinkPulse {
    0% {
      transform: scale(1);
    }

    35% {
      transform: scale(.88) translateY(2px);
    }

    100% {
      transform: scale(1);
    }
  }

  .lane-stack.pulse {
    animation: deckShrinkPulse .32s ease;
  }

  .ghost {
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55) !important;
  }
  .ghost.lane-stack .lane-back-2,
  .ghost.lane-stack .lane-back-1,
  .ghost .lane-back-2,
  .ghost .lane-back-1 {
    display: none !important;
  }
  .ghost.lane-stack .lane-back-0,
  .ghost .lane-back-0 {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5) !important;
  }

  /* ---------- Banner ---------- */
  .banner-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    pointer-events: none;
    background: rgba(0, 0, 0, 0);
    transition: background .3s;
  }

  .banner-overlay.active {
    pointer-events: auto;
    cursor: pointer;
    background: rgba(3, 7, 12, .78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .banner-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
  }

  .banner-stage.has-card {
    position: relative;
    animation: bannerStagePop .4s cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes bannerStagePop {
    0% {
      opacity: 0;
      transform: scale(.8) translateY(20px);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .banner-tap-hint {
    display: none !important;
  }

  /* ---- 通常バナーボックス（カードなし） ---- */
  .banner-box {
    position: relative;
    background: linear-gradient(165deg, rgba(18, 26, 20, .94), rgba(8, 12, 9, .97));
    color: #fdf6e3;
    font-family: 'Hiragino Sans', 'Noto Sans JP', 'Oswald', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 6vw, 32px);
    padding: 20px 44px;
    border-radius: 14px;
    border: 1.5px solid rgba(227, 178, 60, .85);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(227, 178, 60, .2) inset, 0 0 42px rgba(227, 178, 60, .35);
    opacity: 0;
    transform: scale(.86) translateY(10px);
    transition: opacity .4s cubic-bezier(.22, .9, .28, 1.2), transform .4s cubic-bezier(.22, .9, .28, 1.2);
    text-align: center;
    letter-spacing: .05em;
    text-shadow: 0 2px 12px rgba(227, 178, 60, .55);
    overflow: hidden;
  }

  .banner-box::before,
  .banner-box::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  }

  .banner-box::before {
    top: 8px;
  }

  .banner-box::after {
    bottom: 8px;
  }

  .banner-box .banner-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .4) 48%, transparent 62%);
    background-size: 220% 100%;
    background-position: 120% 0;
    pointer-events: none;
    z-index: 3;
  }

  .banner-box.show .banner-shine {
    animation: bannerShineSweep .9s ease-out .1s;
  }

  @keyframes bannerShineSweep {
    0% {
      background-position: 130% 0;
    }

    100% {
      background-position: -30% 0;
    }
  }

  .banner-box.show {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* ---- 走破成功など：馬カード背景表示 ---- */
  .banner-card-backdrop {
    display: none;
    pointer-events: none;
    position: relative;
  }

  .banner-stage.has-card .banner-card-backdrop {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .banner-card-backdrop .banner-horse-card.card,
  .banner-card-backdrop .banner-horse-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    animation: none !important;
    width: min(300px, 76vw) !important;
    height: auto !important;
    aspect-ratio: 5 / 7.1 !important;
    max-height: 64vh !important;
    border-radius: 14px;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, .95),
      0 0 35px rgba(0, 240, 255, .5),
      0 0 0 1px rgba(255, 255, 255, .2) inset;
    border: 2.5px solid #00f0ff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    overflow: hidden;
    margin: 0 auto;
  }

  /* カード表示時（走破宣言・走破成功・ガード共通）：カードの下にバナーを縦並びで表示 */
  .banner-stage.has-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 380px !important;
  }

  .banner-stage.has-card .banner-card-backdrop {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .banner-stage.has-card .banner-card-backdrop .banner-horse-card.card,
  .banner-stage.has-card .banner-card-backdrop .banner-horse-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    animation: none !important;
    width: min(280px, 74vw) !important;
    height: auto !important;
    aspect-ratio: 5 / 7.1 !important;
    max-height: 48vh !important;
    border-radius: 12px !important;
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.95),
      0 0 28px rgba(0, 240, 255, 0.45) !important;
    border: 2px solid #00f0ff !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  .banner-stage.has-card .banner-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(8px) scale(0.96) !important;
    width: auto !important;
    min-width: min(280px, 86vw) !important;
    max-width: min(94vw, 420px) !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .banner-stage.has-card .banner-box.show {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
  }

  /* ガード時：カードの下に「相手（自分）がガード！ 馬名 / ガード X」バナーを表示 */
  .banner-stage.has-card.is-guard {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 380px !important;
    animation: bannerStagePop 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .banner-stage.has-card.is-guard .banner-card-backdrop {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .banner-stage.has-card.is-guard .banner-card-backdrop .banner-horse-card.card,
  .banner-stage.has-card.is-guard .banner-card-backdrop .banner-horse-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    animation: none !important;
    width: min(280px, 74vw) !important;
    height: auto !important;
    aspect-ratio: 5 / 7.1 !important;
    max-height: 48vh !important;
    border-radius: 12px !important;
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.95),
      0 0 28px rgba(0, 240, 255, 0.45) !important;
    border: 2px solid #00f0ff !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  .banner-stage.has-card.is-guard .banner-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(10px) scale(0.96) !important;
    width: min(340px, 88vw) !important;
    max-width: 92vw !important;
    padding: 14px 20px !important;
    background: linear-gradient(180deg, #151d1e 0%, #0d1416 100%) !important;
    border: 2px solid #e5c07b !important;
    border-radius: 10px !important;
    box-shadow:
      0 16px 45px rgba(0, 0, 0, 0.9),
      0 0 22px rgba(227, 178, 60, 0.25) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
  }

  .banner-stage.has-card.is-guard .banner-box::before {
    content: '' !important;
    position: absolute !important;
    inset: 3.5px !important;
    left: 3.5px !important;
    right: 3.5px !important;
    height: auto !important;
    border: 1px solid rgba(229, 192, 123, 0.65) !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    background: transparent !important;
    box-shadow: inset 0 0 8px rgba(227, 178, 60, 0.15) !important;
  }

  .banner-stage.has-card.is-guard .banner-box::after {
    display: none !important;
  }

  .banner-stage.has-card.is-guard .banner-box .banner-box-text {
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
    font-size: clamp(14px, 3.8vw, 17.5px) !important;
    font-weight: 900 !important;
    color: #fff4d0 !important;
    letter-spacing: 0.04em !important;
    text-shadow:
      0 0 12px rgba(255, 230, 150, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.9) !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .banner-stage.has-card.is-guard .banner-box.show {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
  }

  /* ---------- Turn Change Overlay (Duel Links Style) ---------- */
  .turn-change-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
  }

  .turn-change-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  .turn-change-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(2, 6, 16, 0.72) 0%, rgba(2, 6, 16, 0.4) 60%, transparent 88%);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .turn-change-overlay.show .turn-change-backdrop {
    opacity: 1;
  }

  .turn-change-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: skewX(-14deg);
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.95));
  }

  .turn-change-overlay.show .turn-change-wrap {
    animation: turnChangeAnim 2.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes turnChangeAnim {
    0% {
      opacity: 0;
      transform: scale(1.5) skewX(-14deg);
      filter: brightness(2.4) drop-shadow(0 0 40px #ffffff);
    }
    12% {
      opacity: 1;
      transform: scale(0.96) skewX(-14deg);
      filter: brightness(1.25) drop-shadow(0 0 28px rgba(0, 210, 255, 0.9));
    }
    18% {
      transform: scale(1) skewX(-14deg);
      filter: brightness(1) drop-shadow(0 16px 36px rgba(0, 0, 0, 0.95));
    }
    85% {
      opacity: 1;
      transform: scale(1) skewX(-14deg);
    }
    100% {
      opacity: 0;
      transform: scale(0.92) skewX(-14deg) translateY(-20px);
      filter: brightness(0.8);
    }
  }

  .turn-change-top,
  .turn-change-bottom {
    font-family: 'Orbitron', 'Impact', sans-serif;
    font-size: clamp(56px, 14vw, 98px);
    font-weight: 900;
    font-style: italic;
    line-height: 0.88;
    letter-spacing: 0.06em;
    color: #ffffff;
    -webkit-text-stroke: 4px #000000;
    paint-order: stroke fill;
    text-shadow:
      0 0 24px rgba(0, 210, 255, 0.7),
      3px 3px 0 #000000,
      -3px -3px 0 #000000,
      3px -3px 0 #000000,
      -3px 3px 0 #000000,
      0 10px 28px rgba(0, 0, 0, 0.95);
  }

  .turn-change-middle {
    width: 100vw;
    max-width: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
  }

  .turn-change-banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 24px;
    background: linear-gradient(90deg, transparent 0%, rgba(220, 20, 40, 0.95) 12%, #eb0a2b 50%, rgba(220, 20, 40, 0.95) 88%, transparent 100%);
    box-shadow: 0 0 32px rgba(235, 10, 43, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    border-top: 1.5px solid rgba(255, 255, 255, 0.75);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  }

  /* プレイヤーのターン時はシアン〜ブルーのバナー */
  .turn-change-overlay.is-player .turn-change-banner {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 136, 255, 0.95) 12%, #0091ff 50%, rgba(0, 136, 255, 0.95) 88%, transparent 100%);
    box-shadow: 0 0 32px rgba(0, 145, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    border-top: 1.5px solid rgba(255, 255, 255, 0.75);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  }

  .turn-change-label {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-size: clamp(22px, 5.2vw, 36px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.1em;
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    paint-order: stroke fill;
    text-shadow:
      0 0 12px rgba(0, 0, 0, 0.95),
      2px 2px 0 #000,
      -2px -2px 0 #000,
      2px -2px 0 #000,
      -2px 2px 0 #000;
    white-space: nowrap;
  }

  /* ---------- Game Toast Notification (Screen Top Notification) ---------- */
  .game-toast {
    position: fixed;
    top: clamp(64px, 11vh, 96px);
    left: 50%;
    transform: translate(-50%, -10px) scale(0.96);
    background: rgba(14, 20, 26, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid #e5c07b;
    border-radius: 14px;
    color: #fff6db;
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: clamp(14px, 3.8vw, 16px);
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 14px 24px;
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.75),
      0 0 24px rgba(2, 132, 199, 0.35);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: normal;
    text-align: center;
    max-width: min(90vw, 420px);
    box-sizing: border-box;
    text-shadow: none;
  }

  .game-toast.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    animation: toastNoticeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes toastNoticeIn {
    0% {
      opacity: 0;
      transform: translate(-50%, -12px) scale(0.95);
    }

    100% {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
  }

  /* ---------- Arrow coach mark ---------- */
  .arrow {
    position: fixed;
    width: 42px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: arrowBob 1s ease-in-out infinite;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .55));
  }

  .arrow[hidden] {
    display: none;
  }

  .arrow-flag {
    width: 34px;
    height: 20px;
    margin-bottom: -2px;
    background-image: repeating-conic-gradient(#141414 0 25%, #f4f0e6 0 50%);
    background-size: 8px 8px;
    border: 2px solid #141414;
    border-radius: 3px 3px 0 0;
  }

  .arrow-shape {
    width: 42px;
    height: 44px;
  }

  .arrow-shape polygon {
    fill: var(--gold-2);
    stroke: #141414;
    stroke-width: 3;
  }

  .arrow.arrow-flip {
    flex-direction: column-reverse;
  }

  .arrow.arrow-flip .arrow-flag {
    margin-bottom: 0;
    margin-top: -2px;
    border-radius: 0 0 3px 3px;
  }

  .arrow.arrow-flip .arrow-shape {
    transform: rotate(180deg);
  }

  @keyframes arrowBob {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-9px);
    }
  }

  /* ---------- Narrator (Fixed between deck and hand) ---------- */
  .narrator {
    position: relative;
    z-index: 30;
    width: 92%;
    max-width: 660px;
    margin: 8px auto 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    user-select: none;
    box-sizing: border-box;
  }

  .narrator-bubble,
  .narrator-portrait {
    pointer-events: auto;
  }

  .narrator-next,
  .narrator-back,
  .narrator-forward {
    pointer-events: auto !important;
    cursor: pointer;
  }

  /* ポートレート：枠あり・角丸・背景付き */
  .narrator-portrait {
    flex: none;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a6b48, #14261b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 2px solid var(--gold-2);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 5px 14px rgba(0, 0, 0, .55);
    overflow: hidden;
    z-index: 2;
  }

  .narrator-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
  }

  /* 吹き出し本体：カプセル形状・白背景・鮮やかなシアンの発光枠 */
  .narrator-bubble {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    border-radius: 9999px;
    padding: 12px 32px 12px 28px;
    background: rgba(255, 255, 255, 0.97);
    border: 2px solid #00d2ff;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.55), 0 0 24px rgba(0, 210, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .narrator.dragging .narrator-bubble {
    box-shadow: 0 0 0 2px #00f0ff, 0 0 35px rgba(0, 229, 255, 0.75), 0 18px 45px rgba(0, 0, 0, 0.25);
    border-color: #00f0ff;
  }

  /* 参考画像に合わせて吹き出しのしっぽ（三角）は非表示 */
  .narrator-bubble::before,
  .narrator-bubble::after {
    display: none !important;
  }

  .narrator-text {
    flex: 1;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.55;
    color: #2b323b;
    text-shadow: none;
    letter-spacing: 0.01em;
  }

  .narrator-text b {
    color: #0284c7;
    font-weight: 700;
  }

  /* 吹き出しの進むインジケーター（次へ・戻るコマンドを廃止しタップ／クリック進行に統一） */
  .narrator.can-advance {
    cursor: pointer;
  }

  .narrator.can-advance .narrator-bubble {
    cursor: pointer;
  }

  .narrator.can-advance:hover .narrator-bubble {
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.7), 0 0 28px rgba(0, 210, 255, 0.35), 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: #00f0ff;
  }

  .narrator.can-advance:active .narrator-bubble {
    transform: scale(0.985);
  }

  .narrator-tap-hint {
    display: none;
    align-self: flex-end;
    font-size: 11px;
    font-weight: 700;
    color: #0284c7;
    letter-spacing: 0.04em;
    user-select: none;
    pointer-events: none;
    margin-top: 1px;
    margin-right: 2px;
    line-height: 1;
  }

  .narrator-tap-hint.show {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    animation: tapHintFadeIn 0.25s ease forwards;
  }

  .narrator-tap-hint .tap-arrow {
    display: inline-block;
    font-size: 9px;
    animation: tapArrowBounce 0.9s infinite alternate ease-in-out;
  }

  @keyframes tapArrowBounce {
    0% { transform: translateY(0); opacity: 0.6; }
    100% { transform: translateY(3px); opacity: 1; color: #00d2ff; }
  }

  @keyframes tapHintFadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .narrator-actions,
  .narrator-next,
  .narrator-back,
  .narrator-forward {
    display: none !important;
  }

  /* 過去のメッセージを閲覧中は、吹き出しの縁を少し変えて「これは過去のログです」と分かるようにする */
  .narrator.viewing-history .narrator-bubble {
    border-color: #94a3b8;
    box-shadow: 0 0 10px rgba(148, 163, 184, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (max-width:639px) {
    .narrator {
      gap: 7px;
      width: 96%;
      max-width: 500px;
      margin: 0 auto 4px;
    }

    .narrator-portrait {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border-width: 1.5px;
    }

    .narrator-bubble {
      min-height: 38px;
      padding: 5px 14px 5px 14px;
      border-radius: 18px;
      gap: 2px;
    }

    .narrator-text {
      font-size: 11px;
      line-height: 1.36;
    }

    .narrator-actions {
      margin-top: 1px;
      gap: 5px;
    }

    .narrator-tap-hint {
      font-size: 8.5px;
    }
  }

  .free-hint {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: rgba(10, 18, 13, .92);
    color: var(--rail-dim);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 11px;
    z-index: 45;
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .victory-badge {
    position: fixed;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 20px;
    z-index: 80;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
  }

  /* ---------- 勝敗演出 ---------- */
  .victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2, 4, 3, .78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
  }

  .victory-overlay.show {
    display: flex;
  }

  .victory-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .victory-confetti span {
    position: absolute;
    top: -8%;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: .9;
    animation-name: confettiFall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
  }

  @keyframes confettiFall {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }

    100% {
      transform: translateY(115vh) rotate(540deg);
      opacity: .15;
    }
  }

  .victory-card {
    position: relative;
    z-index: 1;
    width: min(360px, 88vw);
    padding: 34px 28px 28px;
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(175deg, rgba(24, 32, 22, .96), rgba(9, 13, 9, .98));
    border: 1.5px solid rgba(227, 178, 60, .75);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 60px rgba(227, 178, 60, .3);
    transform: scale(.8) translateY(18px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.2, 1.4, .3, 1), opacity .4s ease;
  }

  .victory-overlay.show .victory-card {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  .victory-icon {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 6px 14px rgba(227, 178, 60, .5));
    animation: victoryIconPop .6s cubic-bezier(.3, 1.7, .4, 1) .1s both;
  }

  @keyframes victoryIconPop {
    0% {
      transform: scale(0) rotate(-25deg);
    }

    60% {
      transform: scale(1.18) rotate(6deg);
    }

    100% {
      transform: scale(1) rotate(0deg);
    }
  }

  .victory-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: .12em;
    color: var(--gold-2);
    text-shadow: 0 2px 14px rgba(227, 178, 60, .6);
    margin-bottom: 4px;
  }

  .victory-overlay.lose .victory-title {
    color: #e9877f;
    text-shadow: 0 2px 14px rgba(233, 135, 127, .5);
  }

  .victory-subtitle {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--rail-dim);
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .victory-message {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rail);
    margin-bottom: 24px;
  }

  .victory-restart {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(160deg, var(--gold-2), var(--gold));
    color: var(--ink);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(227, 178, 60, .35);
    transition: transform .1s;
  }

  .victory-restart:active {
    transform: scale(.97);
  }

  .victory-overlay.lose .victory-restart {
    background: linear-gradient(160deg, #e9877f, #c25a52);
    box-shadow: 0 10px 24px rgba(194, 90, 82, .35);
  }

  .opponent-hand-area {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 3px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 9.5px;
    color: var(--rail-dim);
    white-space: nowrap;
  }

  .opponent-hand-area .count {
    color: var(--gold-2);
    font-weight: 700;
  }



  .cmd-fab {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .25), rgba(10, 18, 13, .95) 60%);
    border: 2px solid var(--gold);
    color: var(--gold-2);
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.75), 0 0 20px rgba(227, 178, 60, .5);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transition: transform .15s, box-shadow .2s;
    transform-style: flat;
    backface-visibility: hidden;
  }

  .cmd-fab:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .8), 0 0 30px rgba(227, 178, 60, .7);
  }

  .cmd-fab:active {
    transform: scale(.92);
  }

  .cmd-fab.open {
    transform: rotate(45deg);
  }

  .cmd-fab {
    animation: cmdFabPulse 2.2s ease-in-out infinite;
  }

  @keyframes cmdFabPulse {

    0%,
    100% {
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.75), 0 0 20px rgba(227, 178, 60, .5);
    }

    50% {
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.75), 0 0 30px rgba(227, 178, 60, .8);
    }
  }

  .cmd-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    display: none;
    flex-direction: column-reverse;
    gap: 12px;
    pointer-events: auto;
    align-items: center;
  }

  .cmd-menu.open {
    display: flex;
  }

  .cmd-menu-btn {
    background: rgba(20, 16, 10, .9);
    border: 1px solid rgba(227, 178, 60, .6);
    color: var(--rail);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 12px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, box-shadow .15s, transform .1s;
    letter-spacing: 0.05em;
    touch-action: manipulation;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .6);
    animation: cmdMenuPop .18s cubic-bezier(.3, 1.6, .4, 1) both;
  }

  .cmd-menu-btn.circular {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .15), transparent 60%),
      linear-gradient(135deg, rgba(139, 90, 43, .85), rgba(101, 67, 33, .95)),
      repeating-linear-gradient(45deg, rgba(139, 90, 43, .4) 0px, rgba(101, 67, 33, .5) 2px, transparent 2px, transparent 8px);
    border: 2.5px solid var(--gold);
    box-shadow:
      0 6px 16px rgba(0, 0, 0, .7),
      inset 0 0 0 1px rgba(227, 178, 60, .5),
      0 0 0 2px rgba(227, 178, 60, .3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: none !important;
  }

  .cmd-menu-btn.circular .btn-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  }

  .cmd-menu-btn.circular .btn-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    color: var(--rail);
  }

  .cmd-menu-btn.circular[data-cmd="run"] .btn-icon {
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74, 222, 128, .7);
  }

  .cmd-menu-btn.circular[data-cmd="item"] .btn-icon {
    color: #60a5fa;
    text-shadow: 0 0 12px rgba(96, 165, 250, .7);
  }

  .cmd-menu-btn.circular[data-cmd="end"] .btn-icon {
    color: #f87171;
    text-shadow: 0 0 12px rgba(248, 113, 113, .7);
  }

  .cmd-menu-btn.circular:hover {
    background:
      radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .2), transparent 60%),
      linear-gradient(135deg, rgba(139, 90, 43, .9), rgba(101, 67, 33, 1)),
      repeating-linear-gradient(45deg, rgba(139, 90, 43, .5) 0px, rgba(101, 67, 33, .6) 2px, transparent 2px, transparent 8px);
    border-color: var(--gold-2);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, .8),
      inset 0 0 0 1px rgba(227, 178, 60, .6),
      0 0 30px rgba(227, 178, 60, .5),
      0 0 0 3px rgba(227, 178, 60, .4);
    transform: scale(1.05);
  }

  .cmd-menu-btn.circular:active {
    transform: scale(0.95);
  }

  .cmd-menu-btn.circular.primary {
    border-color: var(--gold-2);
    box-shadow:
      0 6px 16px rgba(0, 0, 0, .7),
      inset 0 0 0 1px rgba(227, 178, 60, .5),
      0 0 20px rgba(227, 178, 60, .6);
  }

  .cmd-menu-btn:nth-child(2) {
    animation-delay: .04s;
  }

  .cmd-menu-btn:nth-child(3) {
    animation-delay: .08s;
  }

  @keyframes cmdMenuPop {
    0% {
      opacity: 0;
      transform: scale(.6) translateY(6px);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .cmd-menu-btn:hover {
    background: rgba(244, 240, 230, 0.12);
    border-color: var(--gold-2);
  }

  .cmd-menu-btn:active {
    transform: scale(0.96);
  }

  .cmd-menu-btn.primary {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(227, 178, 60, .55);
  }

  .cmd-menu-btn.primary:hover {
    background: var(--gold-2);
  }

  .cmd-menu-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  #opponent-thinking-popup,
  #run-support-popup,
  #guard-support-popup,
  #run-select-horse-popup,
  #situation-hint-popup,
  #farm-confirm-popup,
  #notice-action-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
  }

  #opponent-thinking-popup .popup-box,
  #run-support-popup .popup-box,
  #guard-support-popup .popup-box,
  #run-select-horse-popup .popup-box,
  #situation-hint-popup .popup-box,
  #farm-confirm-popup .popup-box,
  #notice-action-popup .popup-box {
    background: linear-gradient(180deg, #1a2f22, #0c1710);
    border: 3px solid var(--gold-2);
    border-radius: 18px;
    padding: 24px 28px;
    max-width: 440px;
    width: 92%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    text-align: center;
  }

  #opponent-thinking-popup .popup-title,
  #run-support-popup .popup-title,
  #guard-support-popup .popup-title,
  #run-select-horse-popup .popup-title,
  #situation-hint-popup .popup-title,
  #farm-confirm-popup .popup-title,
  #notice-action-popup .popup-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-2);
    margin-bottom: 8px;
  }

  #opponent-thinking-popup .popup-desc,
  #run-support-popup .popup-desc,
  #guard-support-popup .popup-desc,
  #run-select-horse-popup .popup-desc,
  #situation-hint-popup .popup-desc,
  #farm-confirm-popup .popup-desc,
  #notice-action-popup .popup-desc {
    font-size: 13px;
    color: var(--rail);
    line-height: 1.6;
    margin-bottom: 16px;
  }

  #run-support-popup .popup-btns,
  #guard-support-popup .popup-btns,
  #run-select-horse-popup .popup-btns,
  #situation-hint-popup .popup-btns,
  #farm-confirm-popup .popup-btns,
  #notice-action-popup .popup-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  #run-support-popup .popup-btns button,
  #guard-support-popup .popup-btns button,
  #run-select-horse-popup .popup-btns button,
  #situation-hint-popup .popup-btns button,
  #farm-confirm-popup .popup-btns button {
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: transform 0.1s;
  }

  #run-support-popup .popup-btns button:active,
  #guard-support-popup .popup-btns button:active,
  #run-select-horse-popup .popup-btns button:active,
  #situation-hint-popup .popup-btns button:active,
  #farm-confirm-popup .popup-btns button:active {
    transform: scale(0.95);
  }

  #run-support-popup .btn-guard,
  #guard-support-popup .btn-guard,
  #run-select-horse-popup .btn-guard,
  #situation-hint-popup .btn-guard,
  #farm-confirm-popup .btn-guard {
    background: var(--guard);
    color: #fff;
  }

  #run-support-popup .btn-skip,
  #guard-support-popup .btn-skip,
  #run-select-horse-popup .btn-skip,
  #situation-hint-popup .btn-skip,
  #farm-confirm-popup .btn-skip {
    background: rgba(244, 240, 230, 0.15);
    color: var(--rail);
    border: 1px solid var(--line);
  }

  /* ========== 相手の走破宣言・ガード確認モーダル ========== */
  #guard-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(3, 7, 12, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  #guard-popup .guard-horse-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 0;
    animation: guardHorsePop 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  #guard-popup .guard-horse-slot .card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    animation: none !important;
    width: min(280px, 74vw) !important;
    height: auto !important;
    aspect-ratio: 5 / 7.1 !important;
    max-height: 48vh !important;
    border-radius: 12px;
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.95),
      0 0 28px rgba(0, 240, 255, 0.45);
    border: 2px solid #00f0ff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    overflow: hidden;
  }

  @keyframes guardHorsePop {
    0% {
      opacity: 0;
      transform: scale(0.85) translateY(-14px);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  #guard-popup .popup-box {
    position: relative;
    background: linear-gradient(180deg, #151d1e 0%, #0d1416 100%);
    border: 2px solid #e5c07b;
    border-radius: 10px;
    padding: 16px 20px;
    width: min(340px, 88vw);
    box-sizing: border-box;
    box-shadow:
      0 16px 45px rgba(0, 0, 0, 0.9),
      0 0 22px rgba(227, 178, 60, 0.25);
    text-align: center;
    animation: guardBoxPop 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
  }

  #guard-popup .popup-box::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(229, 192, 123, 0.65);
    border-radius: 6px;
    pointer-events: none;
    box-shadow: inset 0 0 8px rgba(227, 178, 60, 0.15);
  }

  @keyframes guardBoxPop {
    0% {
      opacity: 0;
      transform: scale(0.9) translateY(14px);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  #guard-popup .popup-title {
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: clamp(15.5px, 4.2vw, 18.5px);
    font-weight: 900;
    color: #ffe694;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    text-shadow: 0 0 12px rgba(255, 230, 150, 0.7), 0 2px 4px rgba(0, 0, 0, 0.9);
  }

  #guard-popup .popup-desc {
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: clamp(12px, 3.2vw, 13.5px);
    color: #d8e5e8;
    line-height: 1.65;
    margin: 0 0 15px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  }

  #guard-popup .popup-desc b {
    color: #ffeb99;
    font-size: 1.15em;
  }

  #guard-popup .popup-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
  }

  #guard-popup .popup-btns button {
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: 13.5px;
    padding: 9px 22px;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  #guard-popup .popup-btns button:active {
    transform: scale(0.95);
  }

  #guard-popup .btn-guard {
    background: linear-gradient(180deg, #c74239 0%, #9e2a22 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 140, 130, 0.4);
    box-shadow: 0 4px 14px rgba(180, 40, 30, 0.5);
  }

  #guard-popup .btn-guard:hover {
    background: linear-gradient(180deg, #d84f45 0%, #ad322a 100%);
    box-shadow: 0 4px 18px rgba(220, 50, 40, 0.7);
  }

  #guard-popup .btn-skip {
    background: linear-gradient(180deg, #374340 0%, #252e2c 100%);
    color: #e2ede8;
    border: 1px solid rgba(160, 180, 175, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }

  #guard-popup .btn-skip:hover {
    background: linear-gradient(180deg, #43524e 0%, #2f3a37 100%);
  }

  /* ---------- Closeup layer (card focus / preview / activation) ---------- */
  #closeup-layer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(4, 8, 6, 0);
    pointer-events: none;
    transition: background .22s ease, backdrop-filter .22s ease;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    padding: 16px;
    box-sizing: border-box;
  }

  #closeup-layer.show {
    background: rgba(4, 8, 6, .78);
    pointer-events: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
  }

  #closeup-layer .closeup-card {
    transform: scale(.5);
    opacity: 0;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), opacity .22s ease;
    width: min(72vw, 300px);
    filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .85));
    pointer-events: none;
  }

  #closeup-layer.show .closeup-card {
    transform: scale(1);
    opacity: 1;
  }

  #closeup-layer .closeup-card .card {
    /* 手札では absolute 配置だが、拡大表示ではカード自身を通常フローに戻す。
       これをしないと親の高さが 0 になり、カードだけが画面上端へずれる。 */
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 7;
    transform: none !important;
    animation: none !important;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .3), 0 16px 36px rgba(0, 0, 0, .8);
  }

  #closeup-layer .closeup-toast {
    margin-top: 14px;
    background: linear-gradient(180deg, rgba(26, 38, 28, .95), rgba(12, 20, 15, .95));
    color: var(--rail);
    border: 1.5px solid var(--gold);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 13px;
    line-height: 1.5;
    max-width: min(86vw, 420px);
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .7), inset 0 0 12px rgba(227, 178, 60, .12);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }

  #closeup-layer.show .closeup-toast {
    opacity: 1;
    transform: translateY(0);
  }

  #closeup-layer .closeup-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: .15em;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-2);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
    background: rgba(10, 18, 12, .8);
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(227, 178, 60, .4);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }

  #closeup-layer .closeup-label .img-icon-inline {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
  }

  #closeup-layer.show .closeup-label {
    opacity: 1;
    transform: translateY(0);
  }

  #closeup-layer .closeup-close-hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--rail-dim);
    background: rgba(0, 0, 0, .5);
    padding: 4px 12px;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    white-space: nowrap;
  }

  #closeup-layer.show .closeup-close-hint {
    opacity: 0.85;
  }

  body.field-cyber #closeup-layer .closeup-toast {
    border-color: var(--cyber-cyan);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .7), inset 0 0 12px rgba(62, 224, 255, .2);
    background: linear-gradient(180deg, rgba(8, 20, 32, .95), rgba(4, 10, 18, .95));
  }

  body.field-cyber #closeup-layer .closeup-label {
    color: var(--cyber-cyan);
    border-color: rgba(62, 224, 255, .5);
  }

  /* カード要素の長押しでのブラウザデフォルトメニュー抑止＆長押し操作最適化 */
  .card,
  .card *,
  .farm-mini,
  .field-mini,
  .mini-card,
  .farm-card-item,
  .hand-fan-container,
  #hand-row,
  .slot-frame {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* ==================== CYBER FIELD SKIN (枠: サイバー) ==================== */
  :root {
    --cyber-cyan: #3ee0ff;
    --cyber-cyan-soft: #8ff0ff;
    --cyber-bg-1: #0c1626;
    --cyber-bg-2: #050a14;
  }

  /* ---------- Theme Switch (Slide Segmented Toggle) ---------- */
  .theme-switch {
    flex: none;
    display: inline-flex;
    align-items: center;
    background: rgba(18, 16, 24, .75);
    border: 1px solid rgba(227, 178, 60, .4);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    position: relative;
    user-select: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  body.field-cyber .theme-switch {
    border-color: rgba(62, 224, 255, .4);
    background: rgba(8, 16, 28, .75);
  }

  .theme-opt {
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--rail-dim);
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  }

  .theme-opt:hover {
    color: var(--rail);
  }

  .theme-opt[data-theme="cyber"].active {
    background: #00f0ff;
    color: #03202e;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 240, 255, .65);
  }

  .theme-opt[data-theme="classic"].active,
  .theme-opt[data-theme="nature"].active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(16, 185, 129, .65);
  }

  /* ---------- Mode Switch (チュートリアル / 自分で操作) ---------- */
  .mode-switch {
    flex: none;
    display: inline-flex;
    align-items: center;
    background: rgba(18, 16, 24, .75);
    border: 1px solid rgba(227, 178, 60, .4);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    position: relative;
    user-select: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  body.field-cyber .mode-switch {
    border-color: rgba(62, 224, 255, .4);
    background: rgba(8, 16, 28, .75);
  }

  .mode-opt {
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--rail-dim);
    font-size: 11px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  }

  .mode-opt:hover {
    color: var(--rail);
  }

  .mode-opt[data-mode="tutorial"].active {
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 0 10px rgba(227, 178, 60, .65);
  }

  body.field-cyber .mode-opt[data-mode="tutorial"].active {
    background: #00f0ff;
    color: #03202e;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 240, 255, .65);
  }

  .mode-opt[data-mode="manual"].active {
    background: #4ade80;
    color: #04260f;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(74, 222, 128, .65);
  }

  /* 自分で操作モード（ナレーターなし） */
  body.manual-mode .narrator {
    display: none !important;
  }

  /* manual-modeの時はナレーターのスペースを詰める */
  body.manual-mode .hand-zone {
    margin-top: -16px;
  }

  /* コマンドバー（非表示時） */
  #command-bar[hidden],
  #command-bar.hidden {
    display: none !important;
  }

  /* whole-app backdrop: exact cyber card playfield aesthetic */
  body.field-cyber {
    background-color: #050c18;
    background:
      radial-gradient(ellipse at 50% 120%, rgba(62, 224, 255, .22) 0%, rgba(14, 165, 233, .12) 40%, transparent 75%),
      repeating-radial-gradient(circle at 50% 100%, rgba(62, 224, 255, .04) 0px, rgba(62, 224, 255, .04) 1.5px, transparent 1.5px, transparent 28px),
      repeating-linear-gradient(0deg, rgba(62, 224, 255, .035) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(62, 224, 255, .035) 0 1px, transparent 1px 28px),
      linear-gradient(180deg, #050c18 0%, #081426 50%, #0d223a 100%);
    background-attachment: fixed;
    position: relative;
  }

  body.field-cyber::before,
  body.field-cyber::after {
    display: none;
  }

  body.field-cyber .app {
    position: relative;
    z-index: 1;
  }

  body.field-cyber .brand {
    font-family: 'Orbitron', sans-serif;
    color: var(--cyber-cyan);
    text-shadow: 0 0 10px rgba(62, 224, 255, .6);
    letter-spacing: .08em;
  }

  body.field-cyber .settings-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--cyber-cyan);
  }

  /* glassy header, sitting above the ambient glow */
  body.field-cyber .topbar {
    background: linear-gradient(180deg, rgba(10, 18, 32, .92), rgba(6, 12, 22, .72));
    border-bottom: 1px solid rgba(62, 224, 255, .25);
    box-shadow: 0 1px 0 rgba(62, 224, 255, .08), 0 6px 18px rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  body.field-cyber .logo-icon,
  body.field-cyber .brand::before {
    text-shadow: 0 0 8px rgba(62, 224, 255, .8);
  }

  body.field-cyber .field-image-wrap {
    background: transparent;
  }

  body.field-cyber .field-aura {
    display: none;
  }

  /* base slot look: clear luminous border + radial fill + glow */
  body.field-cyber .lane,
  body.field-cyber .field-body,
  body.field-cyber .farm-pile,
  body.field-cyber .zone-body {
    border-radius: 10px;
    border: 1.5px solid rgba(62, 224, 255, .55);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(62, 224, 255, .22), transparent 65%),
      rgba(8, 26, 52, .75);
    box-shadow: inset 0 0 16px rgba(62, 224, 255, .25), 0 0 14px rgba(62, 224, 255, .32);
    transition: border-color .2s, box-shadow .2s;
  }

  /* 相手の山札：相手ファーム（#zone-opp-farm）と同様に赤い枠と赤系背景 */
  .opp-lane,
  body.field-cyber .opp-lane {
    border-radius: 10px;
    border: 1.5px solid rgba(255, 140, 150, .6);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(255, 100, 120, .18), transparent 65%),
      rgba(30, 14, 26, .75);
    box-shadow: inset 0 0 16px rgba(255, 100, 120, .22), 0 0 12px rgba(255, 80, 100, .28);
    transition: border-color .2s, box-shadow .2s;
  }

  body.field-cyber .lane.active {
    border-color: var(--cyber-cyan);
    box-shadow: inset 0 0 14px rgba(62, 224, 255, .35), 0 0 18px rgba(62, 224, 255, .7);
  }

  body.field-cyber .opp-lane.active {
    border-color: #ff6478;
    box-shadow: inset 0 0 14px rgba(255, 100, 120, .35), 0 0 18px rgba(255, 80, 100, .7);
  }

  @keyframes pulseRingCyan {

    0%,
    100% {
      box-shadow: inset 0 0 14px rgba(62, 224, 255, .35), 0 0 18px rgba(62, 224, 255, .7);
    }

    50% {
      box-shadow: inset 0 0 20px rgba(62, 224, 255, .5), 0 0 28px rgba(62, 224, 255, .9);
    }
  }

  /* corner-bracket reticles: cyber neon blue */
  .slot-bracket {
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 4;
    border: 2px solid #00f0ff;
    filter: drop-shadow(0 0 4px #00f0ff) drop-shadow(0 0 8px rgba(0, 240, 255, .75));
    transition: border-color .2s, filter .2s;
  }

  body.field-cyber .slot-bracket {
    border-color: #00f0ff;
    filter: drop-shadow(0 0 5px #00f0ff) drop-shadow(0 0 11px rgba(0, 240, 255, .9));
  }

  .slot-bracket.tl {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 4px;
  }

  .slot-bracket.tr {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 4px;
  }

  .slot-bracket.bl {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 4px;
  }

  .slot-bracket.br {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 4px;
  }

  body.field-cyber .lane.active .slot-bracket {
    border-color: #ffffff;
    filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #00f0ff);
  }

  body.field-cyber .opp-lane.active .slot-bracket {
    border-color: #ffffff;
    filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #ff5064);
  }

  .slot-frame {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 70%;
    aspect-ratio: 5/7;
    pointer-events: none;
  }

  /* フィールド（自分・相手）の枠だけ、サイズと縦位置の微調整をここに限定する。 */
  #zone-field .slot-frame {
    width: 44%;
    transform: translateY(47%) translateX(-55%) translateY(var(--field-extra-shift, 0px));
  }

  #zone-field .slot-frame-opp {
    inset: auto;
    margin: 0;
    width: 44%;
    aspect-ratio: 5/7;
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateY(-47%) translateX(9%) translateY(var(--field-opp-extra-shift, 0px));
    z-index: 5;
    pointer-events: none;
  }

  #zone-field .slot-frame-opp .slot-bracket,
  body.field-cyber #zone-field .slot-frame-opp .slot-bracket {
    border-color: #00f0ff;
    filter: drop-shadow(0 0 5px #00f0ff) drop-shadow(0 0 11px rgba(0, 240, 255, .9));
  }

  /* 相手のカードゾーン（相手の馬カード置き場）：相手ファーム（#zone-opp-farm .farm-pile）と同様に赤い枠と青い四隅 */
  #zone-field .field-body-opp,
  #field-body-opp,
  body.field-cyber #zone-field .field-body-opp,
  body.field-cyber #field-body-opp,
  body.field-cyber .field-body-opp {
    border-radius: 10px;
    border: 1.5px solid rgba(255, 140, 150, .6);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(255, 100, 120, .18), transparent 65%),
      rgba(30, 14, 26, .75);
    box-shadow: inset 0 0 16px rgba(255, 100, 120, .22), 0 0 12px rgba(255, 80, 100, .28);
    transition: border-color .2s, box-shadow .2s;
  }

  #zone-opp-farm .farm-pile,
  body.field-cyber #zone-opp-farm .farm-pile {
    border-radius: 10px;
    border: 1.5px solid rgba(255, 140, 150, .6);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(255, 100, 120, .18), transparent 65%),
      rgba(30, 14, 26, .75);
    box-shadow: inset 0 0 16px rgba(255, 100, 120, .22), 0 0 12px rgba(255, 80, 100, .28);
    transition: border-color .2s, box-shadow .2s;
  }

  #zone-opp-farm .slot-frame {
    width: 70%;
    aspect-ratio: 5/7;
  }

  body.field-cyber .field-placeholder {
    color: rgba(62, 224, 255, .55);
  }

  body.field-cyber .field-placeholder::before {
    content: '馬カード置き場（自分）';
    font-size: 8px;
    letter-spacing: .06em;
    font-family: 'Orbitron', sans-serif;
  }

  body.field-cyber .field-placeholder-opp {
    color: rgba(62, 224, 255, .65);
  }

  body.field-cyber .field-placeholder-opp::before {
    content: '馬カード置き場（相手）';
    font-size: 7.5px;
    letter-spacing: .06em;
    font-family: 'Orbitron', sans-serif;
  }

  body.field-cyber .farm-pile:empty::before {
    content: 'ファーム';
    font-size: 10px;
    letter-spacing: .14em;
    color: rgba(62, 224, 255, .55);
    font-family: 'Orbitron', sans-serif;
  }

  body.field-cyber .zone-body:empty::before {
    content: '状況カード置き場';
    font-size: 9px;
    letter-spacing: .08em;
    color: rgba(62, 224, 255, .55);
    font-family: 'Orbitron', sans-serif;
  }

  body.field-cyber .lane-card-back {
    border-color: rgba(62, 224, 255, .55);
  }

  body.field-cyber .opp-lane .lane-card-back {
    border-color: rgba(255, 140, 150, .65);
    box-shadow: 0 0 8px rgba(255, 80, 100, .25);
  }

  body.field-cyber .lane-badge {
    color: var(--cyber-cyan);
    text-shadow: 0 0 6px rgba(62, 224, 255, .6);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: .04em;
  }

  body.field-cyber .opp-lane .lane-badge {
    color: #ff8595;
    text-shadow: 0 0 6px rgba(255, 100, 120, .8);
    background: rgba(30, 10, 20, .85);
    border-color: rgba(255, 140, 150, .6);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: .04em;
  }

  body.field-cyber .lane-label {
    font-family: 'Zen Kaku Gothic New', sans-serif;
  }

  body.field-cyber .lane.active .lane-label {
    border-color: #3ee0ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .85), 0 0 10px rgba(62, 224, 255, .75);
  }

  body.field-cyber .opp-lane.active .lane-label {
    border-color: #ff6478;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .85), 0 0 10px rgba(255, 100, 120, .75);
  }

  body.field-cyber .tilt-select {
    border-color: rgba(62, 224, 255, .4);
    background: rgba(8, 16, 26, .72);
    backdrop-filter: blur(4px);
  }

  body.field-cyber .tilt-opt.active {
    background: var(--cyber-cyan);
    color: #032530;
    box-shadow: 0 0 8px rgba(62, 224, 255, .6);
  }

  body.field-cyber .settings-gear,
  body.field-cyber .restart-btn,
  body.field-cyber .bgm-toggle {
    border-color: rgba(62, 224, 255, .4);
  }

  body.field-cyber .settings-gear:hover,
  body.field-cyber .restart-btn:hover,
  body.field-cyber .bgm-toggle:hover {
    color: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
    box-shadow: 0 0 8px rgba(62, 224, 255, .35);
  }

  body.field-cyber .perspective-toggle.is-on {
    background: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
    color: #032530;
    box-shadow: 0 0 12px rgba(62, 224, 255, .55);
  }

  /* settings panel: glassy cyan-tinted surface */
  body.field-cyber .settings-panel {
    border-left: 1px solid rgba(62, 224, 255, .35);
    background: linear-gradient(180deg, rgba(9, 17, 30, .96), rgba(5, 10, 20, .96));
    box-shadow: -10px 0 40px rgba(0, 0, 0, .6), inset 1px 0 0 rgba(62, 224, 255, .08);
  }

  body.field-cyber .preset-btn,
  body.field-cyber .settings-reset {
    border-color: rgba(62, 224, 255, .35);
    background: rgba(10, 22, 36, .6);
  }

  body.field-cyber .preset-btn.active {
    background: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
    color: #032530;
    box-shadow: 0 0 8px rgba(62, 224, 255, .5);
  }

  body.field-cyber .settings-tabs {
    border-bottom-color: rgba(62, 224, 255, .25);
  }

  body.field-cyber .settings-tab-btn {
    border-color: rgba(62, 224, 255, .35);
    background: rgba(10, 22, 36, .6);
    color: rgba(220, 240, 255, .7);
  }

  body.field-cyber .settings-tab-btn:hover {
    color: #fff;
    border-color: rgba(62, 224, 255, .6);
  }

  body.field-cyber .settings-tab-btn.active {
    background: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
    color: #032530;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(62, 224, 255, .5);
  }

  body.field-cyber .settings-bgm-toggle {
    border-color: rgba(62, 224, 255, .35);
    background: rgba(10, 22, 36, .6);
    color: rgba(220, 240, 255, .85);
  }

  body.field-cyber .settings-bgm-toggle:hover {
    color: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
    box-shadow: 0 0 8px rgba(62, 224, 255, .35);
  }

  body.field-cyber .settings-value {
    color: var(--cyber-cyan);
    font-family: 'Orbitron', sans-serif;
  }

  body.field-cyber .settings-label {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: .08em;
  }

  body.field-cyber .settings-group input[type=range] {
    background: rgba(62, 224, 255, .25);
  }

  body.field-cyber .settings-group input[type=range]::-webkit-slider-thumb {
    background: var(--cyber-cyan);
    box-shadow: 0 0 8px rgba(62, 224, 255, .8);
  }

  body.field-cyber .settings-group input[type=range]::-moz-range-thumb {
    background: var(--cyber-cyan);
  }

  /* ===================== White-based Cyber Theme (電脳サイバー 白＆青ベーステーマ) ===================== */
  body.field-cyber.field-white,
  body.field-white {
    --rail: #02203c;
    --rail-dim: #38bdf8;
    --gold-2: #0099ff;
    --line: rgba(0, 180, 255, 0.45);
    background:
      radial-gradient(1200px 700px at 15% 0%, rgba(0, 210, 255, 0.18), transparent 60%),
      radial-gradient(1000px 600px at 85% 10%, rgba(0, 140, 255, 0.16), transparent 55%),
      radial-gradient(1100px 800px at 50% 100%, rgba(0, 240, 255, 0.14), transparent 65%),
      linear-gradient(180deg, #f0f7ff 0%, #e2effd 50%, #d8e9fc 100%);
    color: #022b52;
  }

  body.field-cyber.field-white .app,
  body.field-white .app {
    color: #022b52;
  }

  body.field-cyber.field-white .topbar,
  body.field-white .topbar {
    background: rgba(245, 251, 255, 0.90);
    border-bottom: 1.5px solid rgba(0, 180, 255, 0.45);
    box-shadow: 0 4px 20px rgba(0, 120, 220, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.field-cyber.field-white .brand,
  body.field-white .brand {
    color: #022b52;
    text-shadow: 0 0 10px rgba(0, 190, 255, 0.35);
  }

  body.field-cyber.field-white .brand span,
  body.field-white .brand span {
    color: #0088ff;
    text-shadow: 0 0 12px rgba(0, 210, 255, 0.6);
  }

  body.field-cyber.field-white .track-wrap,
  body.field-white .track-wrap {
    background: rgba(225, 241, 255, 0.92);
    border: 1.5px solid rgba(0, 180, 255, 0.45);
    box-shadow: inset 0 0 10px rgba(0, 180, 255, 0.15);
  }

  body.field-cyber.field-white .track,
  body.field-white .track {
    background: rgba(200, 228, 255, 0.7);
  }

  body.field-cyber.field-white .track-grid,
  body.field-white .track-grid {
    background-size: 8px 100%;
    background-image: linear-gradient(90deg, rgba(0, 160, 255, 0.28) 1px, transparent 1px);
  }

  body.field-cyber.field-white .track-badge,
  body.field-white .track-badge {
    background: rgba(0, 140, 255, 0.16);
    border: 1px solid #00a2ff;
    color: #0055aa;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(0, 180, 255, 0.25);
  }

  body.field-cyber.field-white .badge-dot,
  body.field-white .badge-dot {
    background: #00d2ff;
    box-shadow: 0 0 8px #00d2ff;
  }

  body.field-cyber.field-white .step-label,
  body.field-white .step-label {
    color: #022b52;
  }

  body.field-cyber.field-white .step-prefix,
  body.field-white .step-prefix {
    color: #1e5282;
    font-weight: 600;
  }

  body.field-cyber.field-white .step-current,
  body.field-white .step-current {
    color: #0088ff;
    font-weight: 800;
  }

  body.field-cyber.field-white .step-slash,
  body.field-white .step-slash {
    color: #94a3b8;
  }

  body.field-cyber.field-white .step-total,
  body.field-white .step-total {
    color: #1e5282;
    font-weight: 600;
  }

  body.field-cyber.field-white .settings-gear,
  body.field-white .settings-gear {
    background: rgba(245, 251, 255, 0.95);
    border-color: rgba(0, 180, 255, 0.5);
    color: #0066cc;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.25);
  }

  body.field-cyber.field-white .settings-gear:hover,
  body.field-white .settings-gear:hover {
    background: #0088ff;
    color: #ffffff;
    border-color: #00f0ff;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.6);
  }

  /* サイバーテーマ（ダーク）の opponent-strip */
  body.field-cyber:not(.field-white) .opponent-strip {
    background: linear-gradient(135deg, rgba(6, 18, 38, 0.90) 0%, rgba(10, 28, 56, 0.82) 100%);
    border: 1px solid rgba(0, 210, 255, 0.38);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 210, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.field-cyber:not(.field-white) .opponent-avatar {
    border-color: #00d2ff;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
  }

  body.field-cyber:not(.field-white) .opponent-name {
    color: #e0f2fe;
    text-shadow: 0 0 6px rgba(0, 210, 255, 0.35);
  }

  body.field-cyber:not(.field-white) .opponent-sub {
    color: #38bdf8;
  }

  body.field-cyber:not(.field-white) .opponent-hand-area {
    background: rgba(0, 180, 235, 0.15);
    border-color: rgba(0, 210, 255, 0.35);
    color: #bae6fd;
  }

  body.field-cyber:not(.field-white) .opponent-hand-area .count {
    color: #38bdf8;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
  }

  /* サイバーテーマ（ホワイト）の opponent-strip */
  body.field-cyber.field-white .opponent-strip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(235, 246, 255, 0.92) 100%);
    border: 1.5px solid rgba(0, 180, 255, 0.5);
    box-shadow: 0 4px 18px rgba(0, 120, 220, 0.12), 0 0 12px rgba(0, 210, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.field-cyber.field-white .opponent-avatar {
    border-color: #00a2ff;
    box-shadow: 0 0 8px rgba(0, 162, 255, 0.5);
  }

  body.field-cyber.field-white .opponent-name {
    color: #022b52;
    text-shadow: 0 0 8px rgba(0, 180, 255, 0.3);
  }

  body.field-cyber.field-white .opponent-sub {
    color: #0077dd;
  }

  body.field-cyber.field-white .opponent-hand-area {
    background: rgba(220, 240, 255, 0.85);
    border-color: rgba(0, 180, 255, 0.45);
    color: #023866;
  }

  body.field-cyber.field-white .opponent-hand-area .count {
    color: #0077ff;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(0, 140, 255, 0.4);
  }

  body.field-cyber.field-white .settings-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 255, 0.98));
    border-left: 1.5px solid rgba(0, 180, 255, 0.45);
    box-shadow: -10px 0 40px rgba(0, 80, 180, 0.2), 0 0 20px rgba(0, 210, 255, 0.2);
  }

  body.field-cyber.field-white .settings-title {
    color: #022b52;
  }

  body.field-cyber.field-white .settings-close {
    color: #64748b;
  }

  body.field-cyber.field-white .settings-close:hover {
    color: #022b52;
  }

  body.field-cyber.field-white .settings-tabs {
    border-bottom-color: rgba(0, 180, 255, 0.35);
  }

  body.field-cyber.field-white .settings-tab-btn {
    border-color: rgba(0, 180, 255, 0.35);
    background: rgba(230, 243, 255, 0.85);
    color: #1e5282;
  }

  body.field-cyber.field-white .settings-tab-btn:hover {
    color: #0077dd;
    border-color: rgba(0, 180, 255, 0.65);
  }

  body.field-cyber.field-white .settings-tab-btn.active {
    background: linear-gradient(135deg, #0088ff, #0055cc);
    border-color: #00f0ff;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.5);
  }

  body.field-cyber.field-white .settings-label {
    color: #022b52;
  }

  body.field-cyber.field-white .settings-desc {
    color: #64748b;
  }

  body.field-cyber.field-white .settings-row {
    color: #022b52;
  }

  body.field-cyber.field-white .settings-value {
    color: #0088ff;
  }

  body.field-cyber.field-white .theme-switch,
  body.field-cyber.field-white .mode-switch {
    background: rgba(226, 238, 252, 0.95);
    border-color: rgba(0, 180, 255, 0.4);
  }

  body.field-cyber.field-white .theme-opt,
  body.field-cyber.field-white .mode-opt {
    color: #1e5282;
  }

  body.field-cyber.field-white .theme-opt:hover,
  body.field-cyber.field-white .mode-opt:hover {
    color: #0077dd;
  }

  body.field-cyber.field-white .preset-btn,
  body.field-cyber.field-white .settings-reset,
  body.field-cyber.field-white .settings-bgm-toggle {
    border-color: rgba(0, 180, 255, 0.35);
    background: rgba(230, 243, 255, 0.85);
    color: #022b52;
  }

  body.field-cyber.field-white .preset-btn:hover,
  body.field-cyber.field-white .settings-reset:hover,
  body.field-cyber.field-white .settings-bgm-toggle:hover {
    color: #0077dd;
    border-color: #00a2ff;
  }

  body.field-cyber.field-white .preset-btn.active {
    background: linear-gradient(135deg, #0088ff, #0055cc);
    border-color: #00f0ff;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
  }

  body.field-cyber.field-white .settings-group input[type=range] {
    background: rgba(0, 180, 255, 0.25);
  }

  body.field-cyber.field-white .settings-group input[type=range]::-webkit-slider-thumb {
    background: #0088ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.7);
  }

  /* ボード盤面マット：電脳サイバー 白＆青ベース（透過サイバーグラス） */
  body.field-cyber.field-white .field-splash-bg {
    background:
      radial-gradient(ellipse at 50% 50%, rgba(0, 210, 255, 0.16) 0%, rgba(0, 140, 255, 0.06) 50%, transparent 80%),
      repeating-linear-gradient(0deg, rgba(0, 160, 255, 0.12) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(90deg, rgba(0, 160, 255, 0.12) 0 1px, transparent 1px 32px),
      rgba(240, 248, 255, 0.22);
    box-shadow:
      inset 0 0 30px rgba(0, 180, 255, 0.18),
      0 0 20px rgba(0, 190, 255, 0.25),
      0 20px 50px rgba(0, 70, 160, 0.15);
    border: 1.5px solid rgba(0, 180, 255, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.field-cyber.field-white .field-splash-bg::before {
    background:
      repeating-radial-gradient(circle at 50% 50%,
        rgba(0, 180, 255, 0.05) 0px,
        rgba(0, 180, 255, 0.05) 1.5px,
        transparent 1.5px,
        transparent 24px);
    opacity: 0.85;
  }

  body.field-cyber.field-white .field-splash-canvas {
    mix-blend-mode: multiply;
    opacity: 0.55;
  }

  /* フィールド枠・スロット：サイバー白＆青（透過サイバーグラス） */
  body.field-cyber.field-white .lane,
  body.field-cyber.field-white .opp-lane,
  body.field-cyber.field-white .field-body,
  body.field-cyber.field-white .farm-pile,
  body.field-cyber.field-white .zone-body {
    border: 1.5px solid rgba(0, 180, 255, 0.7);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(0, 210, 255, 0.22), transparent 65%),
      rgba(240, 248, 255, 0.35);
    box-shadow: inset 0 0 14px rgba(0, 180, 255, 0.18), 0 2px 10px rgba(0, 120, 220, 0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.field-cyber.field-white .lane-card-back,
  body.field-cyber.field-white .opp-lane .lane-card-back {
    border: 1.5px solid rgba(0, 180, 255, 0.7) !important;
    background-image: var(--card-back-image) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.4) !important;
  }

  body.field-cyber.field-white .lane-label,
  body.field-cyber.field-white .opp-lane .lane-label,
  body.field-white .lane-label,
  body.field-white .opp-lane .lane-label {
    background: rgba(255, 255, 255, 0.98);
    color: #022b52;
    border-color: rgba(0, 180, 255, 0.65);
    box-shadow: 0 2px 8px rgba(0, 140, 255, 0.2);
  }

  /* 脚質ごとの枠色・文字色アクセントを鮮明・高コントラストに最適化 */
  body.field-white .lane[data-lane="nige"] .lane-label,
  body.field-white .opp-lane[data-lane="nige"] .lane-label {
    color: #0077dd !important;
    border-color: #00a2ff !important;
    background: #ffffff !important;
  }

  body.field-white .lane[data-lane="senko"] .lane-label,
  body.field-white .opp-lane[data-lane="senko"] .lane-label {
    color: #e11d48 !important;
    border-color: #f43f5e !important;
    background: #ffffff !important;
  }

  body.field-white .lane[data-lane="sashi"] .lane-label,
  body.field-white .opp-lane[data-lane="sashi"] .lane-label {
    color: #047857 !important;
    border-color: #10b981 !important;
    background: #ffffff !important;
  }

  body.field-white .lane[data-lane="oikomi"] .lane-label,
  body.field-white .opp-lane[data-lane="oikomi"] .lane-label {
    color: #b45309 !important;
    border-color: #f59e0b !important;
    background: #ffffff !important;
  }

  /* アクティブな山札ラベル（白テーマ） */
  body.field-white .lane.active .lane-label,
  body.field-white .opp-lane.active .lane-label {
    background: linear-gradient(135deg, #0088ff, #0055cc) !important;
    color: #ffffff !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.75) !important;
  }

  /* 山札枚数バッジ（白テーマ） */
  body.field-white .lane-badge {
    background: linear-gradient(135deg, #0099ff, #0066cc) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6) !important;
  }

  body.field-cyber.field-white #zone-opp-farm .farm-pile,
  body.field-cyber.field-white #zone-field .field-body-opp,
  body.field-cyber.field-white .opp-lane,
  body.field-white #zone-opp-farm .farm-pile,
  body.field-white #zone-field .field-body-opp,
  body.field-white .opp-lane {
    border: 1.5px solid rgba(2, 132, 199, 0.7) !important;
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(2, 132, 199, 0.20), transparent 65%),
      rgba(240, 248, 255, 0.30) !important;
    box-shadow: inset 0 0 14px rgba(0, 140, 255, 0.15), 0 2px 10px rgba(2, 132, 199, 0.15) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.field-white .opp-lane .lane-badge {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5) !important;
  }

  body.field-white .opp-lane .lane-card-back {
    border-color: rgba(0, 160, 255, 0.55) !important;
  }

  body.field-cyber.field-white #zone-farm .farm-pile,
  body.field-cyber.field-white #zone-field .field-body,
  body.field-white #zone-farm .farm-pile,
  body.field-white #zone-field .field-body {
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(0, 210, 255, 0.22), transparent 65%),
      rgba(240, 248, 255, 0.35) !important;
    box-shadow: inset 0 0 14px rgba(0, 200, 255, 0.18), 0 2px 10px rgba(0, 120, 220, 0.15) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.field-cyber.field-white .field-placeholder,
  body.field-white .field-placeholder {
    color: #0077dd !important;
    font-weight: 700;
  }

  body.field-cyber.field-white .field-placeholder-opp,
  body.field-white .field-placeholder-opp {
    color: #0284c7 !important;
    font-weight: 700;
  }

  body.field-cyber.field-white .farm-pile:empty::before,
  body.field-cyber.field-white .zone-body:empty::before,
  body.field-white .farm-pile:empty::before,
  body.field-white .zone-body:empty::before {
    color: #0077dd !important;
    font-weight: 700;
  }

  /* 相手エリアの文字同化防止（白テーマ） */
  body.field-white .opponent-strip,
  body.field-cyber.field-white .opponent-strip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 246, 254, 0.96) 100%) !important;
    border: 1.5px solid rgba(0, 180, 255, 0.5) !important;
    box-shadow: 0 4px 14px rgba(0, 80, 180, 0.12) !important;
  }

  body.field-white .opponent-avatar,
  body.field-cyber.field-white .opponent-avatar {
    border-color: #00a2ff !important;
    box-shadow: 0 0 6px rgba(0, 160, 235, 0.3) !important;
  }

  body.field-white .opponent-name,
  body.field-cyber.field-white .opponent-name,
  body.field-white #opponent-name,
  body.field-cyber.field-white #opponent-name {
    color: #0f2942 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
  }

  body.field-white .opponent-sub,
  body.field-cyber.field-white .opponent-sub,
  body.field-white #opponent-sub,
  body.field-cyber.field-white #opponent-sub {
    color: #0369a1 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
  }

  body.field-white .opponent-hand-area,
  body.field-cyber.field-white .opponent-hand-area,
  body.field-white #opponent-hand-display,
  body.field-cyber.field-white #opponent-hand-display {
    background: rgba(224, 242, 254, 0.95) !important;
    border-color: rgba(0, 160, 235, 0.5) !important;
    color: #0f2942 !important;
    font-weight: 600 !important;
  }

  body.field-white #opponent-hand-count,
  body.field-cyber.field-white #opponent-hand-count,
  body.field-white .opponent-hand-area .count,
  body.field-cyber.field-white .opponent-hand-area .count {
    color: #0284c7 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
  }

  /* 白テーマでのポップアップ・ヒント・トースト通知の視認性強化 */
  body.field-white .free-hint {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #0f2942 !important;
    border: 1px solid rgba(0, 160, 235, 0.5) !important;
  }

  body.field-white .game-toast {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #0f2942 !important;
    border: 1.5px solid rgba(0, 160, 235, 0.6) !important;
    box-shadow: 0 8px 24px rgba(0, 40, 90, 0.15) !important;
  }

  /* ポップアップ・ダイアログは全テーマ共通で最高峰のダーク＆ゴールドゲームUIに統一 */

  /* 閉じている間は透明のまま（常時指定すると画面全体が白い膜で覆われる不具合になる） */
  body.field-white #closeup-layer.show {
    background: rgba(240, 245, 252, 0.94) !important;
  }

  body.field-white .closeup-label {
    color: #0f2942 !important;
  }

  body.field-white .closeup-close-hint {
    color: #475569 !important;
  }

  /* ===================== 初期カード配布（ディール演出）スタイル ===================== */
  .deal-center-deck {
    position: fixed;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 136px;
    z-index: 95;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
    animation: dealCenterFloat 2.4s ease-in-out infinite alternate;
  }

  @media (max-width: 639px) {
    .deal-center-deck {
      width: 86px;
      height: 122px;
    }
  }

  @keyframes dealCenterFloat {
    0% {
      transform: translate(-50%, -50%) translateY(-2px);
    }

    100% {
      transform: translate(-50%, -50%) translateY(3px);
    }
  }

  .deal-center-deck.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  .deal-deck-stack {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .deal-deck-back {
    position: absolute;
    inset: 0;
    border-radius: 9px;
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    border: 2px solid #d7b25a;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, .65),
      0 0 24px rgba(227, 178, 60, .45),
      1px 1px 0 0 #cbb050,
      2px 2px 0 0 #bfa347,
      3px 3px 0 0 #b3963e,
      4px 4px 0 0 #a68a36,
      5px 5px 0 0 #9a7d2f,
      6px 6px 0 0 #8d7128,
      7px 7px 0 0 #806521,
      8px 8px 0 0 #745a1c,
      9px 9px 0 0 #684f18,
      10px 10px 0 0 #5c4414,
      11px 11px 0 0 #503a10,
      12px 12px 2px 0 rgba(0, 0, 0, .5);
  }

  .deal-deck-badge {
    position: absolute;
    right: -12px;
    top: -12px;
    background: linear-gradient(135deg, #ffe082, var(--gold));
    color: #1a1300;
    font-family: 'Orbitron', 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 14px;
    padding: 3px 9px;
    border-radius: 14px;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .5), 0 0 12px rgba(227, 178, 60, .75);
    z-index: 10;
    letter-spacing: .02em;
    animation: badgePop .2s cubic-bezier(.34, 1.56, .64, 1);
  }

  .deal-deck-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Orbitron', 'Zen Kaku Gothic New', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-2);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .9);
    letter-spacing: .08em;
    background: rgba(10, 18, 12, .88);
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid rgba(227, 178, 60, .45);
  }

  .deal-ghost-fast {
    position: fixed;
    z-index: 96;
    margin: 0;
    pointer-events: none;
    border-radius: 8px;
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    border: 2px solid #ffd54f;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 213, 79, .6);
    transition: transform .28s cubic-bezier(.25, .9, .3, 1), opacity .28s ease;
  }

  /* 手札に配られるカードは、裏面ではなく実際のカード面を飛ばす */
  .deal-ghost-fast.deal-ghost-face:not(.has-img) {
    background-image: none;
    background: linear-gradient(165deg, #2a3f30, #0e1a12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fffdf5;
  }

  .deal-flash {
    animation: dealZoneFlash .35s ease-out;
  }

  @keyframes dealZoneFlash {
    0% {
      filter: brightness(1.8);
      transform: scale(1.06);
      box-shadow: 0 0 20px rgba(255, 215, 0, .9);
    }

    100% {
      filter: brightness(1);
      transform: scale(1);
    }
  }

  body.field-cyber .deal-deck-back {
    border-color: var(--cyber-cyan);
    box-shadow:
      0 4px 14px rgba(0, 0, 0, .7),
      0 0 24px rgba(62, 224, 255, .5),
      1px 1px 0 0 #288094,
      2px 2px 0 0 #237082,
      3px 3px 0 0 #1e6070,
      4px 4px 0 0 #19505e,
      5px 5px 0 0 #14404c,
      6px 6px 0 0 #0f303a,
      7px 7px 0 0 #0a2028,
      8px 8px 0 0 #051016;
  }

  body.field-cyber .deal-deck-badge {
    background: linear-gradient(135deg, #a5f3fc, var(--cyber-cyan));
    color: #032530;
    border-color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .5), 0 0 12px rgba(62, 224, 255, .8);
  }

  body.field-cyber .deal-deck-label {
    color: var(--cyber-cyan);
    border-color: rgba(62, 224, 255, .5);
    background: rgba(5, 15, 25, .88);
  }

  body.field-cyber .deal-ghost-fast {
    border-color: var(--cyber-cyan);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .6), 0 0 16px rgba(62, 224, 255, .8);
  }

  /* ========== Command Bar (デッキと手札の間) ========== */
  #command-bar {
    position: absolute;
    right: 0;
    top: 96%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    padding-right: 6px;
  }

  #command-bar>* {
    pointer-events: auto;
  }

  #command-bar .drag-handle {
    display: none;
  }

  /* ---- コマンドメニュー（カプセル型ボタン群） ---- */
  .cmd-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: auto;
  }

  .cmd-menu.open {
    display: flex;
    animation: cmdMenuIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes cmdMenuIn {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.92);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* ---- デュエルリンクス風 丸型シルエット FAB (循環矢印) ---- */
  .cmd-fab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2.5px solid #00f0ff;
    background:
      radial-gradient(circle at 45% 28%, rgba(0, 240, 255, 0.4) 0%, transparent 60%),
      radial-gradient(circle at 50% 50%, #0e3d59 0%, #061e2d 55%, #020b12 100%);
    box-shadow:
      0 0 18px rgba(0, 240, 255, 0.9),
      0 0 36px rgba(0, 240, 255, 0.55),
      inset 0 0 14px rgba(0, 240, 255, 0.4),
      inset 0 2px 4px rgba(255, 255, 255, 0.7),
      0 6px 18px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    overflow: visible;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    user-select: none;
    outline: none;
    flex-shrink: 0;
    padding: 0;
  }

  /* 上部 COMMAND バッジ */
  .cmd-fab-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #00f0ff, #0a84aa);
    color: #020d18;
    font-family: 'Oswald', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 1px 5px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
    transition: background 0.2s ease, color 0.2s ease;
  }

  /* 外側の発光オーラリング */
  .cmd-fab::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 240, 255, 0.6);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
    pointer-events: none;
    animation: pulseFabGlow 2.4s ease-in-out infinite;
  }

  @keyframes pulseFabGlow {

    0%,
    100% {
      transform: scale(1);
      opacity: 0.75;
    }

    50% {
      transform: scale(1.08);
      opacity: 1;
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.9);
    }
  }

  /* ガラスのハイライト反射 */
  .cmd-fab::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    right: 6px;
    height: 22px;
    border-radius: 22px 22px 12px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .cmd-fab .cmd-fab-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .cmd-fab-arrow {
    width: 33px;
    height: 33px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  /* ホバー / フォーカス */
  .cmd-fab:hover,
  .cmd-fab:focus-visible {
    box-shadow:
      0 0 24px rgba(0, 240, 255, 1),
      0 0 50px rgba(0, 240, 255, 0.75),
      inset 0 0 18px rgba(0, 240, 255, 0.45),
      inset 0 2px 6px rgba(255, 255, 255, 0.9),
      0 8px 22px rgba(0, 0, 0, 0.9);
    transform: scale(1.08);
    border-color: #7ef2ff;
  }

  .cmd-fab:hover .cmd-fab-arrow {
    transform: rotate(45deg);
  }

  .cmd-fab:active {
    transform: scale(0.94);
  }

  /* メニュー展開時（赤み・✕とじるモード） */
  .cmd-fab.open {
    border-color: #ff5f7e;
    box-shadow:
      0 0 30px rgba(255, 95, 126, 1),
      0 0 60px rgba(255, 95, 126, 0.85),
      inset 0 0 22px rgba(255, 95, 126, 0.5),
      inset 0 2px 6px rgba(255, 255, 255, 0.9),
      0 8px 24px rgba(0, 0, 0, 0.9);
    background:
      radial-gradient(circle at 45% 28%, rgba(255, 95, 126, 0.42) 0%, transparent 60%),
      radial-gradient(circle at 50% 50%, #591024 0%, #2e0813 55%, #120206 100%);
  }

  .cmd-fab.open .cmd-fab-badge {
    background: linear-gradient(180deg, #ff5f7e, #b81438);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 95, 126, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
  }

  .cmd-fab.open::after {
    border-color: rgba(255, 95, 126, 0.6);
    box-shadow: 0 0 14px rgba(255, 95, 126, 0.5);
  }

  .cmd-fab.open .cmd-fab-arrow {
    transform: rotate(180deg);
  }

  /* 相手ターン時 */
  .cmd-fab.cpu-turn {
    opacity: 0.75;
    border-color: rgba(120, 160, 190, 0.6);
    background:
      radial-gradient(circle at 50% 50%, #1c3548 0%, #0d1e2b 55%, #050e16 100%);
    box-shadow:
      0 0 10px rgba(120, 160, 190, 0.35),
      0 6px 14px rgba(0, 0, 0, 0.8);
  }

  .cmd-fab.cpu-turn::after {
    display: none;
  }

  .cmd-fab.cpu-turn .cmd-fab-badge {
    background: linear-gradient(180deg, #6c8a9e, #3a5263);
    color: #ffffff;
    box-shadow: none;
  }

  /* ---- コマンドメニューボタン（展開カプセル） ---- */
  .cmd-menu-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 160px;
    height: 46px;
    padding: 3px 14px 3px 5px;
    border-radius: 9999px;
    border: 2px solid #00f0ff;
    background:
      linear-gradient(135deg, rgba(8, 64, 92, 0.92) 0%, rgba(3, 30, 48, 0.95) 55%, rgba(1, 14, 24, 0.98) 100%);
    box-shadow:
      0 0 14px rgba(0, 240, 255, 0.75),
      0 0 28px rgba(0, 240, 255, 0.28),
      inset 0 0 12px rgba(0, 240, 255, 0.25),
      inset 0 1.5px 3px rgba(255, 255, 255, 0.6),
      0 6px 16px rgba(0, 0, 0, 0.85);
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    user-select: none;
    outline: none;
  }

  /* 上部ガラスハイライト */
  .cmd-menu-btn::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    height: 16px;
    border-radius: 16px 16px 8px 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* 左側の丸型アイコンプレート */
  .cmd-menu-btn .btn-icon-wrap {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 240, 255, 0.85);
    background: radial-gradient(circle at 40% 35%, rgba(0, 240, 255, 0.35) 0%, rgba(4, 25, 40, 0.8) 100%);
    box-shadow:
      0 0 10px rgba(0, 240, 255, 0.6),
      inset 0 0 8px rgba(0, 240, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .cmd-menu-btn .btn-icon {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  }

  /* カプセル内のテキストレイアウト */
  .cmd-menu-btn .btn-text-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    z-index: 2;
    text-align: center;
  }

  .cmd-menu-btn .btn-sub {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #3ee0ff;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.85);
    white-space: nowrap;
  }

  .cmd-menu-btn .btn-label {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    font-size: 14.5px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000,
      0 2px 4px rgba(0, 0, 0, 0.9),
      0 0 12px rgba(0, 240, 255, 0.65);
    white-space: nowrap;
  }

  .cmd-menu-btn:hover,
  .cmd-menu-btn:focus-visible {
    transform: translateX(-3px) scale(1.03);
    box-shadow:
      0 0 22px rgba(0, 240, 255, 1),
      0 0 40px rgba(0, 240, 255, 0.5),
      inset 0 0 16px rgba(0, 240, 255, 0.35),
      inset 0 2px 4px rgba(255, 255, 255, 0.8),
      0 8px 20px rgba(0, 0, 0, 0.9);
    border-color: #7ef2ff;
  }

  .cmd-menu-btn:active {
    transform: scale(0.96);
  }

  .cmd-menu-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.6) brightness(0.7);
    box-shadow: none;
  }

  .cmd-menu-btn.primary {
    border-color: #00f0ff;
    box-shadow:
      0 0 18px rgba(0, 240, 255, 0.9),
      0 0 36px rgba(0, 240, 255, 0.4),
      inset 0 0 14px rgba(0, 240, 255, 0.35),
      inset 0 1.5px 3px rgba(255, 255, 255, 0.7),
      0 6px 16px rgba(0, 0, 0, 0.85);
  }

  /* ---- レスポンシブ配置調整 ---- */
  @media (min-width: 860px) {
    #command-bar {
      right: 0;
      top: 96%;
      transform: translateY(-50%);
      padding-right: 8px;
    }

    .cmd-fab {
      width: 60px;
      height: 60px;
    }

    .cmd-menu-btn {
      width: 168px;
      height: 48px;
    }

    .cmd-menu-btn .btn-label {
      font-size: 15px;
    }

    .cmd-menu-btn .btn-sub {
      font-size: 9.5px;
    }
  }

  @media (max-width: 859px) {
    #command-bar {
      right: 0;
      top: 96%;
      transform: translateY(-50%);
      padding-right: 5px;
    }

    .cmd-fab {
      width: 54px;
      height: 54px;
    }

    .cmd-fab-arrow {
      width: 30px;
      height: 30px;
    }

    .cmd-menu-btn {
      width: 148px;
      height: 44px;
    }

    .cmd-menu-btn .btn-label {
      font-size: 13.5px;
    }

    .cmd-menu-btn .btn-sub {
      font-size: 8.5px;
    }
  }

  /* ========== 自分で操作モード：モバイルでの循環ボタン固定表示 ==========
     手札ゾーンが画面下部に fixed 固定されているため、コマンドバーが
     手札の下に隠れてしまう問題を解消する。
     manual-mode 時はコマンドバーごと fixed で手札の真上に固定する。 */
  @media (max-width: 859px) {
    body.manual-mode #command-bar {
      position: fixed;
      right: 0;
      padding-right: 5px;
      bottom: calc(152px + env(safe-area-inset-bottom, 0px));
      top: auto;
      transform: none;
      z-index: 50;
    }
  }

  /* ========== 自分で操作モード：デスクトップでのコマンドバー固定表示 ==========
     デスクトップではボードが縦にスクロールすることがあり、コマンドバーが
     スクロールで視界外に消えてしまう問題を解消する。
     position: fixed で画面右端・垂直中央に固定する。 */
  @media (min-width: 860px) {
    body.manual-mode #command-bar {
      position: fixed;
      right: 0;
      padding-right: 8px;
      top: 50%;
      transform: translateY(-50%);
      bottom: auto;
      z-index: 60;
    }
  }

  /* ==================== NATURE THEME (自然・芝生コース画面全体テーマ) ==================== */
  body.field-nature,
  body[data-theme="nature"],
  body.field-classic,
  body[data-theme="classic"] {
    --rail: #f4f0e6;
    --rail-dim: rgba(244, 240, 230, 0.85);
  }

  /* 画面全体のフィールドマットを完全透明化し、背後の動く3D背景とカード枠のみを表示 */
  body.field-nature .field-splash-bg,
  body[data-theme="nature"] .field-splash-bg,
  body.field-classic .field-splash-bg {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  body.field-nature .field-splash-bg::before,
  body[data-theme="nature"] .field-splash-bg::before,
  body.field-classic .field-splash-bg::before {
    display: none !important;
  }

  body.field-nature .field-splash-canvas,
  body[data-theme="nature"] .field-splash-canvas,
  body.field-classic .field-splash-canvas {
    display: none !important;
  }

  /* プレイヤー側スロット：透明背景にエメラルドグリーンの光る枠線のみ表示 */
  body.field-nature #zone-farm .farm-pile,
  body.field-nature #zone-field .field-body,
  body.field-nature .lane,
  body[data-theme="nature"] #zone-farm .farm-pile,
  body[data-theme="nature"] #zone-field .field-body,
  body[data-theme="nature"] .lane,
  body.field-classic #zone-farm .farm-pile,
  body.field-classic #zone-field .field-body,
  body.field-classic .lane {
    border: 1.5px solid #34d399 !important;
    background: rgba(4, 28, 14, 0.28) !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4), inset 0 0 10px rgba(52, 211, 153, 0.15) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.field-nature .lane-card-back,
  body[data-theme="nature"] .lane-card-back,
  body.field-classic .lane-card-back {
    border: 1.5px solid #34d399 !important;
    background-image: var(--card-back-image) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.45) !important;
  }

  /* プレイヤー側山札ラベル・バッジ */
  body.field-nature .lane-label,
  body[data-theme="nature"] .lane-label,
  body.field-classic .lane-label {
    background: rgba(6, 20, 10, 0.88) !important;
    color: #ffe082 !important;
    border: 1px solid #34d399 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    font-weight: 700 !important;
  }

  body.field-nature .lane.active .lane-label,
  body[data-theme="nature"] .lane.active .lane-label,
  body.field-classic .lane.active .lane-label {
    background: linear-gradient(135deg, #15803d, #047857) !important;
    color: #ffffff !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.7) !important;
  }

  body.field-nature .lane-badge,
  body.field-nature #farm-count,
  body[data-theme="nature"] .lane-badge,
  body[data-theme="nature"] #farm-count,
  body.field-classic .lane-badge,
  body.field-classic #farm-count {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-color: #fde68a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  }

  body.field-nature .slot-bracket,
  body[data-theme="nature"] .slot-bracket,
  body.field-classic .slot-bracket {
    border-color: #34d399 !important;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.8) !important;
  }

  /* 相手側スロット：透明背景にクリムゾンレッドの光る枠線のみ表示 */
  body.field-nature #zone-opp-farm .farm-pile,
  body.field-nature #zone-field .field-body-opp,
  body.field-nature .opp-lane,
  body[data-theme="nature"] #zone-opp-farm .farm-pile,
  body[data-theme="nature"] #zone-field .field-body-opp,
  body[data-theme="nature"] .opp-lane,
  body.field-classic #zone-opp-farm .farm-pile,
  body.field-classic #zone-field .field-body-opp,
  body.field-classic .opp-lane {
    border: 1.5px solid #f87171 !important;
    background: rgba(38, 8, 14, 0.28) !important;
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.4), inset 0 0 10px rgba(248, 113, 113, 0.15) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.field-nature .opp-lane .lane-card-back,
  body[data-theme="nature"] .opp-lane .lane-card-back,
  body.field-classic .opp-lane .lane-card-back {
    border: 1.5px solid #f87171 !important;
    background-image: var(--card-back-image) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.45) !important;
  }

  body.field-nature .opp-lane .lane-label,
  body[data-theme="nature"] .opp-lane .lane-label,
  body.field-classic .opp-lane .lane-label {
    background: rgba(42, 10, 14, 0.88) !important;
    color: #fca5a5 !important;
    border: 1px solid #f87171 !important;
    font-weight: 700 !important;
  }

  body.field-nature .opp-lane.active .lane-label,
  body[data-theme="nature"] .opp-lane.active .lane-label,
  body.field-classic .opp-lane.active .lane-label {
    background: linear-gradient(135deg, #be123c, #9f1239) !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.7) !important;
  }

  body.field-nature .opp-lane .lane-badge,
  body.field-nature #opp-farm-count,
  body[data-theme="nature"] .opp-lane .lane-badge,
  body[data-theme="nature"] #opp-farm-count,
  body.field-classic .opp-lane .lane-badge,
  body.field-classic #opp-farm-count {
    background: linear-gradient(135deg, #e11d48, #9f1239) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  }

  body.field-nature .slot-frame-opp .slot-bracket,
  body[data-theme="nature"] .slot-frame-opp .slot-bracket,
  body.field-classic .slot-frame-opp .slot-bracket {
    border-color: #f87171 !important;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.6) !important;
  }

  /* 相手ストリップ（自然テーマ調） */
  body.field-nature .opponent-strip,
  body[data-theme="nature"] .opponent-strip,
  body.field-classic .opponent-strip {
    background: linear-gradient(90deg, rgba(8, 26, 14, 0.94) 0%, rgba(14, 40, 22, 0.90) 50%, rgba(8, 26, 14, 0.94) 100%) !important;
    border-color: rgba(227, 178, 60, 0.5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  }

  body.field-nature .opponent-name,
  body[data-theme="nature"] .opponent-name,
  body.field-classic .opponent-name {
    color: #ffe082 !important;
  }

  body.field-nature .opponent-sub,
  body[data-theme="nature"] .opponent-sub,
  body.field-classic .opponent-sub {
    color: #a7f3d0 !important;
  }

  body.field-nature .opponent-hand-area,
  body[data-theme="nature"] .opponent-hand-area,
  body.field-classic .opponent-hand-area {
    color: #f4f0e6 !important;
  }

  body.field-nature .opponent-hand-area .count,
  body[data-theme="nature"] .opponent-hand-area .count,
  body.field-classic .opponent-hand-area .count {
    color: #34d399 !important;
  }

  body.field-nature .opponent-bubble,
  body[data-theme="nature"] .opponent-bubble,
  body.field-classic .opponent-bubble {
    background: rgba(8, 28, 14, 0.95) !important;
    border: 1.5px solid rgba(227, 178, 60, 0.7) !important;
    color: #f4f0e6 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  }

  /* トップバー・トラックバー（自然テーマ調） */
  body.field-nature .topbar,
  body[data-theme="nature"] .topbar,
  body.field-classic .topbar {
    background: linear-gradient(180deg, rgba(8, 24, 12, 0.96) 0%, rgba(10, 30, 16, 0.90) 100%) !important;
    border-bottom: 1px solid rgba(227, 178, 60, 0.45) !important;
  }

  body.field-nature .brand,
  body[data-theme="nature"] .brand,
  body.field-classic .brand {
    color: #ffe082 !important;
    text-shadow: 0 0 10px rgba(227, 178, 60, 0.5) !important;
  }

  body.field-nature .brand span,
  body[data-theme="nature"] .brand span,
  body.field-classic .brand span {
    color: #a7f3d0 !important;
  }

  body.field-nature .track,
  body[data-theme="nature"] .track,
  body.field-classic .track {
    background: rgba(6, 18, 10, 0.88) !important;
    border-color: rgba(227, 178, 60, 0.45) !important;
  }

  body.field-nature .track-fill,
  body[data-theme="nature"] .track-fill,
  body.field-classic .track-fill {
    background: linear-gradient(90deg, #10b981, #e3b23c) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.75) !important;
  }

  body.field-nature .track-badge,
  body[data-theme="nature"] .track-badge,
  body.field-classic .track-badge {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(16, 185, 129, 0.65) !important;
    color: #6ee7b7 !important;
  }

  body.field-nature .settings-gear,
  body[data-theme="nature"] .settings-gear,
  body.field-classic .settings-gear {
    border-color: rgba(227, 178, 60, 0.5) !important;
    background: rgba(14, 38, 20, 0.85) !important;
    color: #ffe082 !important;
  }

  /* 設定パネル（自然テーマ調） */
  body.field-nature .settings-panel,
  body[data-theme="nature"] .settings-panel,
  body.field-classic .settings-panel {
    background: linear-gradient(180deg, rgba(12, 34, 18, 0.98) 0%, rgba(8, 24, 12, 0.98) 100%) !important;
    border: 1.5px solid rgba(227, 178, 60, 0.5) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.25) !important;
  }

  body.field-nature .settings-title,
  body[data-theme="nature"] .settings-title,
  body.field-classic .settings-title {
    color: #ffe082 !important;
  }

  body.field-nature .settings-close,
  body[data-theme="nature"] .settings-close,
  body.field-classic .settings-close {
    border-color: rgba(227, 178, 60, 0.45) !important;
    color: #ffe082 !important;
  }

  body.field-nature .settings-tab-btn.active,
  body[data-theme="nature"] .settings-tab-btn.active,
  body.field-classic .settings-tab-btn.active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
  }

  body.field-nature .theme-switch,
  body.field-nature .mode-switch,
  body[data-theme="nature"] .theme-switch,
  body[data-theme="nature"] .mode-switch,
  body.field-classic .theme-switch,
  body.field-classic .mode-switch {
    background: rgba(6, 20, 10, 0.90) !important;
    border-color: rgba(227, 178, 60, 0.45) !important;
  }

  body.field-nature .preset-btn,
  body.field-nature .settings-reset,
  body.field-nature .settings-bgm-toggle,
  body[data-theme="nature"] .preset-btn,
  body[data-theme="nature"] .settings-reset,
  body[data-theme="nature"] .settings-bgm-toggle,
  body.field-classic .preset-btn,
  body.field-classic .settings-reset,
  body.field-classic .settings-bgm-toggle {
    border-color: rgba(227, 178, 60, 0.4) !important;
    background: rgba(14, 38, 20, 0.85) !important;
    color: #f4f0e6 !important;
  }

  body.field-nature .preset-btn.active,
  body[data-theme="nature"] .preset-btn.active,
  body.field-classic .preset-btn.active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
  }

  /* コマンドバー＆ボタン（自然テーマ調） */
  body.field-nature .cmd-menu-btn,
  body[data-theme="nature"] .cmd-menu-btn,
  body.field-classic .cmd-menu-btn {
    background: linear-gradient(135deg, rgba(14, 52, 28, 0.94) 0%, rgba(8, 32, 16, 0.96) 55%, rgba(4, 18, 8, 0.98) 100%) !important;
    border-color: #e3b23c !important;
    box-shadow: 0 0 14px rgba(227, 178, 60, 0.65), 0 0 28px rgba(74, 222, 128, 0.25), inset 0 0 12px rgba(74, 222, 128, 0.25), 0 6px 16px rgba(0, 0, 0, 0.85) !important;
  }

  body.field-nature .cmd-menu-btn .btn-sub,
  body[data-theme="nature"] .cmd-menu-btn .btn-sub,
  body.field-classic .cmd-menu-btn .btn-sub {
    color: #e3b23c !important;
    text-shadow: 0 0 6px rgba(227, 178, 60, 0.8) !important;
  }

  body.field-nature .cmd-menu-btn .btn-icon-wrap,
  body[data-theme="nature"] .cmd-menu-btn .btn-icon-wrap,
  body.field-classic .cmd-menu-btn .btn-icon-wrap {
    border-color: rgba(227, 178, 60, 0.85) !important;
    background: radial-gradient(circle at 40% 35%, rgba(227, 178, 60, 0.35) 0%, rgba(10, 36, 18, 0.85) 100%) !important;
    box-shadow: 0 0 10px rgba(227, 178, 60, 0.6) !important;
  }

  body.field-nature .cmd-fab,
  body[data-theme="nature"] .cmd-fab,
  body.field-classic .cmd-fab {
    background: radial-gradient(circle at 45% 28%, rgba(74, 222, 128, 0.35) 0%, transparent 60%), radial-gradient(circle at 50% 50%, #154522 0%, #0c2d16 55%, #051409 100%) !important;
    border-color: #e3b23c !important;
    box-shadow: 0 0 20px rgba(227, 178, 60, 0.65), 0 8px 24px rgba(0, 0, 0, 0.8) !important;
  }

  body.field-nature .cmd-fab-badge,
  body[data-theme="nature"] .cmd-fab-badge,
  body.field-classic .cmd-fab-badge {
    background: linear-gradient(180deg, #10b981, #047857) !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8) !important;
  }

  /* ==================== RACETRACK THEME (競馬場・本馬場コーステーマ) ==================== */
  body.field-racetrack,
  body[data-theme="racetrack"] {
    --rail: #ffffff;
    --rail-dim: rgba(255, 255, 255, 0.85);
    background-color: #06140b;
    background: #06140b !important;
  }

  body.field-racetrack #three-bg,
  body[data-theme="racetrack"] #three-bg {
    display: block !important;
    opacity: 1 !important;
    z-index: -1;
    pointer-events: none;
  }

  /* フィールドマット：競馬場本馬場のターフとダートを融合した美しいコースデザイン */
  body.field-racetrack .field-splash-bg,
  body[data-theme="racetrack"] .field-splash-bg {
    display: block !important;
    background:
      linear-gradient(90deg,
        rgba(50, 32, 16, 0.35) 0%,
        rgba(10, 42, 22, 0.50) 14%,
        rgba(14, 52, 28, 0.55) 50%,
        rgba(10, 42, 22, 0.50) 86%,
        rgba(50, 32, 16, 0.35) 100%
      ),
      radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.22) 0%, rgba(5, 20, 11, 0.6) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow:
      0 0 24px rgba(16, 185, 129, 0.35),
      0 12px 36px rgba(0, 0, 0, 0.75),
      inset 0 0 28px rgba(245, 158, 11, 0.15) !important;
    border-radius: 18px !important;
  }

  body.field-racetrack .field-splash-canvas,
  body[data-theme="racetrack"] .field-splash-canvas {
    display: block !important;
    opacity: 0.65;
  }

  /* プレイヤー側スロット：ホワイトレール（ラチ）とエメラルドターフの立体枠 */
  body.field-racetrack #zone-farm .farm-pile,
  body.field-racetrack #zone-field .field-body,
  body.field-racetrack .lane,
  body[data-theme="racetrack"] #zone-farm .farm-pile,
  body[data-theme="racetrack"] #zone-field .field-body,
  body[data-theme="racetrack"] .lane {
    border: 1.5px solid #ffffff !important;
    background: rgba(8, 36, 19, 0.42) !important;
    box-shadow:
      0 0 14px rgba(255, 255, 255, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.5),
      inset 0 0 12px rgba(16, 185, 129, 0.25) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body.field-racetrack .lane-card-back,
  body[data-theme="racetrack"] .lane-card-back {
    border: 1.5px solid #ffffff !important;
    background-image: var(--card-back-image) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.45) !important;
  }

  /* 山札ラベル：競馬場の発走枠番・ゲート標識スタイル */
  body.field-racetrack .lane-label,
  body[data-theme="racetrack"] .lane-label {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    color: #f8fafc !important;
    border: 1.5px solid #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  }

  body.field-racetrack .lane.active .lane-label,
  body[data-theme="racetrack"] .lane.active .lane-label {
    background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    border-color: #fde047 !important;
    box-shadow: 0 0 16px rgba(253, 224, 71, 0.75), 0 2px 6px rgba(0, 0, 0, 0.7) !important;
  }

  body.field-racetrack .lane-badge,
  body.field-racetrack #farm-count,
  body[data-theme="racetrack"] .lane-badge,
  body[data-theme="racetrack"] #farm-count {
    background: linear-gradient(135deg, #fef08a, #eab308) !important;
    color: #1e1b4b !important;
    border: 1.5px solid #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(234, 179, 8, 0.6) !important;
  }

  /* 相手側スロット */
  body.field-racetrack #zone-opp-farm .farm-pile,
  body.field-racetrack #zone-field .field-body-opp,
  body.field-racetrack .opp-lane,
  body[data-theme="racetrack"] #zone-opp-farm .farm-pile,
  body[data-theme="racetrack"] #zone-field .field-body-opp,
  body[data-theme="racetrack"] .opp-lane {
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    background: rgba(30, 20, 10, 0.38) !important;
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.25),
      inset 0 0 10px rgba(217, 119, 6, 0.2) !important;
  }

  body.field-racetrack .opp-lane .lane-label,
  body[data-theme="racetrack"] .opp-lane .lane-label {
    background: rgba(15, 23, 42, 0.90) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
  }

  body.field-racetrack .opp-lane.active .lane-label,
  body[data-theme="racetrack"] .opp-lane.active .lane-label {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%) !important;
    color: #fef3c7 !important;
    border-color: #fde047 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6) !important;
  }

  body.field-racetrack .opp-lane .lane-badge,
  body.field-racetrack #opp-farm-count,
  body[data-theme="racetrack"] .opp-lane .lane-badge,
  body[data-theme="racetrack"] #opp-farm-count {
    background: linear-gradient(135deg, #fed7aa, #f97316) !important;
    color: #431407 !important;
    border: 1px solid #ffffff !important;
    font-weight: 900 !important;
  }

  /* 相手アバター帯 */
  body.field-racetrack .opponent-strip,
  body[data-theme="racetrack"] .opponent-strip {
    background: linear-gradient(180deg, rgba(8, 28, 15, 0.92) 0%, rgba(3, 15, 8, 0.96) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), 0 0 12px rgba(16, 185, 129, 0.25) !important;
  }

  body.field-racetrack .opponent-name,
  body[data-theme="racetrack"] .opponent-name {
    color: #f8fafc !important;
    font-weight: 800 !important;
  }

  body.field-racetrack .opponent-sub,
  body[data-theme="racetrack"] .opponent-sub {
    color: #a7f3d0 !important;
  }

  /* トップバー・操作UI */
  body.field-racetrack .topbar,
  body[data-theme="racetrack"] .topbar {
    background: linear-gradient(180deg, rgba(5, 18, 10, 0.94) 0%, rgba(2, 10, 5, 0.88) 100%) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  }

  body.field-racetrack .track,
  body[data-theme="racetrack"] .track {
    background: rgba(10, 36, 18, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  }

  body.field-racetrack .track-fill,
  body[data-theme="racetrack"] .track-fill {
    background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #fde047 100%) !important;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.8) !important;
  }

  body.field-racetrack .track-badge,
  body[data-theme="racetrack"] .track-badge {
    background: rgba(4, 20, 10, 0.95) !important;
    color: #fde047 !important;
    border: 1px solid rgba(253, 224, 71, 0.7) !important;
  }

  body.field-racetrack .theme-opt[data-theme="racetrack"].active,
  body[data-theme="racetrack"] .theme-opt[data-theme="racetrack"].active {
    background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    border-color: #fde047 !important;
    box-shadow: 0 0 12px rgba(253, 224, 71, 0.6) !important;
  }

  body.field-racetrack .cmd-menu-btn,
  body[data-theme="racetrack"] .cmd-menu-btn {
    border-color: rgba(255, 255, 255, 0.75) !important;
    background: linear-gradient(180deg, #0e351d 0%, #061c0e 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  }

  body.field-racetrack .cmd-fab,
  body[data-theme="racetrack"] .cmd-fab {
    background: radial-gradient(circle at 45% 28%, rgba(52, 211, 153, 0.35) 0%, transparent 60%), radial-gradient(circle at 50% 50%, #114422 0%, #092613 60%, #031007 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.8) !important;
  }

  body.field-racetrack .cmd-fab-badge,
  body[data-theme="racetrack"] .cmd-fab-badge {
    background: linear-gradient(180deg, #10b981, #047857) !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
  }

  /* ==================== CYBER 3D THEME (元々の3D電脳空間パース・フロア＆天井グリッド) ==================== */
  body.theme-cyber,
  body[data-theme="cyber"] {
    background-color: #000108;
    background: #000108 !important;
  }

  body.theme-cyber #three-bg,
  body[data-theme="cyber"] #three-bg {
    display: block !important;
    opacity: 1 !important;
    z-index: -1;
    pointer-events: none;
  }

  /* 3D電脳グリッドを盤面下まで透過して奥行きを広げる */
  body.theme-cyber .field-splash-bg,
  body[data-theme="cyber"] .field-splash-bg {
    display: none !important;
  }

  body.theme-cyber .field-image-wrap,
  body[data-theme="cyber"] .field-image-wrap {
    background: transparent !important;
  }

  /* 3Dサイバースロット枠（シアンの発光ブラケット） */
  body.theme-cyber .lane,
  body.theme-cyber .field-body,
  body.theme-cyber .farm-pile,
  body.theme-cyber .zone-body,
  body[data-theme="cyber"] .lane,
  body[data-theme="cyber"] .field-body,
  body[data-theme="cyber"] .farm-pile,
  body[data-theme="cyber"] .zone-body {
    border: 1px solid rgba(0, 240, 255, 0.75) !important;
    background: rgba(2, 16, 32, 0.35) !important;
    box-shadow: inset 0 0 14px rgba(0, 240, 255, 0.2), 0 0 10px rgba(0, 240, 255, 0.3) !important;
  }

  body.theme-cyber .slot-bracket,
  body[data-theme="cyber"] .slot-bracket {
    border-color: #00f0ff !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.8) !important;
  }

  body.theme-cyber .lane-label,
  body[data-theme="cyber"] .lane-label {
    background: rgba(1, 10, 22, 0.92) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(0, 240, 255, 0.6) !important;
  }

  body.theme-cyber .lane-badge,
  body[data-theme="cyber"] .lane-badge {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5) !important;
  }

/* =====================================================================
   PRO JAPANESE GAME UI: ポップアップ＆バナー＆カードテキスト枠
   日本の本格派TCG/ソシャゲ基準：重厚な黒漆/ダークアビス基調、ゴールド＆シアン二重枠、
   立体メタリックゴールド見出し、ルミナスシルバー本文、立体ゴールドボタン
   ===================================================================== */
:root {
  --bubble-bg: linear-gradient(180deg, rgba(14, 23, 40, 0.97) 0%, rgba(6, 11, 20, 0.98) 100%);
  --bubble-border: 1.5px solid rgba(245, 208, 100, 0.8);
  --bubble-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 28px rgba(227, 178, 60, 0.3),
    inset 0 0 0 1px rgba(56, 189, 248, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --bubble-text: #f1f5f9;
  --bubble-accent: #ffd859;
}

/* ---- 確認ポップアップ（走破サポート／状況カード／ガード／相手思考／案内／走破馬選択） ---- */
body #guard-popup .popup-box,
body #run-support-popup .popup-box,
body #run-select-horse-popup .popup-box,
body #situation-hint-popup .popup-box,
body #farm-confirm-popup .popup-box,
body #opponent-thinking-popup .popup-box,
body #notice-action-popup .popup-box,
body.field-white #guard-popup .popup-box,
body.field-cyber.field-white #guard-popup .popup-box {
  background: linear-gradient(180deg, rgba(14, 23, 42, 0.97) 0%, rgba(6, 11, 22, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 208, 100, 0.85) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.95),
    0 0 32px rgba(227, 178, 60, 0.28),
    inset 0 0 0 1px rgba(56, 189, 248, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f1f5f9 !important;
  padding: 24px 26px 22px !important;
  position: relative !important;
  overflow: visible !important;
}

/* ポップアップの四隅にプロゲーム特有の内側装飾ライン */
body #guard-popup .popup-box::before,
body #run-support-popup .popup-box::before,
body #run-select-horse-popup .popup-box::before,
body #situation-hint-popup .popup-box::before,
body #farm-confirm-popup .popup-box::before,
body #opponent-thinking-popup .popup-box::before,
body #notice-action-popup .popup-box::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  pointer-events: none;
}

/* タイトル：上質なメタリックゴールドの輝き＋ディバイダー装飾 */
body #guard-popup .popup-title,
body #run-support-popup .popup-title,
body #run-select-horse-popup .popup-title,
body #situation-hint-popup .popup-title,
body #farm-confirm-popup .popup-title,
body #opponent-thinking-popup .popup-title,
body #notice-action-popup .popup-title,
body.field-white #guard-popup .popup-title {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: 0.1em !important;
  text-align: center;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffeaa7 30%, #ffd043 70%, #d49200 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(251, 191, 36, 0.5)) !important;
  position: relative;
}

/* タイトル下のアートライン・ディバイダー */
body #guard-popup .popup-title::after,
body #run-support-popup .popup-title::after,
body #run-select-horse-popup .popup-title::after,
body #situation-hint-popup .popup-title::after,
body #farm-confirm-popup .popup-title::after,
body #opponent-thinking-popup .popup-title::after,
body #notice-action-popup .popup-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 208, 100, 0.9) 50%, transparent 100%);
}

/* 本文テキスト：視認性の高いルミナスシルバー、十分な行間と引き締まった文字間隔 */
body #guard-popup .popup-desc,
body #run-support-popup .popup-desc,
body #run-select-horse-popup .popup-desc,
body #situation-hint-popup .popup-desc,
body #farm-confirm-popup .popup-desc,
body #opponent-thinking-popup .popup-desc,
body #notice-action-popup .popup-desc,
body.field-white #guard-popup .popup-desc {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 12px;
  text-align: center;
}

/* ポップアップ内リード文（主要な指示・問いかけ） */
body .popup-box .popup-lead {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 6px !important;
  line-height: 1.5 !important;
}

/* ポップアップ内補足説明文（注釈やルールの補足） */
body .popup-box .popup-subtext {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.025em !important;
  margin-top: 4px !important;
}

/* ポップアップ内ステータス・内訳バー */
body .popup-box .popup-stat-row {
  margin: 6px 0 !important;
  font-size: 13.5px !important;
  color: #cbd5e1 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

body .popup-box .popup-breakdown {
  margin: 8px auto !important;
  padding: 6px 14px !important;
  background: rgba(15, 28, 48, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 8px !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  box-shadow: inset 0 0 10px rgba(2, 132, 199, 0.2) !important;
}

body .popup-box .popup-highlight-value {
  color: #38bdf8 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
  margin-left: 2px !important;
}

body .popup-box .popup-highlight-title {
  display: block !important;
  font-size: 15px !important;
  color: #f8fafc !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* 強調文字・カード名（例: 「ゴールドシップ」）：シアン/ゴールドのネオンバッジスタイル */
body #guard-popup .popup-desc b,
body #guard-popup .popup-desc strong,
body #run-support-popup .popup-desc b,
body #run-select-horse-popup .popup-desc b,
body #situation-hint-popup .popup-desc b,
body #opponent-thinking-popup .popup-desc b,
body #notice-action-popup .popup-desc b {
  color: #38bdf8 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
  padding: 2px 7px;
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
}

/* ポップアップ内のステータス等のプレート */
body .popup-box div[style*="background:rgba(227,178,60"],
body .popup-box div[style*="background: rgba(227,178,60"],
body .popup-box div[style*="background:rgba(2, 132, 199"],
body .popup-box div[style*="background: rgba(2, 132, 199"],
body .popup-box div[style*="background:rgba(2,132,199"] {
  background: rgba(15, 28, 48, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  box-shadow: inset 0 0 14px rgba(2, 132, 199, 0.25) !important;
}

body .popup-box [style*="color:var(--rail-dim)"],
body .popup-box [style*="color: var(--rail-dim)"] {
  color: #94a3b8 !important;
}

body .popup-box [style*="color:var(--gold-2)"],
body .popup-box [style*="color: var(--gold-2)"],
body .popup-box [style*="color: var(--gold)"] {
  color: #ffd859 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5) !important;
}

/* 主ボタン（決定・馬カードを選ぶ・はい）：ゴールド立体グラデーション */
body #guard-popup .btn-guard,
body #run-support-popup .btn-guard,
body #run-select-horse-popup .btn-guard,
body #situation-hint-popup .btn-guard,
body #farm-confirm-popup .btn-guard,
body #notice-action-popup .btn-guard,
body .closeup-action-btn.btn-guard {
  background: linear-gradient(180deg, #fff2cc 0%, #ffd859 35%, #f59e0b 70%, #d97706 100%) !important;
  color: #261600 !important;
  border: 1.5px solid #fffbeb !important;
  border-radius: 10px !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.65),
    0 0 18px rgba(245, 158, 11, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-weight: 900 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.05em !important;
  padding: 10px 24px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

body #guard-popup .btn-guard:hover,
body #run-support-popup .btn-guard:hover,
body #run-select-horse-popup .btn-guard:hover,
body #situation-hint-popup .btn-guard:hover,
body #farm-confirm-popup .btn-guard:hover,
body #notice-action-popup .btn-guard:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(245, 158, 11, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

body #guard-popup .btn-guard:active,
body #run-support-popup .btn-guard:active,
body #run-select-horse-popup .btn-guard:active,
body #situation-hint-popup .btn-guard:active,
body #farm-confirm-popup .btn-guard:active,
body #notice-action-popup .btn-guard:active {
  transform: translateY(1px) scale(0.98);
}

/* 副ボタン（キャンセル・使わない・いいえ）：重厚なダークスレート＋シルバー枠 */
body #guard-popup .btn-skip,
body #run-support-popup .btn-skip,
body #run-select-horse-popup .btn-skip,
body #situation-hint-popup .btn-skip,
body #farm-confirm-popup .btn-skip {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  color: #cbd5e1 !important;
  border: 1.5px solid rgba(148, 163, 184, 0.5) !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.04em !important;
  padding: 10px 24px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease !important;
}

body #guard-popup .btn-skip:hover,
body #run-support-popup .btn-skip:hover,
body #run-select-horse-popup .btn-skip:hover,
body #situation-hint-popup .btn-skip:hover,
body #farm-confirm-popup .btn-skip:hover {
  background: linear-gradient(180deg, rgba(45, 60, 85, 0.95) 0%, rgba(20, 32, 54, 0.98) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.75) !important;
  transform: translateY(-1px);
}

body #guard-popup .popup-btns,
body #run-support-popup .popup-btns,
body #run-select-horse-popup .popup-btns,
body #situation-hint-popup .popup-btns,
body #farm-confirm-popup .popup-btns,
body #notice-action-popup .popup-btns {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

body #guard-popup .popup-btns button,
body #run-support-popup .popup-btns button,
body #run-select-horse-popup .popup-btns button,
body #situation-hint-popup .popup-btns button,
body #farm-confirm-popup .popup-btns button,
body #notice-action-popup .popup-btns button {
  white-space: nowrap;
}

/* ---- 画面中央バナー（走破成功！／ガード！など） ---- */
body .banner-box,
body .banner-stage.has-card .banner-box,
body .banner-stage.has-card:not(.is-guard) .banner-box,
body .banner-stage.has-card.is-guard .banner-box {
  background: linear-gradient(180deg, rgba(14, 23, 42, 0.97) 0%, rgba(6, 11, 22, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 208, 100, 0.85) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.95),
    0 0 32px rgba(227, 178, 60, 0.35),
    inset 0 0 0 1px rgba(56, 189, 248, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 28px !important;
}

body .banner-box::before,
body .banner-box::after,
body .banner-box .banner-shine,
body .banner-stage.has-card .banner-box::before,
body .banner-stage.has-card:not(.is-guard) .banner-box::before,
body .banner-stage.has-card.is-guard .banner-box::before {
  display: none !important;
}

/* バナー内タイトル（走破成功！など）：ゴールド特大見出し */
body .banner-box .banner-box-text,
body .banner-stage.has-card .banner-box .banner-box-text,
body .banner-stage.has-card:not(.is-guard) .banner-box .banner-box-text,
body .banner-stage.has-card.is-guard .banner-box .banner-box-text {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  font-size: clamp(17px, 4.5vw, 22px) !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffeaa7 30%, #ffd043 70%, #d49200 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(251, 191, 36, 0.5)) !important;
  text-align: center;
  padding: 0 4px !important;
}

/* バナー内サブキャプション（相手（CPU）は走破に成功しました等） */
body .banner-box .banner-sub-caption,
body .banner-stage.has-card .banner-box .banner-sub-caption,
body .banner-stage.has-card:not(.is-guard) .banner-box .banner-sub-caption {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  color: #7dd3fc !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  margin-bottom: 6px !important;
  text-align: center;
}

/* バナーのタップヒント：完全非表示（削除対応） */
body .banner-box .banner-tap-hint,
body .banner-stage .banner-tap-hint,
.banner-tap-hint,
#banner-tap-hint {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- トースト通知（画面中央ポップアップ） ---- */
body .game-toast,
body.field-white .game-toast {
  background: linear-gradient(180deg, rgba(14, 23, 42, 0.97) 0%, rgba(6, 11, 22, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 208, 100, 0.8) !important;
  border-radius: 14px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(227, 178, 60, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  color: #f1f5f9 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  padding: 16px 28px !important;
  line-height: 1.6 !important;
}

/* ---- カード拡大表示（状況カード使用など）の説明・ラベル ---- */
body #closeup-layer .closeup-toast,
body.field-cyber #closeup-layer .closeup-toast {
  background: linear-gradient(180deg, rgba(14, 23, 42, 0.97) 0%, rgba(6, 11, 22, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 208, 100, 0.8) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(227, 178, 60, 0.3),
    inset 0 0 0 1px rgba(56, 189, 248, 0.2) !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.03em !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 24px !important;
}

body #closeup-layer .closeup-name-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body #closeup-layer .closeup-card-name {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  background: linear-gradient(180deg, #ffffff 0%, #ffeaa7 30%, #ffd043 70%, #d49200 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(251, 191, 36, 0.4)) !important;
}

body #closeup-layer .closeup-card-en {
  font-family: 'Orbitron', 'Oswald', sans-serif !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.08em !important;
}

body #closeup-layer .closeup-type-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(14, 165, 233, 0.16) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #38bdf8 !important;
  letter-spacing: 0.04em !important;
}

body #closeup-layer .closeup-type-badge.type-situation {
  background: rgba(168, 85, 247, 0.16) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  color: #c084fc !important;
}

body #closeup-layer .closeup-stats-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 8px 0 !important;
  padding: 6px 14px !important;
  background: rgba(15, 28, 48, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 12px rgba(2, 132, 199, 0.25) !important;
}

body #closeup-layer .closeup-stat-chip {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body #closeup-layer .chip-v {
  font-size: 15px !important;
  font-weight: 900 !important;
}

body #closeup-layer .chip-v.cost-v { color: #fbbf24 !important; }
body #closeup-layer .chip-v.run-v { color: #f43f5e !important; }
body #closeup-layer .chip-v.guard-v {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
}

body #closeup-layer .closeup-trait-row {
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-top: 4px !important;
}

body #closeup-layer .closeup-trait-row b {
  color: #ffffff !important;
  font-weight: 800 !important;
}

body #closeup-layer .closeup-effect-text {
  font-size: 13.5px !important;
  color: #f1f5f9 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin: 6px 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

body #closeup-layer .closeup-timing-hint {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  margin-top: 4px !important;
}

body #closeup-layer .closeup-tap-wrap {
  margin-top: 10px !important;
  text-align: center !important;
}

body #closeup-layer .closeup-toast b {
  color: #ffd859 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.45) !important;
}

body #closeup-layer .closeup-toast span {
  color: #cbd5e1 !important;
}

body #closeup-layer .closeup-label,
body.field-cyber #closeup-layer .closeup-label,
body.field-white .closeup-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(14, 23, 42, 0.95) 0%, rgba(6, 11, 22, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 208, 100, 0.8) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 14px rgba(227, 178, 60, 0.3) !important;
  color: #ffd859 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4) !important;
  padding: 5px 18px !important;
}

/* =====================================================================
   自分で操作モード：コマンドバーは画面に固定（傾き・倍率の影響を受けない）
   JS側で #command-bar を <body> 直下へ移動するため、3D変形（rotateX / scale）
   の外側に出て、常に同じ位置・同じ大きさで表示される。
   ===================================================================== */
body.manual-mode > #command-bar {
  position: fixed !important;
  transform: none !important;
  zoom: 1;
  z-index: 60;
}

@media (min-width: 860px) {
  body.manual-mode > #command-bar {
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 859px) {
  body.manual-mode > #command-bar {
    right: 0 !important;
    top: auto !important;
    bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =====================================================================
   NATURE v2 — 背景（深いティール／エメラルドの電脳芝コース）に溶け込むフィールド
   ゴールド枠＋緑チェックの不透明マットをやめ、半透明のエメラルドガラス＋ミント発光に統一。
   ===================================================================== */
body[data-theme="nature"] {
  --n-mint: #5eead4;
  --n-emerald: #34d399;
  --n-deep: 2, 22, 20;
  --rail: #e6fff7;
  --rail-dim: rgba(214, 250, 238, 0.85);
}

/* マット本体：背景が透けるダークガラス＋ごく薄い刈り込み縞＋上部のやわらかな光 */
body[data-theme="nature"] .field-splash-bg {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(94, 234, 212, 0.14) 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(167, 243, 208, 0.045) 0 34px, rgba(167, 243, 208, 0) 34px 68px),
    linear-gradient(180deg, rgba(var(--n-deep), 0.46) 0%, rgba(3, 30, 26, 0.58) 55%, rgba(2, 20, 18, 0.68) 100%) !important;
  border: 1.5px solid rgba(94, 234, 212, 0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 46px rgba(16, 185, 129, 0.16),
    0 0 26px rgba(16, 185, 129, 0.28),
    0 18px 40px rgba(0, 10, 8, 0.45) !important;
}
body[data-theme="nature"] .field-splash-bg::before {
  background:
    repeating-linear-gradient(0deg, rgba(94, 234, 212, 0.05) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(110, 231, 183, 0.08) 0%, transparent 40%) !important;
  opacity: 1;
}
body[data-theme="nature"] .field-splash-canvas { mix-blend-mode: screen; opacity: 0.28; }

/* 自分側スロット：エメラルドのガラス枠（ゴールド→ミント） */
body[data-theme="nature"] #zone-farm .farm-pile,
body[data-theme="nature"] #zone-field .field-body,
body[data-theme="nature"] .lane {
  border: 1.5px solid rgba(94, 234, 212, 0.65) !important;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(52, 211, 153, 0.20), transparent 68%),
    rgba(4, 38, 32, 0.42) !important;
  box-shadow: inset 0 0 16px rgba(52, 211, 153, 0.16), 0 0 10px rgba(45, 212, 191, 0.22) !important;
}
body[data-theme="nature"] .lane-card-back {
  border: 1.5px solid rgba(94, 234, 212, 0.8) !important;
  background-image: var(--card-back-image) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 10px rgba(94, 234, 212, 0.45) !important;
}
body[data-theme="nature"] .lane-label {
  background: rgba(2, 26, 23, 0.92) !important;
  color: #99f6e4 !important;
  border: 1px solid rgba(94, 234, 212, 0.6) !important;
  text-shadow: none !important;
}
body[data-theme="nature"] .lane.active .lane-label {
  background: linear-gradient(135deg, #14b8a6, #059669) !important;
  color: #fff !important;
  border-color: #99f6e4 !important;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.75) !important;
}
body[data-theme="nature"] .lane-badge,
body[data-theme="nature"] #farm-count {
  background: linear-gradient(135deg, #14b8a6, #0f766e) !important;
  border-color: #99f6e4 !important;
  color: #fff !important;
}
body[data-theme="nature"] .slot-bracket {
  border-color: #5eead4 !important;
  box-shadow: 0 0 7px rgba(94, 234, 212, 0.75) !important;
}

/* 相手側スロット：背景に馴染むローズ寄りの落ち着いた赤（区別はそのまま維持） */
body[data-theme="nature"] #zone-opp-farm .farm-pile,
body[data-theme="nature"] #zone-field .field-body-opp,
body[data-theme="nature"] .opp-lane {
  border: 1.5px solid rgba(251, 146, 160, 0.65) !important;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(244, 114, 138, 0.20), transparent 68%),
    rgba(56, 12, 28, 0.38) !important;
  box-shadow: inset 0 0 16px rgba(244, 63, 94, 0.14), 0 0 10px rgba(251, 113, 133, 0.2) !important;
}
body[data-theme="nature"] .opp-lane .lane-card-back {
  border: 1.5px solid rgba(251, 146, 160, 0.8) !important;
  background-image: var(--card-back-image) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 10px rgba(251, 146, 160, 0.45) !important;
}
body[data-theme="nature"] .opp-lane .lane-label {
  background: rgba(40, 8, 20, 0.92) !important;
  color: #fecdd3 !important;
  border: 1px solid rgba(251, 146, 160, 0.6) !important;
}
body[data-theme="nature"] .slot-frame-opp .slot-bracket {
  border-color: #fda4af !important;
  box-shadow: 0 0 7px rgba(251, 113, 133, 0.7) !important;
}

/* 周辺UI（相手バー／トップバー／トラック／設定／コマンド）：ゴールド→ミントで統一 */
body[data-theme="nature"] .opponent-strip {
  background: linear-gradient(90deg, rgba(2, 26, 23, 0.82), rgba(4, 40, 34, 0.74), rgba(2, 26, 23, 0.82)) !important;
  border-color: rgba(94, 234, 212, 0.45) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.22), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
body[data-theme="nature"] .opponent-name { color: #ccfbf1 !important; }
body[data-theme="nature"] .topbar {
  background: linear-gradient(180deg, rgba(2, 24, 21, 0.88), rgba(3, 32, 28, 0.74)) !important;
  border-bottom: 1px solid rgba(94, 234, 212, 0.4) !important;
}
body[data-theme="nature"] .brand { color: #99f6e4 !important; text-shadow: 0 0 10px rgba(45, 212, 191, 0.5) !important; }
body[data-theme="nature"] .track { background: rgba(2, 24, 21, 0.78) !important; border-color: rgba(94, 234, 212, 0.4) !important; }
body[data-theme="nature"] .track-fill {
  background: linear-gradient(90deg, #10b981, #5eead4) !important;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.7) !important;
}
body[data-theme="nature"] .settings-gear {
  border-color: rgba(94, 234, 212, 0.5) !important; background: rgba(3, 34, 30, 0.85) !important; color: #99f6e4 !important;
}
body[data-theme="nature"] .settings-panel {
  background: linear-gradient(180deg, rgba(3, 30, 27, 0.98), rgba(2, 20, 18, 0.98)) !important;
  border: 1.5px solid rgba(94, 234, 212, 0.5) !important;
}
body[data-theme="nature"] .settings-title,
body[data-theme="nature"] .settings-close { color: #99f6e4 !important; border-color: rgba(94, 234, 212, 0.45) !important; }
body[data-theme="nature"] .theme-switch,
body[data-theme="nature"] .mode-switch { background: rgba(2, 22, 19, 0.9) !important; border-color: rgba(94, 234, 212, 0.4) !important; }
body[data-theme="nature"] .preset-btn,
body[data-theme="nature"] .settings-reset,
body[data-theme="nature"] .settings-bgm-toggle { border-color: rgba(94, 234, 212, 0.4) !important; background: rgba(4, 38, 32, 0.8) !important; }
body[data-theme="nature"] .cmd-menu-btn,
body[data-theme="nature"] .cmd-fab {
  border-color: #5eead4 !important;
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.6), inset 0 0 12px rgba(52, 211, 153, 0.25), 0 6px 16px rgba(0, 0, 0, 0.7) !important;
}
body[data-theme="nature"] .cmd-menu-btn .btn-sub { color: #99f6e4 !important; text-shadow: none !important; }
body[data-theme="nature"] .cmd-menu-btn .btn-icon-wrap { border-color: #5eead4 !important; box-shadow: 0 0 10px rgba(45, 212, 191, 0.6) !important; }

/* =====================================================================
   WHITE CYBER — サイバー（電脳）白＆青ベーステーマ
   洗練されたサイバーホワイトパネルにエレクトリックブルー＆シアンの電脳光彩。
   視認性の高いディープブルーの文字と発光するブラケット。
   ===================================================================== */
html body.field-cyber.field-white,
body[data-theme="white"] {
  --w-ink: #022b52;
  --w-sub: #1e5282;
  --w-line: rgba(0, 180, 255, 0.45);
  --w-blue: #0088ff;
  --w-blue-glow: #00d2ff;
  --w-blue-soft: rgba(224, 242, 254, 0.85);
  --w-rose: #0284c7;
  --w-rose-soft: rgba(224, 242, 254, 0.75);
  --rail: #02203c;
  --rail-dim: #38bdf8;
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(0, 210, 255, 0.18), transparent 60%),
    radial-gradient(1000px 600px at 85% 10%, rgba(0, 140, 255, 0.16), transparent 55%),
    radial-gradient(1100px 800px at 50% 100%, rgba(0, 240, 255, 0.14), transparent 65%),
    linear-gradient(180deg, #f0f7ff 0%, #e2effd 50%, #d8e9fc 100%) !important;
  background-attachment: fixed !important;
  color: var(--w-ink);
}
/* 電脳サイバーの微細回路グリッド */
html body.field-cyber.field-white::before,
body[data-theme="white"]::before {
  content: '';
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(0, 160, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 160, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

html body.field-cyber.field-white .topbar,
body[data-theme="white"] .topbar {
  background: rgba(245, 251, 255, 0.90) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.5px solid rgba(0, 180, 255, 0.45) !important;
  box-shadow: 0 4px 20px rgba(0, 120, 220, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html body.field-cyber.field-white .brand,
body[data-theme="white"] .brand { color: #022b52 !important; text-shadow: 0 0 10px rgba(0, 190, 255, 0.35) !important; }
html body.field-cyber.field-white .track,
body[data-theme="white"] .track { background: rgba(200, 228, 255, 0.7) !important; border-color: rgba(0, 180, 255, 0.3) !important; }
html body.field-cyber.field-white .track-fill,
body[data-theme="white"] .track-fill {
  background: linear-gradient(90deg, #00f0ff, #0077ff) !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.6) !important;
}

/* マット本体：サイバー白＆青＋電脳グリッド＋サイバーグロー */
html body.field-cyber.field-white .field-splash-bg,
body[data-theme="white"] .field-splash-bg {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 210, 255, 0.16) 0%, rgba(0, 140, 255, 0.06) 50%, transparent 80%),
    repeating-linear-gradient(0deg, rgba(0, 160, 255, 0.12) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0, 160, 255, 0.12) 0 1px, transparent 1px 32px),
    rgba(240, 248, 255, 0.22) !important;
  border: 1.5px solid rgba(0, 180, 255, 0.65) !important;
  box-shadow:
    inset 0 0 30px rgba(0, 180, 255, 0.18),
    0 0 20px rgba(0, 190, 255, 0.25),
    0 20px 50px rgba(0, 70, 160, 0.15) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html body.field-cyber.field-white .field-splash-bg::before,
body[data-theme="white"] .field-splash-bg::before {
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0, 180, 255, 0.05) 0px,
      rgba(0, 180, 255, 0.05) 1.5px,
      transparent 1.5px,
      transparent 24px) !important;
  opacity: 0.85 !important;
}
html body.field-cyber.field-white .field-splash-canvas,
body[data-theme="white"] .field-splash-canvas { opacity: 0.65; mix-blend-mode: multiply; }

/* 自分側スロット：エレクトリック・サイバーブルー（透過グラス） */
html body.field-cyber.field-white .lane,
html body.field-cyber.field-white #zone-field .field-body,
html body.field-cyber.field-white #zone-farm .farm-pile,
html body.field-cyber.field-white .zone-body,
body[data-theme="white"] .lane,
body[data-theme="white"] #zone-field .field-body,
body[data-theme="white"] #zone-farm .farm-pile,
body[data-theme="white"] .zone-body {
  border: 1.5px solid rgba(0, 180, 255, 0.7) !important;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0, 210, 255, 0.22), transparent 65%),
    rgba(240, 248, 255, 0.35) !important;
  box-shadow: inset 0 0 14px rgba(0, 200, 255, 0.18), 0 2px 10px rgba(0, 120, 220, 0.15) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html body.field-cyber.field-white .lane-card-back,
body[data-theme="white"] .lane-card-back {
  border: 1.5px solid rgba(0, 180, 255, 0.8) !important;
  background-image: var(--card-back-image) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.4) !important;
}
html body.field-cyber.field-white .lane-label,
body[data-theme="white"] .lane-label {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #022b52 !important;
  border: 1.5px solid rgba(0, 160, 255, 0.6) !important;
  box-shadow: 0 2px 8px rgba(0, 140, 255, 0.2) !important;
  font-weight: 800 !important;
}
html body.field-cyber.field-white .lane.active .lane-label,
body[data-theme="white"] .lane.active .lane-label {
  background: linear-gradient(135deg, #0088ff, #0055cc) !important;
  color: #ffffff !important;
  border-color: #00f0ff !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.75) !important;
}
html body.field-cyber.field-white .lane-badge,
html body.field-cyber.field-white #farm-count,
body[data-theme="white"] .lane-badge,
body[data-theme="white"] #farm-count {
  background: linear-gradient(135deg, #0099ff, #0066cc) !important;
  color: #ffffff !important;
  border: 1.5px solid #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.6) !important;
}
html body.field-cyber.field-white .slot-bracket,
body[data-theme="white"] .slot-bracket {
  border-color: #00d2ff !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.8) !important;
}

/* 相手側スロット：サイバー白＆青・スカイブルーアクセント（透過グラス） */
html body.field-cyber.field-white .opp-lane,
html body.field-cyber.field-white #zone-field .field-body-opp,
html body.field-cyber.field-white #zone-opp-farm .farm-pile,
body[data-theme="white"] .opp-lane,
body[data-theme="white"] #zone-field .field-body-opp,
body[data-theme="white"] #zone-opp-farm .farm-pile {
  border: 1.5px solid rgba(2, 132, 199, 0.7) !important;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(2, 132, 199, 0.20), transparent 65%),
    rgba(240, 248, 255, 0.30) !important;
  box-shadow: inset 0 0 14px rgba(0, 140, 255, 0.15), 0 2px 10px rgba(2, 132, 199, 0.15) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html body.field-cyber.field-white .opp-lane .lane-card-back,
body[data-theme="white"] .opp-lane .lane-card-back {
  border: 1.5px solid rgba(0, 180, 255, 0.7) !important;
  background-image: var(--card-back-image) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.35) !important;
}
html body.field-cyber.field-white .opp-lane .lane-label,
body[data-theme="white"] .opp-lane .lane-label {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #034b8c !important;
  border: 1.5px solid rgba(0, 160, 255, 0.55) !important;
  box-shadow: 0 2px 8px rgba(0, 140, 255, 0.18) !important;
}
html body.field-cyber.field-white .opp-lane.active .lane-label,
body[data-theme="white"] .opp-lane.active .lane-label {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border-color: #00f0ff !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.65) !important;
}
html body.field-cyber.field-white .opp-lane .lane-badge,
html body.field-cyber.field-white #opp-farm-count,
body[data-theme="white"] .opp-lane .lane-badge,
body[data-theme="white"] #opp-farm-count {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border: 1.5px solid #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.5) !important;
}
html body.field-cyber.field-white .slot-frame-opp .slot-bracket,
body[data-theme="white"] .slot-frame-opp .slot-bracket {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.7) !important;
}

/* 相手バー・設定・ボタン類：サイバーホワイト＆エレクトリックブルー */
html body.field-cyber.field-white .opponent-strip,
body[data-theme="white"] .opponent-strip {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(235, 246, 255, 0.92) 100%) !important;
  border: 1.5px solid rgba(0, 180, 255, 0.5) !important;
  box-shadow: 0 4px 18px rgba(0, 120, 220, 0.12), 0 0 12px rgba(0, 210, 255, 0.2) !important;
}
html body.field-cyber.field-white .opponent-name,
body[data-theme="white"] .opponent-name { color: #022b52 !important; text-shadow: 0 0 8px rgba(0, 180, 255, 0.3) !important; }
html body.field-cyber.field-white .opponent-sub,
body[data-theme="white"] .opponent-sub { color: #0077dd !important; }
html body.field-cyber.field-white .opponent-hand-area,
body[data-theme="white"] .opponent-hand-area {
  background: rgba(220, 240, 255, 0.85) !important;
  border-color: rgba(0, 180, 255, 0.45) !important;
  color: #023866 !important;
}
html body.field-cyber.field-white .opponent-hand-area .count,
body[data-theme="white"] .opponent-hand-area .count {
  color: #0077ff !important;
  text-shadow: 0 0 6px rgba(0, 140, 255, 0.4) !important;
}
html body.field-cyber.field-white .settings-gear,
body[data-theme="white"] .settings-gear {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(0, 180, 255, 0.55) !important;
  color: #0066cc !important;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.25) !important;
}
html body.field-cyber.field-white .settings-panel,
body[data-theme="white"] .settings-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 255, 0.98)) !important;
  border: 1.5px solid rgba(0, 180, 255, 0.45) !important;
  box-shadow: 0 20px 60px rgba(0, 80, 180, 0.2), 0 0 20px rgba(0, 210, 255, 0.2) !important;
}
html body.field-cyber.field-white .preset-btn.active,
html body.field-cyber.field-white .settings-tab-btn.active,
body[data-theme="white"] .preset-btn.active,
body[data-theme="white"] .settings-tab-btn.active {
  background: linear-gradient(135deg, #0088ff, #0055cc) !important;
  color: #ffffff !important;
  border-color: #00f0ff !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.5) !important;
}
html body.field-cyber.field-white .cmd-menu-btn,
html body.field-cyber.field-white .cmd-fab,
body[data-theme="white"] .cmd-menu-btn,
body[data-theme="white"] .cmd-fab {
  background: linear-gradient(180deg, #ffffff, #edf6ff) !important;
  border: 1.5px solid rgba(0, 160, 255, 0.65) !important;
  color: #023866 !important;
  box-shadow: 0 6px 20px rgba(0, 100, 220, 0.2), 0 0 10px rgba(0, 210, 255, 0.2) !important;
}
html body.field-cyber.field-white .cmd-menu-btn .btn-label,
body[data-theme="white"] .cmd-menu-btn .btn-label { color: #022b52 !important; text-shadow: none !important; }
html body.field-cyber.field-white .cmd-menu-btn .btn-sub,
body[data-theme="white"] .cmd-menu-btn .btn-sub { color: #0077ff !important; text-shadow: none !important; }
html body.field-cyber.field-white .cmd-fab-badge,
body[data-theme="white"] .cmd-fab-badge {
  background: linear-gradient(135deg, #0088ff, #0055cc) !important;
  border: 1px solid #00f0ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.5) !important;
}

/* White 補正：左右の濃い影を除去し、自分側ラベルの文字を濃くして読みやすく */
html body.field-3d.field-cyber.field-white .field-image-wrap,
body[data-theme="white"].field-3d .field-image-wrap {
  box-shadow: 0 24px 40px -18px rgba(0, 100, 220, 0.25) !important;
}
html body.field-cyber.field-white .lane[data-lane] .lane-label,
body[data-theme="white"] .lane[data-lane] .lane-label {
  background: #ffffff !important;
  color: #022b52 !important;
  border: 1.5px solid rgba(0, 160, 255, 0.6) !important;
}
html body.field-cyber.field-white .lane.active[data-lane] .lane-label,
body[data-theme="white"] .lane.active[data-lane] .lane-label {
  background: linear-gradient(135deg, #0088ff, #0055cc) !important;
  color: #fff !important;
  border-color: #00f0ff !important;
}
html body.field-cyber.field-white .opp-lane[data-lane] .lane-label,
body[data-theme="white"] .opp-lane[data-lane] .lane-label {
  background: #ffffff !important;
  color: #034b8c !important;
  border: 1.5px solid rgba(0, 160, 255, 0.55) !important;
}
html body.field-cyber.field-white .opp-lane.active[data-lane] .lane-label,
body[data-theme="white"] .opp-lane.active[data-lane] .lane-label {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #fff !important;
  border-color: #00f0ff !important;
}
}


/* 「次へ」待ち受け中は画面のどこをタップ／クリックしても進む（iOS Safari の click 伝播対策） */
body.awaiting-next .app,
body.awaiting-next .app * {
  cursor: pointer;
}


/* =====================================================================
   ポップアップ調整：適度な角丸(12px)／高コントラスト文字色／文字量でも枠からはみ出さない／馬カードと重ねない
   ===================================================================== */
/* 角丸・装飾フレーム：プロ仕様の重厚な二重枠・ダークアビス背景 */
body #guard-popup .popup-box,
body #run-support-popup .popup-box,
body #run-select-horse-popup .popup-box,
body #situation-hint-popup .popup-box,
body #farm-confirm-popup .popup-box,
body #opponent-thinking-popup .popup-box,
body #notice-action-popup .popup-box,
body.field-white #guard-popup .popup-box,
body.field-cyber.field-white #guard-popup .popup-box,
body .banner-box,
body .banner-stage.has-card:not(.is-guard) .banner-box,
body .banner-stage.has-card.is-guard .banner-box,
body .game-toast,
body.field-white .game-toast,
body #closeup-layer .closeup-toast,
body.field-cyber #closeup-layer .closeup-toast {
  border-radius: 14px !important;
}

body #closeup-layer .closeup-label,
body.field-cyber #closeup-layer .closeup-label,
body.field-white .closeup-label {
  border-radius: 9999px !important;
}

/* ボタン：プロTCG基準の立体メタリックゴールド決定ボタン */
body #guard-popup .btn-guard,
body #run-support-popup .btn-guard,
body #run-select-horse-popup .btn-guard,
body #situation-hint-popup .btn-guard,
body #farm-confirm-popup .btn-guard,
body #notice-action-popup .btn-guard,
body .closeup-action-btn.btn-guard {
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fff3cb 0%, #ffd95c 30%, #f59e0b 70%, #d97706 100%) !important;
  color: #261600 !important;
  border: 1.5px solid #fffbeb !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.65),
    0 0 16px rgba(245, 158, 11, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  letter-spacing: 0.05em !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

/* キャンセル・スキップボタン：重厚なダークスレート＋シルバー枠 */
body #guard-popup .btn-skip,
body #run-support-popup .btn-skip,
body #run-select-horse-popup .btn-skip,
body #situation-hint-popup .btn-skip,
body #farm-confirm-popup .btn-skip {
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  color: #cbd5e1 !important;
  border: 1.5px solid rgba(148, 163, 184, 0.55) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  letter-spacing: 0.04em !important;
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease !important;
}

body #guard-popup .btn-guard:hover,
body #run-support-popup .btn-guard:hover,
body #run-select-horse-popup .btn-guard:hover,
body #situation-hint-popup .btn-guard:hover,
body #farm-confirm-popup .btn-guard:hover,
body #notice-action-popup .btn-guard:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.75),
    0 0 22px rgba(245, 158, 11, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

body #guard-popup .btn-skip:hover,
body #run-support-popup .btn-skip:hover,
body #run-select-horse-popup .btn-skip:hover,
body #situation-hint-popup .btn-skip:hover,
body #farm-confirm-popup .btn-skip:hover {
  background: linear-gradient(180deg, rgba(45, 60, 85, 0.96) 0%, rgba(20, 32, 54, 0.98) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
  transform: translateY(-1px);
}

/* バナー枠：文字が枠線に当たらず余裕を持って収まるようにパディングと幅を調整 */
body .banner-stage.has-card .banner-box,
body .banner-stage.has-card:not(.is-guard) .banner-box,
body .banner-stage.has-card.is-guard .banner-box,
body .banner-box {
  width: auto !important;
  min-width: min(280px, 86vw) !important;
  max-width: min(94vw, 440px) !important;
  box-sizing: border-box !important;
  padding: 14px 28px !important;
  border-radius: 14px !important;
  overflow: visible !important;
}

body .banner-box .banner-box-text,
body .banner-stage.has-card .banner-box .banner-box-text,
body .banner-stage.has-card:not(.is-guard) .banner-box .banner-box-text,
body .banner-stage.has-card.is-guard .banner-box .banner-box-text {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
  text-align: center;
  max-width: 100%;
  font-size: clamp(15px, 4vw, 19px) !important;
  letter-spacing: 0.03em !important;
  padding: 0 4px !important;
}

body .banner-box .banner-sub-caption,
body .banner-stage.has-card .banner-box .banner-sub-caption,
body .banner-stage.has-card:not(.is-guard) .banner-box .banner-sub-caption {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 13.5px !important;
  color: #7dd3fc !important;
  font-weight: 700 !important;
  text-align: center;
  margin-bottom: 6px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

/* ガード計算式（自分の走破数 − 相手のガード数）表示用HUD */
.guard-calc-formula {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin: 6px auto 10px !important;
  padding: 6px 14px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.75) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.25) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-size: clamp(11.5px, 3.4vw, 13px) !important;
  color: #f8fafc !important;
  text-shadow: none !important;
  pointer-events: none !important;
}

.guard-calc-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.guard-calc-pill b {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.3em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.guard-calc-pill.pill-run {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 205, 210, 0.7) !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.4) !important;
}

.guard-calc-pill.pill-guard {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(187, 247, 208, 0.7) !important;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.4) !important;
}

.guard-calc-pill.pill-result-win {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #fff !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 2px 12px rgba(2, 132, 199, 0.6) !important;
}

.guard-calc-pill.pill-result-lose {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
  color: #cbd5e1 !important;
  border: 1.5px solid #94a3b8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.guard-calc-op {
  font-family: 'Oswald', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #fde047 !important;
  text-shadow: 0 0 6px rgba(253, 224, 71, 0.6) !important;
  line-height: 1 !important;
  user-select: none !important;
  padding: 0 1px !important;
}

/* ポップアップ内のガード計算式ボックス */
.popup-guard-calc-box {
  margin: 6px 0 10px !important;
  padding: 10px 14px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.popup-guard-calc-box .calc-explain-lead {
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.popup-guard-calc-box .calc-explain-lead b {
  color: #38bdf8 !important;
}

/* モバイルでの日本語ワードラップ・禁則処理の徹底最適化 */
.u-nowrap,
.nobr,
.text-nowrap,
.phrase-unit {
  display: inline-block !important;
  white-space: nowrap !important;
}

body .game-toast,
body.field-white .game-toast {
  white-space: normal !important;
  min-width: min(84vw, 300px);
  max-width: min(94vw, 420px);
  text-align: center;
  box-sizing: border-box;
  line-break: strict;
  -webkit-line-break: strict;
  word-break: auto-phrase;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-wrap: pretty;
}

body #guard-popup .popup-title,
body #guard-popup .popup-desc,
body #run-support-popup .popup-desc,
body #run-select-horse-popup .popup-desc,
body #situation-hint-popup .popup-desc,
body #farm-confirm-popup .popup-desc,
body #notice-action-popup .popup-desc,
body .banner-box .banner-box-text,
body .narrator-text {
  line-break: strict;
  -webkit-line-break: strict;
  word-break: auto-phrase;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  body .game-toast,
  body.field-white .game-toast {
    padding: 11px 18px !important;
    min-width: min(86vw, 300px) !important;
    max-width: min(95vw, 390px) !important;
    font-size: clamp(14px, 4vw, 15.5px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
  }
}

/* =====================================================================
   カード演出時のレイアウト統一：すべての演出で「カードが上・文字吹き出しがその真下」に並び、カードを絶対に覆わない
   ===================================================================== */
/* 1. バナー演出（走破宣言・走破成功・ガードなど） */
body .banner-stage.has-card,
body .banner-stage.has-card:not(.is-guard),
body .banner-stage.has-card.is-guard {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 380px !important;
}

body .banner-stage.has-card .banner-card-backdrop,
body .banner-stage.has-card:not(.is-guard) .banner-card-backdrop,
body .banner-stage.has-card.is-guard .banner-card-backdrop {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}

body .banner-stage.has-card .banner-card-backdrop .banner-horse-card.card,
body .banner-stage.has-card .banner-card-backdrop .banner-horse-card,
body .banner-stage.has-card:not(.is-guard) .banner-card-backdrop .banner-horse-card.card,
body .banner-stage.has-card:not(.is-guard) .banner-card-backdrop .banner-horse-card,
body .banner-stage.has-card.is-guard .banner-card-backdrop .banner-horse-card.card,
body .banner-stage.has-card.is-guard .banner-card-backdrop .banner-horse-card {
  width: min(280px, 74vw) !important;
  max-height: 48vh !important;
  border-radius: 12px !important;
}

body .banner-stage.has-card .banner-box,
body .banner-stage.has-card:not(.is-guard) .banner-box,
body .banner-stage.has-card.is-guard .banner-box {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(8px) scale(0.96) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body .banner-stage.has-card .banner-box.show,
body .banner-stage.has-card:not(.is-guard) .banner-box.show,
body .banner-stage.has-card.is-guard .banner-box.show {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* 2. ガード確認ポップアップ（相手の走破宣言時：馬カードが上、確認吹き出し・ボタンが真下） */
body #guard-popup {
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

body #guard-popup .guard-horse-slot {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}

body #guard-popup .guard-horse-slot .card {
  width: min(280px, 74vw) !important;
  max-height: 46vh !important;
  border-radius: 12px !important;
}

/* 白ベースの清潔感あふれるモーダル外観（参考画像デザイン） */
body:not(.popup-dark) #guard-popup .popup-box,
body:not(.popup-dark) #guard-support-popup .popup-box,
body.field-cyber:not(.popup-dark) #guard-popup .popup-box,
body.field-cyber:not(.popup-dark) #guard-support-popup .popup-box,
body.field-white:not(.popup-dark) #guard-popup .popup-box,
body.field-white:not(.popup-dark) #guard-support-popup .popup-box {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  width: min(340px, 88vw) !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  padding: 24px 22px 20px !important;
  color: #1e293b !important;
  text-align: center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.popup-dark) #guard-popup .popup-box::before,
body:not(.popup-dark) #guard-support-popup .popup-box::before {
  display: none !important;
}

/* タイトル：力強いゴシック黒文字 */
body:not(.popup-dark) #guard-popup .popup-title,
body:not(.popup-dark) #guard-support-popup .popup-title,
body.field-cyber:not(.popup-dark) #guard-popup .popup-title,
body.field-cyber:not(.popup-dark) #guard-support-popup .popup-title,
body.field-white:not(.popup-dark) #guard-popup .popup-title,
body.field-white:not(.popup-dark) #guard-support-popup .popup-title {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #0f172a !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  filter: none !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

body:not(.popup-dark) #guard-popup .popup-title::after,
body:not(.popup-dark) #guard-support-popup .popup-title::after {
  display: none !important;
}

/* 説明文：読みやすいハイコントラストグレー */
body:not(.popup-dark) #guard-popup .popup-desc,
body:not(.popup-dark) #guard-support-popup .popup-desc,
body.field-cyber:not(.popup-dark) #guard-popup .popup-desc,
body.field-cyber:not(.popup-dark) #guard-support-popup .popup-desc,
body.field-white:not(.popup-dark) #guard-popup .popup-desc,
body.field-white:not(.popup-dark) #guard-support-popup .popup-desc {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  line-height: 1.65 !important;
  text-shadow: none !important;
  margin-bottom: 14px !important;
}

body:not(.popup-dark) #guard-popup .popup-desc b,
body:not(.popup-dark) #guard-popup .popup-desc strong,
body:not(.popup-dark) #guard-support-popup .popup-desc b,
body:not(.popup-dark) #guard-support-popup .popup-desc strong {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body:not(.popup-dark) #guard-popup .popup-lead,
body:not(.popup-dark) #guard-support-popup .popup-lead {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
}

body:not(.popup-dark) #guard-popup .popup-subtext,
body:not(.popup-dark) #guard-support-popup .popup-subtext {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
}

body:not(.popup-dark) #guard-popup .popup-stat-row,
body:not(.popup-dark) #guard-support-popup .popup-stat-row {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 8px 0 !important;
}

body:not(.popup-dark) #guard-popup .popup-highlight-value,
body:not(.popup-dark) #guard-support-popup .popup-highlight-value {
  color: #e11d48 !important;
  font-weight: 900 !important;
  font-size: 1.15em !important;
  text-shadow: none !important;
}

body:not(.popup-dark) #guard-popup .popup-breakdown,
body:not(.popup-dark) #guard-support-popup .popup-breakdown {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  margin-top: 8px !important;
  text-shadow: none !important;
}

/* ボタン群レイアウト */
body:not(.popup-dark) #guard-popup .popup-btns,
body:not(.popup-dark) #guard-support-popup .popup-btns {
  display: flex !important;
  gap: 10px !important;
  margin-top: 18px !important;
  width: 100% !important;
}

/* 主ボタン（ガードする／使う）：鮮烈なコーラルレッド */
body:not(.popup-dark) #guard-popup .btn-guard,
body:not(.popup-dark) #guard-support-popup .btn-guard,
body.field-cyber:not(.popup-dark) #guard-popup .btn-guard,
body.field-cyber:not(.popup-dark) #guard-support-popup .btn-guard,
body.field-white:not(.popup-dark) #guard-popup .btn-guard,
body.field-white:not(.popup-dark) #guard-support-popup .btn-guard {
  flex: 1 !important;
  background: #ff3b30 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.32) !important;
  text-shadow: none !important;
  letter-spacing: 0.03em !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(.popup-dark) #guard-popup .btn-guard:hover,
body:not(.popup-dark) #guard-support-popup .btn-guard:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 6px 18px rgba(255, 59, 48, 0.42) !important;
  transform: translateY(-1px) !important;
}

body:not(.popup-dark) #guard-popup .btn-guard:active,
body:not(.popup-dark) #guard-support-popup .btn-guard:active {
  transform: scale(0.97) !important;
}

/* 副ボタン（ガードしない／使わない）：ライトグレー＋控えめな枠 */
body:not(.popup-dark) #guard-popup .btn-skip,
body:not(.popup-dark) #guard-support-popup .btn-skip,
body.field-cyber:not(.popup-dark) #guard-popup .btn-skip,
body.field-cyber:not(.popup-dark) #guard-support-popup .btn-skip,
body.field-white:not(.popup-dark) #guard-popup .btn-skip,
body.field-white:not(.popup-dark) #guard-support-popup .btn-skip {
  flex: 1 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}

body:not(.popup-dark) #guard-popup .btn-skip:hover,
body:not(.popup-dark) #guard-support-popup .btn-skip:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
}

body:not(.popup-dark) #guard-popup .btn-skip:active,
body:not(.popup-dark) #guard-support-popup .btn-skip:active {
  transform: scale(0.97) !important;
}

/* 3. カード拡大・詳細レイヤー（カードが上、詳細吹き出し・アクションボタンが下） */
body #closeup-layer {
  z-index: 100000 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

body #closeup-layer .closeup-card {
  max-height: 52vh !important;
  width: min(280px, 72vw) !important;
}

body #closeup-layer .closeup-toast {
  margin-top: 22px !important;
}


/* =====================================================================
   馬カード解説オーバーレイ（チュートリアル：馬カード紹介）
   馬カードを大きく出し、コスト（左上）／走破数・ガード値（下部）を光る枠で指し示す。
   ナレーター(z-index:30)より下、盤面より上。タップは下の画面全体の「次へ」に通す。
   ===================================================================== */
.card-explain {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 150px; /* 下余白はJSでナレーターの上端に合わせて上書き */
  box-sizing: border-box;
  background: rgba(3, 7, 12, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, background .25s ease, visibility .25s;
}
.card-explain.show {
  opacity: 1;
  visibility: visible;
  background: rgba(3, 7, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card-explain-stage {
  position: relative;
  height: var(--ce-h, 460px);
  aspect-ratio: 5 / 7.1;
  transform: scale(.92);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.card-explain.show .card-explain-stage { transform: scale(1); }
.card-explain-card,
.card-explain-card .card {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  animation: none !important;
  border-radius: 14px;
  border: 2.5px solid #00f0ff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .9), 0 0 32px rgba(0, 240, 255, .45);
  pointer-events: none;
}
.card-explain-card { border: 0; box-shadow: none; }
.card-explain-ring {
  position: absolute;
  border: 3.5px solid #fff200;
  border-radius: 14px;
  box-shadow:
    0 0 0 2.5px rgba(0, 0, 0, 0.95),
    0 0 16px 4px rgba(255, 230, 0, 0.95),
    0 0 32px 8px rgba(255, 200, 0, 0.6),
    inset 0 0 0 2px rgba(0, 0, 0, 0.9),
    inset 0 0 12px 2px rgba(255, 230, 0, 0.55);
  opacity: 0;
  transform: scale(1.1);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 10;
}
.card-explain-ring.on {
  opacity: 1;
  transform: scale(1);
  animation: cardExplainPulse 1.25s ease-in-out infinite;
}
.card-explain-ring.on::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(255, 245, 60, 0.85);
  pointer-events: none;
  animation: cardExplainRipple 1.6s cubic-bezier(0.15, 0.7, 0.3, 1) infinite;
}
@keyframes cardExplainPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2.5px rgba(0, 0, 0, 0.95),
      0 0 14px 3px rgba(255, 230, 0, 0.9),
      0 0 28px 6px rgba(255, 200, 0, 0.55),
      inset 0 0 0 2px rgba(0, 0, 0, 0.9),
      inset 0 0 10px 2px rgba(255, 230, 0, 0.5);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 0 3px rgba(0, 0, 0, 1),
      0 0 24px 7px rgba(255, 248, 80, 1),
      0 0 46px 14px rgba(255, 215, 0, 0.85),
      inset 0 0 0 2.5px rgba(0, 0, 0, 0.95),
      inset 0 0 16px 4px rgba(255, 230, 0, 0.75);
  }
}
@keyframes cardExplainRipple {
  0% {
    transform: scale(0.96);
    opacity: 0.95;
  }
  70% {
    opacity: 0.45;
  }
  100% {
    transform: scale(1.24);
    opacity: 0;
  }
}
/* コスト：左上の円形マーク（馬蹄形コスト枠を一回り大きく美しく包む） */
.card-explain-ring.ring-cost {
  left: 2.2%;
  top: 1.8%;
  width: 21.0%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
/* 走破数・ガード値：下部の2つの数値（走破・ガードバッジ枠全体をしっかり囲む） */
.card-explain-ring.ring-stats {
  left: 47.0%;
  top: 84.0%;
  width: 50.5%;
  height: 13.2%;
  border-radius: 12px;
}
/* 走破数のみ：下部左側の走破バッジをピンポイントで囲む */
.card-explain-ring.ring-run {
  left: 47.0%;
  top: 84.0%;
  width: 25.0%;
  height: 13.2%;
  border-radius: 10px;
}
/* ガード値のみ：下部右側のガードバッジをピンポイントで囲む */
.card-explain-ring.ring-guard {
  left: 72.5%;
  top: 84.0%;
  width: 25.0%;
  height: 13.2%;
  border-radius: 10px;
}

/* ==================== BACKGROUND & FIELD DIM (薄くする設定) ==================== */
:root {
  --bg-field-opacity: 0.8;
}

#three-bg {
  opacity: var(--bg-field-opacity, 1) !important;
}

body.field-nature #three-bg,
body[data-theme="nature"] #three-bg,
body.theme-cyber #three-bg,
body[data-theme="cyber"] #three-bg,
body.field-classic #three-bg {
  opacity: var(--bg-field-opacity, 1) !important;
}

.field-splash-bg,
#field-splash-bg {
  opacity: var(--bg-field-opacity, 1) !important;
}

.bg-dimmer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: #020712;
  opacity: calc((1 - var(--bg-field-opacity, 1)) * 0.92);
  transition: opacity 0.15s ease;
}

body.field-white .bg-dimmer,
body.field-cyber.field-white .bg-dimmer {
  background-color: #dbe4ed;
}

body.field-nature .bg-dimmer,
body[data-theme="nature"] .bg-dimmer {
  background-color: #021207;
}

/* ==================== ファーム一覧モーダル (FarmViewer) ==================== */
#zone-farm,
#zone-opp-farm,
.farm-pile,
#farm-pile,
#opp-farm-pile {
  cursor: pointer !important;
}

#zone-farm:hover .farm-stack,
#zone-opp-farm:hover .farm-stack {
  transform: scale(1.06);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(0, 240, 255, 0.65));
}

.farm-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 10, 24, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.farm-viewer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.farm-viewer-panel {
  background: var(--bubble-bg, #ffffff);
  border: var(--bubble-border, 1.5px solid rgba(227, 178, 60, 0.5));
  border-radius: 20px;
  box-shadow: var(--bubble-shadow, 0 20px 50px rgba(0, 0, 0, 0.6)), 0 0 32px rgba(2, 132, 199, 0.3);
  width: 100%;
  max-width: 520px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.farm-viewer-overlay.show .farm-viewer-panel {
  transform: scale(1) translateY(0);
}

.farm-viewer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(2, 132, 199, 0.18);
}

.farm-viewer-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.farm-viewer-icon {
  display: none !important;
}

.farm-viewer-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--bubble-text, #0f172a);
  letter-spacing: 0.02em;
}

.farm-viewer-close {
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.15);
  color: var(--bubble-text, #0f172a);
  font-size: 14px;
  font-weight: 700;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.farm-viewer-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: scale(1.08);
}

.farm-viewer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 18px;
  background: rgba(2, 132, 199, 0.05);
  border-bottom: 1px solid rgba(2, 132, 199, 0.1);
}

.fv-stat-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #1e293b;
  border: 1px solid #cbd5e1;
}

.fv-stat-chip.type-horse {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.35);
}

.fv-stat-chip.type-force {
  background: rgba(234, 179, 8, 0.16);
  color: #a16207;
  border-color: rgba(234, 179, 8, 0.4);
}

.fv-stat-chip.type-item {
  background: rgba(2, 132, 199, 0.14);
  color: #0369a1;
  border-color: rgba(2, 132, 199, 0.35);
}

.fv-stat-chip.type-situation {
  background: rgba(168, 85, 247, 0.14);
  color: #7e22ce;
  border-color: rgba(168, 85, 247, 0.35);
}

.farm-viewer-body {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
}

.farm-viewer-empty {
  padding: 36px 12px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  font-weight: 600;
}

.farm-viewer-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.farm-viewer-card-item:hover {
  transform: translateX(4px);
  background: #f0fdf4;
  border-color: #86efac;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.farm-viewer-card-item.type-force:hover {
  background: #fefce8;
  border-color: #fde047;
}

.farm-viewer-card-item.type-item:hover {
  background: #f0f9ff;
  border-color: #7dd3fc;
}

.fv-card-thumb {
  width: 44px;
  height: 58px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #e2e8f0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  background-size: cover;
  background-position: center;
}

.fv-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fv-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fv-card-order {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  background: #e2e8f0;
  padding: 1px 6px;
  border-radius: 4px;
}

.fv-card-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-card-stat {
  font-size: 12px;
  color: #334155;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fv-card-stat.fv-stat-text {
  font-size: 11.5px;
  color: #475569;
}

.fv-stat-run {
  color: #047857;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.fv-stat-guard {
  color: #0284c7;
  font-weight: 700;
  background: rgba(2, 132, 199, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.fv-stat-cost {
  color: #d97706;
  font-weight: 700;
  background: rgba(217, 119, 6, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.farm-viewer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid rgba(2, 132, 199, 0.15);
  background: rgba(2, 132, 199, 0.04);
}

.farm-viewer-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.farm-viewer-btn {
  padding: 6px 18px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.farm-viewer-btn:hover {
  background: #0369a1;
  transform: scale(1.04);
}

/* =====================================================================
   バナー（走破成功／アイテム発動／ガード結果）：白ベースのカードUI（参考画像デザイン）
   タイトル → サブテキスト（走破数・計算式）の順で表示
   ===================================================================== */
body:not(.popup-dark) .banner-box,
body:not(.popup-dark) .banner-stage.has-card .banner-box,
body:not(.popup-dark) .banner-stage.has-card:not(.is-guard) .banner-box,
body:not(.popup-dark) .banner-stage.has-card.is-guard .banner-box {
  background: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

body:not(.popup-dark) .banner-box::before,
body:not(.popup-dark) .banner-box::after,
body:not(.popup-dark) .banner-box .banner-shine {
  display: none !important;
}

body:not(.popup-dark) .banner-box .banner-box-text,
body:not(.popup-dark) .banner-stage.has-card .banner-box .banner-box-text,
body:not(.popup-dark) .banner-stage.has-card:not(.is-guard) .banner-box .banner-box-text,
body:not(.popup-dark) .banner-stage.has-card.is-guard .banner-box .banner-box-text {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

body:not(.popup-dark) .banner-box .banner-sub-caption,
body:not(.popup-dark) .banner-stage.has-card .banner-box .banner-sub-caption,
body:not(.popup-dark) .banner-stage.has-card:not(.is-guard) .banner-box .banner-sub-caption {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  margin: 0 !important;
}

body:not(.popup-dark) .banner-box .banner-sub-caption b {
  color: #ff3b30 !important;
  font-weight: 900 !important;
}

/* 計算式：白背景上で読みやすい淡いグレーの枠 */
body:not(.popup-dark) .banner-box .guard-calc-formula {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  color: #0f172a !important;
  margin: 2px auto 0 !important;
}

body:not(.popup-dark) .banner-box .guard-calc-op {
  color: #475569 !important;
  text-shadow: none !important;
}

body:not(.popup-dark) .banner-box .guard-calc-pill {
  text-shadow: none !important;
}

body:not(.popup-dark) .banner-box .guard-calc-pill.pill-result-win,
body:not(.popup-dark) .banner-box .guard-calc-pill.pill-result-lose {
  background: #ff3b30 !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.32) !important;
}

/* ガード系ポップアップ：文字の影を完全に除去 */
body:not(.popup-dark) #guard-popup .popup-box *,
body:not(.popup-dark) #guard-support-popup .popup-box * {
  text-shadow: none !important;
}

/* 設定ボタン：標準の歯車絵文字 */
.settings-gear .settings-gear-emoji {
  font-size: 1.15em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* =====================================================================
   ポップアップ配色「White」：その他の確認ポップアップも白ベースに統一
   （設定 > ポップアップ・バナーの配色 で Dark に切り替えると従来の黒枠デザイン）
   ===================================================================== */
body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-box {
  background: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  padding: 24px 22px 20px !important;
  color: #1e293b !important;
  text-align: center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-box::before,
body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-title::after {
  display: none !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-title {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #0f172a !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  filter: none !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-desc {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  line-height: 1.65 !important;
  text-shadow: none !important;
  margin-bottom: 14px !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-desc b,
body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-desc strong {
  color: #0f172a !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#opponent-thinking-popup, #run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-box * {
  text-shadow: none !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .popup-btns {
  display: flex !important;
  gap: 10px !important;
  margin-top: 18px !important;
  width: 100% !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .btn-guard {
  flex: 1 !important;
  background: #ff3b30 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.32) !important;
  text-shadow: none !important;
  letter-spacing: 0.03em !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .btn-skip {
  flex: 1 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body:not(.popup-dark):not(.popup-dark) :is(#run-support-popup, #situation-hint-popup, #farm-confirm-popup, #run-select-horse-popup, #notice-action-popup) .btn-skip:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}