/* フォントはfunctions.phpのwp_enqueue_styleで読み込み（@importより高速・FOUT軽減） */

#reversi *, #reversi *::before, #reversi *::after { box-sizing: border-box; }

/* ブルーフラッシュ・タップハイライト全消し */
#reversi *,
#reversi *:focus,
#reversi *:active,
#reversi button,
#reversi button:focus,
#reversi button:active {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}

#reversi {
  font-family: 'Baloo 2', sans-serif;
  background: #f5f5f5;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
/* sb-swap-overlay 表示中はスクロールを固定（absolute配置が見切れないように） */
#reversi.overlay-open {
  overflow-y: hidden;
}

/*
 * 画面遷移の描画シールド。
 * オーバーレイ同士を入れ替える1〜2フレームだけでも盤面を露出させない。
 * 盤面そのものは隠さないため、visibility切替由来の描画欠損も起こさない。
 */
#reversi.overlay-open::after {
  content: '';
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: 150;
  pointer-events: none;
  background-color: #101414;
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 480px) {
  #reversi.overlay-open::after {
    background-image:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp');
  }
}

/* 背景画像を ::before で描画（overflow:auto 内で fixed が効かない問題を回避） */
#reversi::before {
  content: '';
  position: absolute;
  inset: 0;
  min-height: 100%;
  background: url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 480px) {
  #reversi::before {
    background-image: url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp');
  }
}

.screen        { display: none; width: 100%; min-height: 100vh; }
.screen.active { display: flex; position: relative; z-index: 1; }

#screen-title {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  padding: 200px 16px 40px;
}

@media (max-width: 480px) {

  /* スマホ: min-height解除 */
  #reversi {
    min-height: auto;
  }
  #screen-title.screen {
    min-height: auto;
  }

  /* タイトル画面レイアウト */
  #screen-title {
    height: auto;
    padding: 179px 20px 0;
    justify-content: flex-start;
    align-items: center;
  }

  /* ロゴエリア：スマホ用 */
  #screen-title .title-logo-area {
    height: 104px;
    margin-bottom: 60px;
  }
  #screen-title .title-discs {
    margin-bottom: 8px;
  }

  /* コンテンツ幅制限 */
  #screen-title .title-content {
    max-width: 380px;
    width: 100%;
    padding-bottom: 88px;
  }

  /* モードセクション */
  #screen-title .mode-section {
    gap: 8px;
    width: 100%;
  }
  #screen-title .mode-cards {
    gap: 8px;
    width: 100%;
  }
  #screen-title .mode-card {
    border-radius: 16px;
    padding: 12px 16px;
  }

}

#screen-title::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #f6f7f9;
  background-image:
    linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0;
  pointer-events: none;
}

.title-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
  padding: 0 4px;
}

.title-logo-area {
  position: relative;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
}
.title-logo-default {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-discs {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.title-disc {
  width:  clamp(40px, 10vw, 56px);
  height: clamp(40px, 10vw, 56px);
  border-radius: 50%;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), inset 0 3px 10px rgba(255,255,255,0.3), 0 0 20px rgba(0,0,0,0.1);
}
.title-disc.black { background: radial-gradient(circle at 36% 32%, #555, #111); }
.title-disc.white { background: radial-gradient(circle at 36% 32%, #fff, #e0e0e0); border: 1px solid #ddd; }
.title-main {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(22px, 6vw, 44px);
  font-weight: 900;
  color: #111;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.mode-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mode-card {
  position: relative;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 18px;
  padding: clamp(12px, 3vw, 18px) clamp(14px, 4vw, 22px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.02), transparent);
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: 18px;
}
.mode-card:not(.disabled):hover {
  transform: translateY(-3px) scale(1.02);
  border-color: #aaa;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.mode-card:not(.disabled):hover::before { opacity: 1; }
.mode-card:not(.disabled):active { transform: translateY(0) scale(0.99); }

.mode-card.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: saturate(0.4);
}

.mode-text { flex: 1; min-width: 0; }
.mode-name {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(16px, 4vw, 20px);
  color: #111;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.mode-desc {
  font-size: clamp(11px, 2.5vw, 13px);
  color: rgba(0,0,0,0.5);
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.mode-badge {
  font-family: 'Fredoka One', sans-serif;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.mode-card.simple .mode-badge {
  background: rgba(0,0,0,0.05);
  color: #444;
  border: 1px solid rgba(0,0,0,0.12);
}
.mode-card.magic .mode-badge {
  background: rgba(0,0,0,0.7);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.2);
}

.magic-sub-btns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, gap 0.3s;
  pointer-events: none;
}
.magic-sub-btns.open {
  max-height: 70px;
  opacity: 1;
  gap: 8px;
  padding-top: 8px;
  pointer-events: auto;
}
.magic-sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 1 140px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1.5px solid #ddd;
  background: #f5f5f5;
  color: #333;
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(12px, 3.2vw, 14px);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  white-space: nowrap;
}
.magic-sub-btn:hover {
  background: #eee;
  border-color: #bbb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #111;
  transform: translateY(-2px) scale(1.04);
}
.magic-sub-btn:active {
  transform: scale(0.97);
}
.magic-sub-btn.new-btn {
  background: #f5f5f5;
  border-color: #ddd;
  color: #333;
}
.magic-sub-btn.new-btn:hover {
  background: #eee;
  border-color: #bbb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #111;
  transform: translateY(-2px) scale(1.04);
}
.magic-sub-btn.resume-btn {
  background: #111;
  border-color: #333;
  color: #fff;
}
.magic-sub-btn.resume-btn:hover {
  background: #333;
  border-color: #555;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
}
.sub-btn-icon { font-size: 18px; }
.sub-btn-label { font-size: 15px; }

#screen-game {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #f5f5f5;
  padding: 16px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.reversi-game {
  --ot-board:   #3a8a5a;
  --ot-accent:  #444444;
  --ot-accent2: #222222;
  --ot-text:    #111111;
  --ot-dim:     #888888;

  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  font-weight: 800;
  color: var(--ot-text);
  margin: 0 auto;
}

.reversi-game .ot-card {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 22px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 4px 0 rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06);
  padding: 10px 12px;
  position: relative;
  overflow: clip;
}

.reversi-game .ot-card::before {
  content: '';
  position: absolute;
  top: 4px; left: 8px; right: 8px; height: 38%;
  border-radius: 14px 14px 50% 50%;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
  z-index: 0;
}

/* カード直下の全要素をオーバーレイより前面に */
.reversi-game .ot-card > * {
  position: relative;
  z-index: 1;
}

.reversi-game .ot-score-panel {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.reversi-game .ot-score-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 14px;
  transition: all .25s;
  position: relative;
  min-width: 80px;
}

.reversi-game .ot-score-side.active {
  background: rgba(0,0,0,0.05);
  box-shadow: 0 0 0 2.5px #333;
}
.reversi-game .ot-score-side.active::after {
  content: none;
}

.reversi-game .ot-score-side.cpu-active {
  background: rgba(0,0,0,0.04);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}
.reversi-game .ot-score-side.cpu-active::after {
  content: none;
}

.reversi-game .ot-disc-icon {
  width:  clamp(28px, 7vw, 36px);
  height: clamp(28px, 7vw, 36px);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15), inset 0 -2px 4px rgba(0,0,0,0.1), inset 0 2px 6px rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.reversi-game .ot-disc-icon.black { background: radial-gradient(circle at 38% 35%, #555, #111); }
.reversi-game .ot-disc-icon.white { background: radial-gradient(circle at 38% 35%, #fff, #e0e0e0); border: 1px solid #ddd; }

.reversi-game .ot-score-label {
  font-size: clamp(11px, 2.8vw, 14px);
  letter-spacing: .08em;
  color: rgba(0,0,0,0.85);
  font-weight: 700;
  white-space: nowrap;
}
.reversi-game .ot-score-num {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(36px, 9vw, 46px);
  color: #111;
  text-shadow: none;
  line-height: 1;
}

/* 手数表示エリア（わかバトル用） */
.reversi-game .ot-vs-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  z-index: 1;
}

/* メッセージ行 */
.reversi-game .ot-message-row {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  min-height: 32px;
  flex-shrink: 0;
}
.reversi-game .ot-message-row .ot-message {
  flex: 1;
  width: auto;
  flex-basis: auto;
  text-align: center;
  padding-top: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PC版: スコアパネルの下paddingをゼロにし、message-rowで補う */
@media (min-width: 481px) {
  .reversi-game .ot-card.ot-score-panel {
    padding-bottom: 0;
    overflow: visible;
  }
  .reversi-game .ot-message-row {
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -10px;
    width: calc(100% + 24px);
    flex-basis: calc(100% + 24px);
    padding: 6px 0 10px;
    border-radius: 0 0 20px 20px;
    min-height: 40px;
  }
  .reversi-game .ot-message-row .ot-message {
    padding-top: 0;
    min-height: 24px;
  }
}

.reversi-game .ot-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(22px, 5.5vw, 30px);
  color: #444;
  letter-spacing: .08em;
  flex-shrink: 0;
  align-self: center;
}

.reversi-game .ot-message {
  width: 100%;
  flex-basis: 100%;
  text-align: center;
  font-size: clamp(12px, 3vw, 15px);
  letter-spacing: .1em;
  color: rgba(0,0,0,0.8);
  padding-top: 2px;
  min-height: 20px;
  display: block;
  /* 空文字でも高さを確保するため   相当のスペースを持つ */
  white-space: pre;
}

.reversi-game .ot-board-wrap {
  padding: 14px;
  position: relative;
}
.reversi-game .ot-board-inner {
  background: #234f18;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(20,70,10,0.6),
    0 6px 0 rgba(10,45,5,0.5),
    0 10px 24px rgba(10,45,5,0.3);
  position: relative;
}
.reversi-game .ot-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 2px;
  background: #145c30;
}
.reversi-game .ot-cell {
  aspect-ratio: 1;
  background: #2f7a4e;
  border-radius: 0;
  position: relative;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 連撃エフェクト中：置いた石のセルをCanvasより上に浮かせる */
.reversi-game .ot-cell.combo-on-top,
.ability-battle .ot-cell.combo-on-top,
/* 全エフェクト共通：対象石セルを通常石より上・Canvas(z-index:5)より下に */
.reversi-game .ot-cell.fx-target-top,
.ability-battle .ot-cell.fx-target-top {
  z-index: 2;
  isolation: isolate;
}

/* ══ 連撃エフェクト中: 盤面全体を黄色に ══ */
/* ギャップ（グリッド線）色 */
.combo-board-active.ot-grid {
  background: #b89600 !important;
}
/* 全セルを黄色に（石がある・ないに関わらず） */
.combo-board-active .ot-cell {
  background: #d4bc30 !important;
  transition: none !important;
}
.combo-board-active .ot-cell:hover {
  background: #dfc840 !important;
}
/* 連撃で置いた石（combo-on-top のディスク）だけ黄色 */
.combo-board-active .ot-cell.combo-on-top .ot-disc {
  background: radial-gradient(circle at 36% 32%, #fff9b0, #f0c800, #c08000) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.28),
              0 0 20px 8px rgba(255,210,0,0.80),
              inset 0 -2px 5px rgba(0,0,0,0.10),
              inset 0 3px 8px rgba(255,255,255,0.50) !important;
}

/* ══ 配置系エフェクト中: 盤面全体を水色に（JS毎フレームで色更新） ══ */
.reversi-game .placement-board-active.ot-grid,
.ability-battle .placement-board-active.ot-grid,
.placement-board-active.ot-grid {
  background: #0a4060 !important;
}
.reversi-game .placement-board-active .ot-cell,
.ability-battle .placement-board-active .ot-cell,
.placement-board-active .ot-cell {
  transition: none !important;
}

/* ══ 反転系エフェクト中: 盤面全体を紫煙色に（JS毎フレームで色更新） ══ */
.reversi-game .flip-board-active.ot-grid,
.ability-battle .flip-board-active.ot-grid,
.flip-board-active.ot-grid {
  background: #1a0030 !important;
}
.reversi-game .flip-board-active .ot-cell,
.ability-battle .flip-board-active .ot-cell,
.flip-board-active .ot-cell {
  transition: none !important;
}

/* ══ 消去系エフェクト中: 盤面全体を炎色に（JS毎フレームで色更新） ══ */
.reversi-game .erase-board-active.ot-grid,
.ability-battle .erase-board-active.ot-grid,
.erase-board-active.ot-grid {
  background: #cc3300 !important;
}
.reversi-game .erase-board-active .ot-cell,
.ability-battle .erase-board-active .ot-cell,
.erase-board-active .ot-cell {
  transition: none !important;
}

/* ══ 妨害系エフェクト中: 盤面全体を茶色・レンガ色に（JS毎フレームで色更新） ══ */
.reversi-game .block-board-active.ot-grid,
.ability-battle .block-board-active.ot-grid,
.block-board-active.ot-grid {
  background: #3a1800 !important;
}
.reversi-game .block-board-active .ot-cell,
.ability-battle .block-board-active .ot-cell,
.block-board-active .ot-cell {
  transition: none !important;
}

.reversi-game .ot-cell:hover { background: #3a8f5c; }


/* わかバトル盤面：シンプルリバーシと同じデザイン */
.ability-battle .ot-grid {
  gap: 2px;
  padding: 2px;
  background: #145c30;
}
.ability-battle .ot-cell {
  background: #2f7a4e;
}
/* ホバー */
.ability-battle .ot-cell:hover {
  background: #3a8f5c;
}
/* 指し手ヒント（通常時・set系スキル発動中）: 白く発光する外枠パルス */
.ability-battle .ot-cell.hint:not(.hint-guided) {
  background: rgba(255, 255, 255, 0.14) !important;
  outline: 2.5px solid rgba(255, 255, 255, 0.9);
  outline-offset: -2px;
  border-radius: 2px;
  animation: normal-hint-glow 1.2s ease-in-out infinite;
  z-index: 1;
}
.ability-battle .ot-cell.hint:not(.hint-guided):hover {
  background: rgba(255, 255, 255, 0.32) !important;
  outline-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0 0 14px 5px rgba(255, 255, 255, 0.60);
  animation: none;
}

/* 通常ヒント（置ける場所）: 白く発光する外枠パルス */
.reversi-game .ot-cell.hint {
  background: rgba(255, 255, 255, 0.14);
  outline: 2.5px solid rgba(255, 255, 255, 0.9);
  outline-offset: -2px;
  border-radius: 2px;
  animation: normal-hint-glow 1.2s ease-in-out infinite;
  z-index: 1;
}
.reversi-game .ot-cell.hint::after { content: none; }
.reversi-game .ot-cell.hint:hover {
  background: rgba(255, 255, 255, 0.30);
  outline-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0 0 14px 5px rgba(255, 255, 255, 0.55);
  animation: none;
}

@keyframes normal-hint-glow {
  0%, 100% {
    outline-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.20);
  }
  50% {
    outline-color: rgba(255, 255, 255, 1.0);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 14px 5px rgba(255, 255, 255, 0.55);
  }
}

.reversi-game .ot-disc {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  position: absolute;
  animation: ot-drop .18s cubic-bezier(.3,1.5,.6,1);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.45),
    0 5px 10px rgba(0,0,0,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.2),
    inset 0 3px 10px rgba(255,255,255,0.18);
}
.reversi-game .ot-disc.black {
  background: radial-gradient(circle at 34% 28%, #888 0%, #444 22%, #1a1a1a 55%, #111 100%);
}
.reversi-game .ot-disc.white {
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f8f8f8 35%, #e0e0e0 70%, #c8c8c8 100%);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.25),
    0 5px 10px rgba(0,0,0,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.08),
    inset 0 3px 10px rgba(255,255,255,0.9);
}
.reversi-game .ot-disc.flip { animation: ot-flip .32s ease; }

@keyframes ot-drop {
  0%   { transform: scale(0) translateY(-8px); opacity: .6; }
  80%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1;   }
}
@keyframes ot-flip {
  0%   { transform: rotateY(0deg);             }
  50%  { transform: rotateY(90deg) scaleX(.5); }
  100% { transform: rotateY(0deg);             }
}

.reversi-game .ot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 20px;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  border: none;
  overflow: visible;
}
.reversi-game .ot-result-modal {
  background: url('https://wakabaland.com/wp-content/uploads/2026/04/わかば3.webp') center top / cover no-repeat;
  border-radius: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  text-align: center;
  box-shadow: 0 16px 56px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.12);
  width: min(420px, 94vw);
  min-height: min(600px, 90vw);
  position: relative;
  overflow: hidden;
  animation: ot-drop .35s cubic-bezier(.22,1.4,.4,1);
}
/* キャラ画像の下半分に暗幕グラデ → テキストを読みやすく */
.reversi-game .ot-result-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.0)  0%,
    rgba(0,0,0,0.0) 45%,
    rgba(0,0,0,0.72) 72%,
    rgba(0,0,0,0.88) 100%
  );
  border-radius: inherit;
  pointer-events: none;
}
/* モーダル内コンテンツはグラデ暗幕の上に重ねる */
.reversi-game .ot-result-modal > * {
  position: relative;
  z-index: 1;
}
.reversi-game .ot-result-modal-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 28px;
}
.reversi-game .ot-overlay.result-lose .ot-result-modal {
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/04/わかば4.webp');
}

/* result-title を1行で収める */
#sb-result-overlay .ot-result-title {
  white-space: nowrap;
  font-size: clamp(22px, 6vw, 34px);
}
.reversi-game .ot-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.reversi-game .ot-overlay.show { opacity: 1; pointer-events: all; }

.reversi-game .ot-result-title {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(18px, 8vw, 52px);
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  white-space: nowrap;
}
.reversi-game .ot-overlay.result-win .ot-result-title {
  color: #fff;
}
.reversi-game .ot-overlay.result-lose .ot-result-title {
  color: #fff;
}
.reversi-game .ot-overlay.result-draw .ot-result-title {
  color: #fff;
  font-size: clamp(26px, 7vw, 40px);
}
@keyframes result-title-glow {
  0%,100% { text-shadow: none; }
  50%      { text-shadow: none; }
}

.reversi-game .ot-result-scores {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 16px 36px;
}
.reversi-game .ot-result-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.reversi-game .ot-result-disc {
  width:  clamp(32px, 8vw, 44px);
  height: clamp(32px, 8vw, 44px);
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15), inset 0 3px 8px rgba(255,255,255,0.3);
}
.reversi-game .ot-result-disc.black { background: radial-gradient(circle at 36% 32%, #555, #111); }
.reversi-game .ot-result-disc.white { background: radial-gradient(circle at 36% 32%, #fff, #e0e0e0); border: 1px solid #ddd; }
.reversi-game .ot-result-num {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(40px, 11vw, 56px);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  line-height: 1;
}
.reversi-game .ot-result-vs {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(18px, 4.5vw, 24px);
  color: rgba(255,255,255,0.5);
}
.reversi-game .ot-result-sub {
  font-size: clamp(11px, 2.8vw, 13px);
  letter-spacing: .12em;
  color: rgba(255,255,255,0.65);
  position: relative;
  z-index: 1;
}

.reversi-game .ot-overlay #sb-win-choice,
.reversi-game .ot-overlay #sb-lose-actions {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.reversi-game .ot-overlay #sb-result-wins {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(13px, 3.5vw, 15px);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  letter-spacing: .08em;
  position: relative;
  z-index: 1;
}

.reversi-game .ot-overlay #sb-win-choice > div:first-child {
  font-size: clamp(13px, 3.5vw, 16px) !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: .04em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin-bottom: 0;
}

.reversi-game .ot-overlay #sb-win-choice > div:nth-child(2) {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  flex-wrap: wrap;
}

.reversi-game #sb-save-quit-btn {
  font-size: clamp(12px, 3vw, 14px) !important;
  padding: 9px 22px !important;
  opacity: 1 !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #ddd !important;
  color: rgba(0,0,0,0.6) !important;
  letter-spacing: .06em;
  margin-top: 4px;
  animation: none !important;
}
.reversi-game #sb-save-quit-btn:hover {
  background: #eee !important;
  border-color: #bbb !important;
}

.reversi-game .ot-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
/* 戻る・最初から・開始ボタンを同一サイズに揃える */
.reversi-game .ot-btn-row .ot-btn {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(12px, 2.8vw, 14px);
  padding: 8px 16px;
}
.reversi-game .ot-btn {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(14px, 3.5vw, 17px);
  padding: clamp(9px, 2.5vw, 12px) clamp(18px, 5vw, 26px);
  background: #111;
  border: 2px solid #333;
  color: #fff;
  cursor: pointer;
  letter-spacing: .08em;
  border-radius: 50px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 6px 14px rgba(0,0,0,0.1);
  transition: all .18s;
  text-shadow: none;
  outline: none;
  -webkit-appearance: none;
  animation: ot-pulse 1.8s ease-in-out infinite;
}
.reversi-game .ot-btn:hover  { background: #333; transform: translateY(-2px) scale(1.03); }
.reversi-game .ot-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }

.reversi-game .ot-btn.secondary {
  background: #f5f5f5;
  color: #333;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08);
  border-color: #ddd;
  text-shadow: none;
  animation: none;
}
.reversi-game .ot-btn.secondary:hover { background: #eee; }

@keyframes ot-pulse {
  0%,100% { box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 6px 14px rgba(0,0,0,0.1); }
  50%      { box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 10px 22px rgba(0,0,0,0.18); transform: translateY(-1px); }
}

.reversi-game .ot-color-row,
.reversi-game .ot-difficulty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.reversi-game .ot-diff-label {
  font-size: clamp(12px, 3vw, 14px);
  letter-spacing: .08em;
  color: #111;
  font-weight: 700;
  flex-shrink: 0;
}
/* 手番・難易度の共通行レイアウト */
.reversi-game .ot-diff-levels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
/* 難易度（Lv）行のみ均等配置 */
.reversi-game .ot-diff-levels--lv {
  justify-content: space-between;
  flex: 1;
}

.reversi-game .ot-diff-btn {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(11px, 2.8vw, 13px);
  width:  clamp(26px, 6.5vw, 30px);
  height: clamp(26px, 6.5vw, 30px);
  padding: 0;
  border-radius: 50%;
  border: 2px solid #bbb;
  background: #ebebeb;
  color: #111;
  cursor: pointer;
  letter-spacing: .02em;
  transition: all .15s;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
/* 難易度ボタンのみ均等に伸ばす */
.reversi-game .ot-diff-levels--lv .ot-diff-btn {
  flex: 1;
  max-width: clamp(26px, 6.5vw, 30px);
}
.reversi-game .ot-diff-btn:hover {
  background: #ddd;
  border-color: #999;
  color: #000;
}
.reversi-game .ot-diff-btn.selected {
  background: #111;
  border-color: #333;
  color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}

.reversi-game .ot-diff-btn:has(.ot-btn-disc) {
  width: auto;
  height: clamp(28px, 7vw, 32px);
  padding: 0 12px;
  border-radius: 50px;
  font-size: clamp(11px, 2.8vw, 13px);
  gap: 0;
}
.reversi-game .ot-diff-btn:has(.ot-btn-disc).selected {
  background: #111;
  border-color: #333;
  color: #fff;
}

.reversi-game .ot-btn-disc {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2), inset 0 1px 3px rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.reversi-game .ot-btn-disc.black { background: radial-gradient(circle at 38% 35%, #555, #111); }
.reversi-game .ot-btn-disc.white { background: radial-gradient(circle at 38% 35%, #fff, #e0e0e0); border: 1px solid #ddd; }

@media (max-width: 360px) {
  .reversi-game .ot-diff-btn                   { width: 26px; height: 26px; font-size: 10px; }
  .reversi-game .ot-diff-btn:has(.ot-btn-disc) { padding: 0 8px; }
  .reversi-game .ot-card                       { padding: 10px; }
}

.mode-card.magic { cursor: pointer; }
.mode-card.magic .mode-name { color: #fff; }
.mode-card.magic .mode-desc { color: rgba(255,255,255,0.65); }
.mode-card.magic .mode-arrow { color: rgba(255,255,255,0.4); }
.mode-card.magic:not(.disabled):hover .mode-arrow { color: rgba(255,255,255,0.9); }
.mode-card.magic { background: #111; border-color: #333; }
.mode-card.magic:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.2); border-color: #555; }
/* わかバトル（magic）カード内テキストをドラクエ風フォントに */
.mode-card.magic .mode-name,
.mode-card.magic .mode-desc,
.mode-card.magic .mode-badge {
  font-family: 'DotGothic16', sans-serif;
}
.mode-badge.spec {
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .1em;
}

.ability-battle .sb-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  margin-bottom: 4px;
  position: relative;
}

.ability-battle .ot-cell.sealed {
  background: rgba(100, 55, 10, 0.85);
  outline: 2.5px solid rgba(160, 100, 40, 0.9);
  outline-offset: -2px;
  border-radius: 4px;
  animation: sealed-cell-pulse 1.2s ease-in-out infinite;
  z-index: 1;
  overflow: visible;
}

@keyframes sealed-cell-pulse {
  0%   { outline-color: rgba(160,100,40,0.5); background: rgba(100,55,10,0.7); }
  50%  { outline-color: rgba(210,160,90,1.0); background: rgba(140,85,20,0.9); }
  100% { outline-color: rgba(160,100,40,0.5); background: rgba(100,55,10,0.7); }
}

.ability-battle .ot-cell.sealed .sealed-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(13px, 3.5vw, 17px);
  font-weight: 900;
  color: rgba(255, 210, 150, 1.0);
  text-shadow:
    0 0 8px rgba(200, 130, 40, 0.95),
    0 0 20px rgba(160, 90, 10, 0.7),
    0 1px 2px rgba(0,0,0,0.9);
  z-index: 6;
  pointer-events: none;
  animation: sealed-num-pulse 1.2s ease-in-out infinite;
  letter-spacing: 0;
}

@keyframes sealed-num-pulse {
  0%,100% { transform: scale(1.0);   opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1.0;  }
}

/* 選択中マス（選択フェーズ中）: より強い茶色 */
.ability-battle .ot-cell.sealed.being-selected {
  outline-color: rgba(220, 170, 100, 1.0);
  background: rgba(140, 80, 10, 0.7);
}

#screen-spec {
  flex-direction: column;
  align-items: center;
  background:
    linear-gradient(rgba(245,245,245,0.80), rgba(245,245,245,0.80)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat;
  min-height: 100vh;
  padding-bottom: 8px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 480px) {
  #screen-spec {
    background:
      linear-gradient(rgba(245,245,245,0.80), rgba(245,245,245,0.80)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center center / cover no-repeat;
  }
}
#screen-spec .game-header {
  width: 100%;
  max-width: 520px;
}
#spec-game-root {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ability-battle 全体の子要素間隔を詰める */
.reversi-game.ability-battle {
  gap: 4px;
}

.ability-battle .sb-col {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  min-height: clamp(70px, 20vw, 100px);
  position: relative;
  overflow: hidden;
}

/* CPU エリア（上）：能力横長 + キャラ */
.ability-battle .sb-top-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  gap: 4px;
  padding: 6px 8px;
}

/* 能力列ラッパー（CPU側：能力エリア + スペーサーを縦に積む） */
.ability-battle .sb-top-ability-col {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 能力エリア（横いっぱい・3等分グリッド） */
.ability-battle .sb-top-ability-area {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 14px;
  border: 1.5px solid #e0e0e0;
  background: #fafafa;
  align-items: start;
}

/* CPU側スペーサー（非表示） */
.ability-battle .sb-cpu-activate-spacer {
  height: 0;
  flex-shrink: 0;
}

/* キャラ枠（CPU） */
.ability-battle .sb-top-char-box {
  flex: 0 0 auto;
  min-width: clamp(70px, 18vw, 90px);
  max-width: clamp(70px, 18vw, 90px);
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.ability-battle .sb-top-char-box .sb-char-frame {
  width: 100%;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* ── スマホ: キャラ枠をスキルスロット1個と同サイズに・左右を揃える ── */
@media (max-width: 480px) {
  /* CPU行: キャラを左端、スロットを右に */
  .ability-battle .sb-top-row {
    flex-direction: row;
  }
  .ability-battle .sb-top-char-box {
    order: 0;
    min-width: unset;
    max-width: unset;
    width: 0;            /* flex計算のため */
    flex: 1 0 0;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
  }
  .ability-battle .sb-top-char-box .sb-char-frame {
    width: 100%;
    height: 100%;
    flex: unset;
    aspect-ratio: 1 / 1;
  }
  .ability-battle .sb-top-ability-col {
    order: 1;
    flex: 3 0 0;
  }

  /* プレイヤー行: キャラを左端、スロットを右に */
  .ability-battle .sb-bottom-row {
    flex-direction: row;
  }
  .ability-battle .sb-bottom-char-box {
    order: 0;
    min-width: unset;
    max-width: unset;
    width: 0;
    flex: 1 0 0;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
  }
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    width: 100%;
    height: 100%;
    flex: unset;
    aspect-ratio: 1 / 1;
  }
  .ability-battle .sb-bottom-ability-col {
    order: 1;
    flex: 3 0 0;
  }
}

/* スコアバー（中央）：4ボックスを同一構造・同一スタイルで統一 */
.ability-battle .sb-score-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 8px;
  gap: 4px;
}

.ability-battle .sb-score-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 4px 4px;
  gap: 1px;
  min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 2px 2px 0 rgba(255,255,255,0.06);
}

.ability-battle .sb-score-box-label {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(8px, 2.2vw, 11px);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ability-battle .sb-score-box-num {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(22px, 7vw, 32px);
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255,255,255,0.15);
}

/* プレイヤーエリア（下）：キャラ + 能力横並び */
.ability-battle .sb-bottom-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 0;
  gap: 4px;
  padding: 0 8px;
}

.ability-battle .sb-bottom-char-box {
  flex: 0 0 auto;
  min-width: clamp(70px, 18vw, 90px);
  max-width: clamp(70px, 18vw, 90px);
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.ability-battle .sb-bottom-char-box .sb-char-frame {
  width: 100%;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* 能力列ラッパー（能力エリア + 発動ボタン行を縦に積む） */
.ability-battle .sb-bottom-ability-col {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ability-battle .sb-bottom-ability-area {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 14px;
  border: 1.5px solid #e0e0e0;
  background: #fafafa;
  align-items: start;
}

/* 発動ボタン行（スロット枠の下に配置） */
.ability-battle .sb-player-activate-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  padding: 3px 7px 0;
}

/* 発動ボタン：スロット枠の下に配置 */
.ability-battle .sb-activate-btn {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(10px, 2.6vw, 12px);
  height: 24px;
  border-radius: 8px;
  border: none;
  background: #111;
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .1s;
  letter-spacing: .06em;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none;
  font-weight: 700;
  white-space: nowrap;
  padding: 0;
  width: 100%;
  z-index: 10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.ability-battle .sb-activate-btn:not(:disabled):hover {
  background: #333;
}
.ability-battle .sb-activate-btn:not(:disabled):active {
  background: #000;
  transform: scaleY(0.96);
}
.ability-battle .sb-activate-btn:disabled {
  opacity: 0.28;
  pointer-events: none;
  background: #111;
  color: rgba(255,255,255,0.5);
  box-shadow: none;
}
.ability-battle .sb-activate-btn.btn-activating {
  background: #222;
  border-top-color: rgba(255,220,80,0.8);
  color: #ffd700;
  box-shadow: inset 0 1px 0 rgba(255,220,80,0.2);
  animation: ot-pulse 1.4s ease-in-out infinite;
}

/* アクティブ強調 */
.ability-battle .sb-top-row.cpu-active .sb-top-ability-area,
.ability-battle .sb-top-row.cpu-active .sb-top-char-box .sb-char-frame {
  border-color: #aaa;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.ability-battle .sb-bottom-row.active .sb-bottom-ability-area,
.ability-battle .sb-bottom-row.active .sb-bottom-char-box .sb-char-frame {
  border-color: #555;
  box-shadow: 0 0 10px rgba(0,0,0,0.12);
}
.ability-battle .sb-score-bar .sb-score-box.active-score {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 0 0 12px rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}

/* 黒番ボックス（黒背景・白文字） */
.ability-battle .sb-score-box[data-disc-color="black"] {
  background: #111;
  border-color: rgba(255,255,255,0.18);
}
.ability-battle .sb-score-box[data-disc-color="black"] .sb-score-box-label {
  color: #fff;
}
.ability-battle .sb-score-box[data-disc-color="black"] .sb-score-box-num {
  color: #fff;
}
.ability-battle .sb-score-box[data-disc-color="black"].active-score {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 14px rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
}

/* 白番ボックス（白背景・黒文字） */
.ability-battle .sb-score-box[data-disc-color="white"] {
  background: #fff;
  border-color: rgba(0,0,0,0.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 2px 2px 0 rgba(0,0,0,0.06);
}
.ability-battle .sb-score-box[data-disc-color="white"] .sb-score-box-label {
  color: #000;
}
.ability-battle .sb-score-box[data-disc-color="white"] .sb-score-box-num {
  color: #111;
  text-shadow: none;
}
.ability-battle .sb-score-box[data-disc-color="white"].active-score {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.18);
  border-color: rgba(0,0,0,0.5);
}

/* 中立ボックス（試合数・手数）: 黒と白の中間グレー */
.ability-battle .sb-score-box[data-disc-color="neutral"] {
  background: #111;
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 2px 2px 0 rgba(255,255,255,0.06);
}
.ability-battle .sb-score-box[data-disc-color="neutral"] .sb-score-box-label {
  color: #fff;
}
.ability-battle .sb-score-box[data-disc-color="neutral"] .sb-score-box-num {
  color: #fff;
  text-shadow: none;
}

/* charフレーム共通 */
.ability-battle .sb-char-frame {
  background: #f0f0f0;
  border: 2px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.ability-battle .sb-char-frame.cpu-frame {
  border-color: #bbb;
  background: #f5f5f5;
}
.ability-battle .sb-char-frame.player-frame {
  border-color: #888;
  background: #f0f0f0;
}
.ability-battle .sb-char-img {
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

/* メッセージバー */
/* sb-score-bar は max-width:420px で中央揃えし、padding:0 8px で内側ボックスを配置する。
   メッセージバーの黒背景の端を内側ボックスの端に合わせるため、
   (max-width - 8px×2) = 404px の幅で中央揃えにする。
   width:100% を維持しつつ、コンテナが 420px 以上ある場合も
   正しく 404px に収まるよう max-width を設定。 */
.ability-battle .sb-message-bar {
  text-align: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(11px, 2.8vw, 13px);
  color: #ffffff;
  letter-spacing: .06em;
  padding: 3px 8px 2px;
  font-weight: 400;
  min-height: 20px;
  background: #000;
  border-radius: 6px;
  width: calc(100% - 16px);
  max-width: 404px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 盤面 */
.ability-battle .ot-board-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 18px;
  border: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* 導入・コイントスは不透明オーバーレイで隠す。
   盤面本体をvisibility切替すると、再表示後の初回着手でグリッドの
   描画キャッシュが部分欠落するため、盤面は常に描画状態を維持する。 */
.ability-battle .ot-board-wrap,
.ability-battle .ot-board-inner,
.ability-battle .ot-grid,
.ability-battle .ot-cell {
  visibility: visible !important;
}
/* 背景画像をCSS変数経由で::beforeに配置→paddingエリアまでぴったり */
.ability-battle .ot-board-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--board-bg-image, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}
/* 盤面本体を::beforeの上に重ねる */
.ability-battle .ot-board-inner {
  position: relative;
  z-index: 1;
  background: #234f18;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(20,70,10,0.6),
    0 6px 0 rgba(10,45,5,0.5),
    0 10px 24px rgba(10,45,5,0.3);
}

.ability-battle .sb-ability-panel {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e0e0e0;
}

/* 空スロット（能力未設定）のプレースホルダー枠 */
.ability-battle .sb-ability-slot.slot-empty {
  background: rgba(0,0,0,0.02) !important;
  border: 1.5px dashed rgba(0,0,0,0.15) !important;
  border-radius: 10px;
  box-shadow: none !important;
  cursor: default;
  visibility: visible !important;
}
.ability-battle .sb-ability-slot.slot-empty * {
  visibility: hidden;
}
.ability-battle .sb-ability-slot.slot-empty .sb-activate-btn {
  display: none !important;
}

.ability-battle .sb-top-ability-area .sb-ability-slot,
.ability-battle .sb-bottom-ability-area .sb-ability-slot {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
}

/* スロットカード本体 */
.ability-battle .sb-ability-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 5px;
  border-radius: 10px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* 2戦目以降の白枠バグ根本対策:
     試合間のオーバーレイ（勝敗→入替→継続）で screen-spec が
     visibility:hidden→visible に切り替わると、backdrop-filter を持つ要素は
     モバイルWebKitで再描画に失敗し、スロットが真っ白に抜けてしまう。
     スロットは不透明な背景色／画像を持つため blur は視覚上ほぼ不要。
     他のUIと同様に none にして合成レイヤーごと撤去する。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  /* filter / transform の遷移はタッチ時に別の合成レイヤーを作り、
     盤面レイヤーが抜けることがあるため使わない。 */
  transition: opacity .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Canvasが入ったスロットはCSS背景をキャンバス側で描く */
/* 内側グロー装飾 */
.ability-battle .sb-ability-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.25) 0%, transparent 60%);
  border-radius: 10px;
  pointer-events: none;
}
/* 画像背景スロット: 文字が見えるよう下半分に暗いオーバーレイ */
.ability-battle .sb-ability-slot[class*="slot-cat-"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.52) 100%);
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
}
/* スロット内コンテンツを ::after の上に */
.ability-battle .sb-ability-slot > * {
  position: relative;
  z-index: 1;
}
.ability-battle .sb-ability-slot:not(.slot-used):not(.slot-disabled):hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.ability-battle .sb-ability-slot:not(.slot-used):not(.slot-disabled):active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}

.ability-battle .sb-ability-slot.slot-used {
  /* 背景画像は維持し、Canvas版と同じく暗くして使用済みを表す。 */
  background-color: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 0.45;
  filter: none;
}

.ability-battle .sb-ability-slot.slot-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ability-battle .sb-ability-slot.slot-activating {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 14px rgba(0,0,0,0.2) !important;
  animation: ot-pulse 1.4s ease-in-out infinite;
}

/* CPUスロットは非クリック表示のみ */
.ability-battle .cpu-ability-area .sb-ability-slot {
  cursor: default;
}

/* 星（sb.star の数だけ★） */
.ability-battle .sb-slot-stars {
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 900;
  line-height: 1;
  display: block;
  color: #fff;
  -webkit-text-stroke: .35px rgba(0,0,0,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  background: rgba(0,0,0,0.58);
  border-radius: 4px;
  padding: 1px 5px 2px;
  letter-spacing: 1px;
  flex-shrink: 0;
  margin-bottom: 2px;
}

/* 能力名 */
.ability-battle .sb-slot-name-text {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(12px, 3vw, 15px);
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: .35px rgba(0,0,0,0.9);
  letter-spacing: .02em;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  background: rgba(0,0,0,0.68);
  border-radius: 4px;
  padding: 2px 6px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 6px);
  display: block;
  flex-shrink: 0;
}

/* 説明文 */
.ability-battle .sb-slot-desc {
  display: none;
}

/* 条件タグ群 */
.ability-battle .sb-slot-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  margin-top: 3px;
  flex-shrink: 0;
}

/* 条件タグ */
.ability-battle .sb-slot-cond-tag {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 800;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.72);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  padding: 2px 5px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* 系統別カラー（LV1=薄い / LV2=普通 / LV3=濃い） */
/* 共通: 画像を背景にセット */
.ability-battle .sb-ability-slot[class*="slot-cat-"] {
  background-color: #333;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* CSS背景画像が読み込み前/失敗時でも白枠にならないための色フォールバック */
.ability-battle .sb-ability-slot.slot-cat-placement { background-color: #236fc8; }
.ability-battle .sb-ability-slot.slot-cat-flip      { background-color: #8140c8; }
.ability-battle .sb-ability-slot.slot-cat-erase     { background-color: #c83a32; }
.ability-battle .sb-ability-slot.slot-cat-guard     { background-color: #21964a; }
.ability-battle .sb-ability-slot.slot-cat-combo     { background-color: #b88d00; }
.ability-battle .sb-ability-slot.slot-cat-block     { background-color: #9a5b24; }
.ability-battle .sb-ability-slot.slot-cat-hint      { background-color: #666a70; }
.ability-battle .sb-ability-slot.slot-cat-always,
.ability-battle .sb-ability-slot.slot-cat-null      { background-color: #242424; }

/* 配置 → 画像 reversi7.webp */
.ability-battle .sb-ability-slot.slot-cat-placement.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi7.webp'); border: 1.5px solid #8888ff; box-shadow: 0 3px 8px rgba(40,40,255,0.25), inset 0 1px 0 rgba(255,255,255,0.18); filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-placement.slot-lv2 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi7.webp'); border: 1.5px solid #2828ff; box-shadow: 0 3px 8px rgba(40,40,255,0.3),  inset 0 1px 0 rgba(255,255,255,0.15); }
.ability-battle .sb-ability-slot.slot-cat-placement.slot-lv3 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi7.webp'); border: 1.5px solid #0000aa; box-shadow: 0 3px 8px rgba(40,40,255,0.35), inset 0 1px 0 rgba(255,255,255,0.12); filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-placement          { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi7.webp'); border: 1.5px solid #2828ff; box-shadow: 0 3px 8px rgba(40,40,255,0.3),  inset 0 1px 0 rgba(255,255,255,0.15); }

/* 反転 → 画像 reversi8.webp */
.ability-battle .sb-ability-slot.slot-cat-flip.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi8.webp'); border: 1.5px solid #cc88ff; box-shadow: 0 3px 8px rgba(147,40,255,0.25), inset 0 1px 0 rgba(255,255,255,0.18); filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-flip.slot-lv2 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi8.webp'); border: 1.5px solid #9328ff; box-shadow: 0 3px 8px rgba(147,40,255,0.3),   inset 0 1px 0 rgba(255,255,255,0.15); }
.ability-battle .sb-ability-slot.slot-cat-flip.slot-lv3 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi8.webp'); border: 1.5px solid #5500cc; box-shadow: 0 3px 8px rgba(147,40,255,0.35),  inset 0 1px 0 rgba(255,255,255,0.12); filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-flip          { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi8.webp'); border: 1.5px solid #9328ff; box-shadow: 0 3px 8px rgba(147,40,255,0.3),   inset 0 1px 0 rgba(255,255,255,0.15); }

/* 消去 → 画像 reversi9.webp */
.ability-battle .sb-ability-slot.slot-cat-erase.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi9.webp'); border: 1.5px solid #ff8888; box-shadow: 0 3px 8px rgba(255,40,40,0.25), inset 0 1px 0 rgba(255,255,255,0.18); filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-erase.slot-lv2 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi9.webp'); border: 1.5px solid #ff2828; box-shadow: 0 3px 8px rgba(255,40,40,0.3),   inset 0 1px 0 rgba(255,255,255,0.15); }
.ability-battle .sb-ability-slot.slot-cat-erase.slot-lv3 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi9.webp'); border: 1.5px solid #aa0000; box-shadow: 0 3px 8px rgba(255,40,40,0.35),  inset 0 1px 0 rgba(255,255,255,0.12); filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-erase          { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi9.webp'); border: 1.5px solid #ff2828; box-shadow: 0 3px 8px rgba(255,40,40,0.3),   inset 0 1px 0 rgba(255,255,255,0.15); }

/* 防御 → 画像 reversi12.webp */
.ability-battle .sb-ability-slot.slot-cat-guard.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi12.webp'); border: 1.5px solid #88ff88; box-shadow: 0 3px 8px rgba(40,255,40,0.25), inset 0 1px 0 rgba(255,255,255,0.18); filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-guard.slot-lv2 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi12.webp'); border: 1.5px solid #28ff28; box-shadow: 0 3px 8px rgba(40,255,40,0.3),   inset 0 1px 0 rgba(255,255,255,0.15); }
.ability-battle .sb-ability-slot.slot-cat-guard.slot-lv3 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi12.webp'); border: 1.5px solid #00aa00; box-shadow: 0 3px 8px rgba(40,255,40,0.35),  inset 0 1px 0 rgba(255,255,255,0.12); filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-guard          { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi12.webp'); border: 1.5px solid #28ff28; box-shadow: 0 3px 8px rgba(40,255,40,0.3),   inset 0 1px 0 rgba(255,255,255,0.15); }

/* コンボ → 画像 reversi10.webp */
.ability-battle .sb-ability-slot.slot-cat-combo.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi10.webp'); border: 1.5px solid #ffff88; box-shadow: 0 3px 8px rgba(255,255,40,0.25), inset 0 1px 0 rgba(255,255,255,0.18); filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-combo.slot-lv2 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi10.webp'); border: 1.5px solid #ffff28; box-shadow: 0 3px 8px rgba(255,255,40,0.3),  inset 0 1px 0 rgba(255,255,255,0.15); }
.ability-battle .sb-ability-slot.slot-cat-combo.slot-lv3 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi10.webp'); border: 1.5px solid #aaaa00; box-shadow: 0 3px 8px rgba(255,255,40,0.35),  inset 0 1px 0 rgba(255,255,255,0.12); filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-combo          { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi10.webp'); border: 1.5px solid #ffff28; box-shadow: 0 3px 8px rgba(255,255,40,0.3),  inset 0 1px 0 rgba(255,255,255,0.15); }

/* 妨害 → 画像 reversi11.webp */
.ability-battle .sb-ability-slot.slot-cat-block.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi11.webp'); border: 1.5px solid #ffcc88; box-shadow: 0 3px 8px rgba(255,147,40,0.25), inset 0 1px 0 rgba(255,255,255,0.18); filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-block.slot-lv2 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi11.webp'); border: 1.5px solid #ff9328; box-shadow: 0 3px 8px rgba(255,147,40,0.3),  inset 0 1px 0 rgba(255,255,255,0.15); }
.ability-battle .sb-ability-slot.slot-cat-block.slot-lv3 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi11.webp'); border: 1.5px solid #aa5500; box-shadow: 0 3px 8px rgba(255,147,40,0.35),   inset 0 1px 0 rgba(255,255,255,0.12); filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-block          { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi11.webp'); border: 1.5px solid #ff9328; box-shadow: 0 3px 8px rgba(255,147,40,0.3),  inset 0 1px 0 rgba(255,255,255,0.15); }

/* 指南 → 画像 reversi13.webp */
.ability-battle .sb-ability-slot.slot-cat-hint.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi13.webp'); border: 1.5px solid #ffffff; box-shadow: 0 3px 8px rgba(242,242,242,0.2),  inset 0 1px 0 rgba(255,255,255,0.2); filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-hint.slot-lv2 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi13.webp'); border: 1.5px solid #f2f2f2; box-shadow: 0 3px 8px rgba(242,242,242,0.25),   inset 0 1px 0 rgba(255,255,255,0.15); }
.ability-battle .sb-ability-slot.slot-cat-hint.slot-lv3 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi13.webp'); border: 1.5px solid #aaaaaa; box-shadow: 0 3px 8px rgba(242,242,242,0.35),   inset 0 1px 0 rgba(255,255,255,0.1); filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-hint          { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi13.webp'); border: 1.5px solid #f2f2f2; box-shadow: 0 3px 8px rgba(242,242,242,0.25),   inset 0 1px 0 rgba(255,255,255,0.15); }

/* 常時 → 画像 reversi14.webp（廃止。無効系(null)に統合） */
.ability-battle .sb-ability-slot.slot-cat-always.slot-lv1,
.ability-battle .sb-ability-slot.slot-cat-null.slot-lv1   { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi14.webp'); border: 1.5px solid #444444; box-shadow: 0 3px 8px rgba(18,18,18,0.5), inset 0 1px 0 rgba(255,255,255,0.15); color: #ffffff; filter: brightness(1.15); }
.ability-battle .sb-ability-slot.slot-cat-always.slot-lv2,
.ability-battle .sb-ability-slot.slot-cat-null.slot-lv2   { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi14.webp'); border: 1.5px solid #444444; box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12); color: #ffffff; }
.ability-battle .sb-ability-slot.slot-cat-always.slot-lv3,
.ability-battle .sb-ability-slot.slot-cat-null.slot-lv3   { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi14.webp'); border: 1.5px solid #333333; box-shadow: 0 3px 8px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1); color: #ffffff; filter: brightness(0.85); }
.ability-battle .sb-ability-slot.slot-cat-always,
.ability-battle .sb-ability-slot.slot-cat-null             { background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi14.webp'); border: 1.5px solid #444444; box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12); color: #ffffff; }

/* 能力ツールチップ */
.sb-ability-tooltip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  max-width: 230px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 9px 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transform: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sb-ability-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: none;
  margin-left: -5px;
  width: 10px;
  height: 6px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sb-ability-tooltip.visible {
  opacity: 1;
  transform: none;
}
/* CPUスロット用：下向きツールチップ */
.sb-ability-tooltip.tip-below {
  transform: none;
}
.sb-ability-tooltip.tip-below.visible {
  transform: none;
}
.sb-ability-tooltip.tip-below::after {
  bottom: auto;
  top: -6px;
  background: #fff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sb-tip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sb-tip-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #111;
}
.sb-tip-cond-group {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.sb-tip-cond {
  font-family: 'DotGothic16', sans-serif;
  font-size: 10px;
  font-weight: 800;
  background: #f0f0f0;
  border: 1px solid #ddd;
  color: #333;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.sb-tip-desc {
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
  font-weight: 600;
  white-space: normal;
}

.ability-battle .sb-ability-slot .sb-inline-activate-btn {
  display: none;
}

.ability-battle .sb-inline-ability-label {
  display: block;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(10px, 2.8vw, 13px);
  color: rgba(0,0,0,0.5);
  letter-spacing: .04em;
  margin-bottom: 3px;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  align-self: flex-start;
}
.ability-battle .cpu-ability-area .sb-inline-ability-label {
  color: rgba(0,0,0,0.45);
}

@media (max-width: 767px) {
  .ability-battle .sb-inline-ability-label {
    display: none;
  }
}

.ability-battle .sb-inline-ability-name {
  display: contents; /* 子要素をスロットのflexに直接参加させる */
}
.ability-battle .cpu-ability-area .sb-inline-ability-name {
  display: contents;
}

/* スキルカード文字の主表示。従来の文字デザインを変えずDOMで固定する。 */
.ability-battle .sb-inline-ability-name.sb-dom-ability-card {
  position: absolute;
  inset: 4px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  border-radius: 7px;
  pointer-events: none;
  overflow: hidden;
  container-type: inline-size;
}
/* スキルカードのCanvasを主表示にする。 */
.ability-battle .sb-inline-activate-btn {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(10px, 2.8vw, 12px);
  padding: 4px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.3,1.4,.6,1);
  letter-spacing: .1em;
  border: none;
  line-height: 1.5;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.ability-battle .sb-inline-activate-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
}
.ability-battle .sb-inline-activate-btn:not(:disabled):hover::after {
  background: rgba(255,255,255,0.08);
}

.ability-battle .sb-inline-activate-btn.player-btn {
  background: #111;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.ability-battle .sb-inline-activate-btn.player-btn:not(:disabled):hover {
  background: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-2px) scale(1.04);
}
.ability-battle .sb-inline-activate-btn.player-btn.activating {
  background: #444;
  box-shadow: 0 0 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: ot-pulse 1.4s ease-in-out infinite;
}

.ability-battle .sb-inline-activate-btn.cpu-btn {
  background: rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.35);
  box-shadow: none;
}

.ability-battle .sb-inline-activate-btn:disabled {
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: saturate(0.4) brightness(0.7);
}
.ability-battle .sb-inline-activate-btn.used {
  filter: saturate(0.3) brightness(0.6);
}

@media (min-width: 768px) {
  #screen-spec .game-header,
  #spec-game-root {
    max-width: 520px;
  }

  .ability-battle .sb-top-row,
  .ability-battle .sb-bottom-row,
  .ability-battle .sb-score-bar {
    max-width: 520px;
    gap: 5px;
    padding: 0 8px;
  }
  .ability-battle .sb-top-row {
    margin-top: 1px;
    margin-bottom: 0;
  }
  .ability-battle .sb-score-bar {
    margin-top: 1px;
    margin-bottom: 1px;
  }
  .ability-battle .sb-top-row,
  .ability-battle .sb-bottom-row {
    align-items: stretch;
  }

  /* PC: キャラ枠をスキルスロットと同じサイズに揃える */
  .ability-battle .sb-bottom-char-box,
  .ability-battle .sb-top-char-box {
    min-width: 120px;
    max-width: 120px;
  }
  /* CPU・プレイヤーのchar-frameを同じ高さに揃えて解像度を統一 */
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
  }
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }
  /* PC: 発動ボタンを小さく */
  .ability-battle .sb-activate-btn {
    height: 24px;
    font-size: 13px;
  }
  /* PC: スキルスロット内余白を詰める */
  .ability-battle .sb-top-ability-area,
  .ability-battle .sb-bottom-ability-area {
    gap: 4px;
    padding: 4px 6px;
  }

  /* PC: スコア数字を小さく */
  .ability-battle .sb-score-box-num {
    font-size: clamp(26px, 4.5vw, 36px);
  }

  /* PC: 盤面を拡大（上下左右0.5cm小さく） */
  .ability-battle .ot-board-wrap {
    max-width: 520px;
    padding: 57px;
  }

  .ability-battle .sb-ability-panel {
    max-width: 520px;
  }

  /* メッセージバー: sb-score-bar の padding(0 8px) × 2 = 16px に合わせる
     max-width: 520px - 16px = 504px */
  .ability-battle .sb-message-bar {
    width: calc(100% - 16px);
    max-width: 504px;
  }
}

/* ============================================================
   先手決め演出（コインスピン）
   ============================================================ */
/* ── 順番決め画面：オセロ対局画面と同じ背景＋薄化フィルター ── */
.sb-coin-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: sb-fade-in .3s ease;
}
@media (max-width: 480px) {
  .sb-coin-overlay {
    background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center center / cover no-repeat;
  }
}
.sb-coin-overlay > * {
  position: relative;
  z-index: 1;
}
@keyframes sb-fade-in  { from { opacity:0 } to { opacity:1 } }
@keyframes sb-fade-out { from { opacity:1 } to { opacity:0 } }
.sb-coin-overlay.hiding { animation: sb-fade-out .4s ease forwards; }

.sb-coin-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* reversi15.webp はたぬきフレーム（透過あり）
     100% 100% で全体を確実に表示する */
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi15.webp');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.55));
  max-width: 320px;
  width: calc(100% - 48px);
  aspect-ratio: 1 / 1;
  gap: 0;
  position: relative;
  overflow: visible;
}

/* PC専用：じゅんばんきめをスキル選択画面と同サイズに */
@media (min-width: 481px) {
  .sb-coin-overlay-inner {
    max-width: 480px;
    width: calc(100% - 48px);
  }
}
/* 黒オーバーレイ不要 */
.sb-coin-overlay-inner::before {
  display: none;
}
.sb-coin-frame-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 14% 12% 18%;
  box-sizing: border-box;
  gap: 0;
}

/* タイトル */
.sb-coin-title {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(18px, 5vw, 32px);
  font-weight: 900;
  color: #3a2010;
  letter-spacing: .15em;
  margin-bottom: 0;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* 石 */
.sb-coin {
  width: clamp(72px, 20vw, 120px);
  height: clamp(72px, 20vw, 120px);
  position: relative;
  perspective: 800px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.sb-coin::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.06) 0%, transparent 70%);
  animation: sb-coin-glow 1.6s ease-out forwards;
}
@keyframes sb-coin-glow {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.3; transform: scale(1); }
}
.sb-coin-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: sb-coin-spin 1.8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sb-coin-spin {
  0%   { transform: rotateY(0deg) rotateX(0deg); }
  20%  { transform: rotateY(360deg) rotateX(15deg); }
  60%  { transform: rotateY(var(--spin-deg, 1080deg)) rotateX(5deg); }
  80%  { transform: rotateY(calc(var(--spin-deg, 1080deg) + 12deg)) rotateX(0deg); }
  90%  { transform: rotateY(calc(var(--spin-deg, 1080deg) - 6deg)); }
  100% { transform: rotateY(var(--spin-deg, 1080deg)); }
}
.sb-coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sb-coin-black {
  background: radial-gradient(circle at 36% 30%, #777 0%, #444 30%, #111 100%);
  border: 3px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 24px rgba(0,0,0,0.5),
              inset 0 2px 8px rgba(255,255,255,0.08),
              inset 0 -4px 14px rgba(0,0,0,0.5);
  transform: rotateY(0deg);
}
.sb-coin-white {
  background: radial-gradient(circle at 38% 30%, #ffffff 0%, #e8e8e8 40%, #ccc 100%);
  border: 3px solid rgba(0,0,0,0.10);
  box-shadow: 0 0 20px rgba(0,0,0,0.15),
              inset 0 2px 8px rgba(255,255,255,0.8),
              inset 0 -4px 12px rgba(0,0,0,0.06);
  transform: rotateY(180deg);
}

/* コインの下のラベル（黒/白）- 非表示 */
.sb-coin-disc-label {
  display: none;
}

/* 結果テキスト */
.sb-coin-result {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(18px, 5vw, 32px);
  font-weight: 900;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1.4,.4,1);
  transform: translateY(12px) scale(0.92);
  line-height: 1.7;
  text-align: center;
  color: #3a2010;
}
.sb-coin-result.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sb-coin-result.black { color: #3a2010; }
.sb-coin-result.white { color: #3a2010; }

/* 能力入れ替え画面 */
/* ── スキル選択・スキル入れ替え確認・スキル入れ替え画面：オセロ対局画面と同じ背景＋薄化フィルター ── */
.sb-swap-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 12px;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .sb-swap-overlay {
    background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center center / cover no-repeat;
  }
}
.sb-swap-overlay > * {
  position: relative;
  z-index: 1;
}

.sb-swap-modal {
  background: rgba(14,14,24,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 24px 22px 26px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}
/* スマホは軽く透過された黒背景 */
@media (max-width: 480px) {
  .sb-swap-modal {
    background: rgba(10,10,18,0.82);
    border: 1px solid rgba(255,255,255,0.10);
  }
}

/* ── スキル入れ替え画面：スキル選択と同じ reversi15.webp 枠に変更 ── */
.sb-swap-modal:not(.sb-choice-modal) {
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi15.webp') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45)) !important;
  overflow: visible !important;
  padding: 56px 40px 60px !important;
  max-width: 360px !important;
  width: 92vw !important;
}
@media (min-width: 481px) {
  .sb-swap-modal:not(.sb-choice-modal) {
    max-width: 500px !important;
    padding: 72px 54px 96px !important;
    margin-top: -49px !important;
  }
}



.sb-swap-title {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(20px, 11vw, 42px);
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: .06em;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.7);
}

.sb-swap-subtitle {
  font-family: 'DotGothic16', sans-serif;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* 相手能力エリア */
.sb-swap-incoming-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

.sb-swap-incoming-label {
  font-family: 'DotGothic16', sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: .05em;
}

.sb-swap-incoming-card {
  width: 100%;
  cursor: default;
}

.sb-swap-incoming-card.selected {
  border-color: rgba(255,255,255,0.6) !important;
  box-shadow: 0 0 14px rgba(255,255,255,0.2);
}

.sb-swap-incoming-icon {
  font-size: 20px;
  color: #ffd700;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(255,200,0,0.6);
  margin-bottom: 4px;
}

.sb-swap-incoming-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-swap-incoming-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(11px, 3.5vw, 15px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

.sb-swap-incoming-cond {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

.sb-swap-incoming-desc {
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.sb-swap-arrow {
  font-size: 26px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  margin: 8px 0 10px;
  animation: swapArrowPulse 1.2s ease-in-out infinite;
}

@keyframes swapArrowPulse {
  0%, 100% { opacity: .4; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(3px); }
}

/* スロットグリッド */
.sb-swap-slots-label {
  font-family: 'DotGothic16', sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .04em;
  text-align: center;
}

.sb-swap-slots-sublabel {
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  color: #3a2010;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  text-align: center;
  margin-bottom: 10px;
}

.sb-swap-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.sb-swap-slot {
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: box-shadow 0.18s, transform 0.15s, border-color 0.18s;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.08);
  text-align: left;
}

.sb-swap-slot.filled {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

.sb-swap-slot.empty {
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(255,255,255,0.15);
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

/* カテゴリ色を選択画面と同じ濃さに統一 */
.sb-swap-slot.sb-swap-cat-placement { background: rgba(30,100,200,0.55) !important;  border-color: rgba(30,100,200,0.80) !important; }
.sb-swap-slot.sb-swap-cat-flip      { background: rgba(160,80,230,0.55) !important;  border-color: rgba(160,80,230,0.80) !important; }
.sb-swap-slot.sb-swap-cat-erase     { background: rgba(240,60,60,0.55) !important;   border-color: rgba(240,60,60,0.80) !important; }
.sb-swap-slot.sb-swap-cat-combo     { background: rgba(200,155,0,0.55) !important;   border-color: rgba(200,155,0,0.80) !important; }
.sb-swap-slot.sb-swap-cat-block     { background: rgba(160,100,40,0.55) !important;  border-color: rgba(160,100,40,0.80) !important; }
.sb-swap-slot.sb-swap-cat-hint      { background: rgba(140,140,140,0.50) !important; border-color: rgba(140,140,140,0.75) !important; }
.sb-swap-slot.sb-swap-cat-guard     { background: rgba(40,180,80,0.55) !important;   border-color: rgba(40,180,80,0.80) !important; }
.sb-swap-slot.sb-swap-cat-always    { background: rgba(60,60,60,0.60) !important;    border-color: rgba(120,120,120,0.75) !important; }
.sb-swap-slot.sb-swap-cat-null      { background: rgba(60,60,60,0.60) !important;    border-color: rgba(120,120,120,0.75) !important; }

.sb-swap-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.sb-swap-slot:active {
  transform: scale(0.97);
}

/* スロット右上コーナー三角 */
.sb-swap-slot.filled::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 32px 32px 0;
  border-color: transparent #aaa transparent transparent;
}
.sb-swap-slot.sb-swap-cat-placement::after      { border-color: transparent #0000ff transparent transparent; }
.sb-swap-slot.sb-swap-cat-flip::after      { border-color: transparent #9400d3 transparent transparent; }
.sb-swap-slot.sb-swap-cat-erase::after      { border-color: transparent #ff0000 transparent transparent; }
.sb-swap-slot.sb-swap-cat-combo::after      { border-color: transparent #ffff00 transparent transparent; }
.sb-swap-slot.sb-swap-cat-block::after      { border-color: transparent #cd853f transparent transparent; }
.sb-swap-slot.sb-swap-cat-hint::after      { border-color: transparent #c0c0c0 transparent transparent; }
.sb-swap-slot.sb-swap-cat-guard::after      { border-color: transparent #008000 transparent transparent; }
.sb-swap-slot.sb-swap-cat-always::after      { border-color: transparent #444444 transparent transparent; }
.sb-swap-slot.sb-swap-cat-null::after        { border-color: transparent #444444 transparent transparent; }

/* スロット 名前行（★ + スキル名 + 条件タグ 横並び） */
.sb-swap-slot-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}

.sb-swap-slot-icon {
  font-size: 13px;
  font-family: 'DotGothic16', sans-serif;
  color: #ffd700;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(255,200,0,0.6);
  flex-shrink: 0;
  line-height: 1;
}

.sb-swap-slot-empty-icon {
  font-size: 24px;
  color: rgba(255,255,255,0.2);
  line-height: 1;
}

.sb-swap-slot-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(11px, 3.5vw, 15px);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

.sb-swap-slot.empty .sb-swap-slot-name {
  color: rgba(255,255,255,0.3);
  font-size: 13px;
}

.sb-swap-slot-desc {
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.sb-swap-slot-cond {
  font-family: 'DotGothic16', sans-serif;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-bottom: 2px solid rgba(255,255,255,0.15);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  border-radius: 5px;
  padding: 1px 8px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 2px;
}

.sb-swap-slot-hint {
  font-size: 12px;
  color: rgba(0,0,0,0.4);
  margin-top: 2px;
  opacity: .8;
}

.sb-swap-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 1戦目の戻るボタン */
.sb-choice-back-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.5) !important;
}
.sb-choice-back-btn:hover {
  background: #222222 !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* 選択済みカードのハイライト（カテゴリ色のグロー） */
.sb-choice-card.selected {
  outline: 2.5px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 20px rgba(255,255,255,0.15), 0 4px 16px rgba(0,0,0,0.5);
  transform: translateY(-2px) scale(1.02);
}
.sb-choice-card.selected.sb-choice-cat-placement { background: rgba(30, 100, 200, 0.80); border-color: rgba(100, 160, 255, 0.9); }
.sb-choice-card.selected.sb-choice-cat-flip      { background: rgba(148,0,211,0.80); border-color: rgba(200, 100, 255, 0.9); }
.sb-choice-card.selected.sb-choice-cat-erase     { background: rgba(220, 50, 50, 0.80); border-color: rgba(255, 120, 120, 0.9); }
.sb-choice-card.selected.sb-choice-cat-combo     { background: rgba(180, 135, 0, 0.80); border-color: rgba(255, 210, 50, 0.9); }
.sb-choice-card.selected.sb-choice-cat-block     { background: rgba(160, 100, 40, 0.80); border-color: rgba(210, 150, 80, 0.9); }
.sb-choice-card.selected.sb-choice-cat-hint      { background: rgba(130, 130, 130, 0.75); border-color: rgba(200, 200, 200, 0.9); }
.sb-choice-card.selected.sb-choice-cat-guard     { background: rgba(30, 160, 60, 0.80); border-color: rgba(80, 220, 110, 0.9); }
.sb-choice-card.selected.sb-choice-cat-always    { background: rgba(60, 60, 60, 0.85); border-color: rgba(160, 160, 160, 0.9); }
.sb-choice-card.selected.sb-choice-cat-null      { background: rgba(60, 60, 60, 0.85); border-color: rgba(160, 160, 160, 0.9); }

.sb-swap-slot.swap-selected {
  border-color: rgba(255,255,255,0.7) !important;
  box-shadow: 0 0 14px rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.sb-swap-overlay .ot-btn,
.sb-continue-overlay .ot-btn {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(14px, 3.5vw, 17px);
  padding: clamp(9px, 2.5vw, 12px) clamp(18px, 5vw, 26px);
  background: #ffffff;
  border: 2px solid #ffffff;
  color: #111111;
  cursor: pointer;
  letter-spacing: .08em;
  border-radius: 50px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.3);
  transition: all .18s;
  text-shadow: none;
  outline: none;
  -webkit-appearance: none;
  font-weight: 800;
}
.sb-swap-overlay .ot-btn:hover:not(:disabled),
.sb-continue-overlay .ot-btn:hover:not(:disabled) {
  background: #f0f0f0;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 8px 22px rgba(0,0,0,0.3);
}
.sb-swap-overlay .ot-btn:active:not(:disabled),
.sb-continue-overlay .ot-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.sb-swap-overlay .ot-btn.secondary,
.sb-continue-overlay .ot-btn.secondary {
  background: #111111;
  color: #ffffff;
  box-shadow: 0 4px 0 rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.3);
  text-shadow: none;
  font-weight: 700;
}
.sb-swap-overlay .ot-btn.secondary:hover,
.sb-continue-overlay .ot-btn.secondary:hover {
  background: #222222;
  border-color: rgba(255,255,255,0.5);
}

/* 継続確認画面 */
/* ── 連勝画面：オセロ対局画面と同じ背景＋薄化フィルター ── */
.sb-continue-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
@media (max-width: 480px) {
  .sb-continue-overlay {
    background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center center / cover no-repeat;
  }
}
.sb-continue-overlay > * {
  position: relative;
  z-index: 1;
}

.sb-continue-modal {
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi15.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45));
  overflow: visible;
  padding: 56px 40px 60px;
  max-width: 360px;
  width: 92vw;
  min-width: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  animation: continueModalIn .3s ease;
}

@keyframes continueModalIn {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.sb-continue-face {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #3a2010;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.sb-continue-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.sb-continue-wins {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 400;
  color: #3a2010;
  letter-spacing: .06em;
  line-height: 1.2;
  text-shadow: none;
  margin: 0;
}

.sb-continue-title {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(14px, 3.5vw, 16px);
  color: #3a2010;
  font-weight: 400;
  letter-spacing: .04em;
  text-shadow: none;
  margin: 0;
}

.sb-continue-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}

.sb-continue-actions .ot-btn {
  width: 75%;
}

/* スキルカットイン演出: 土台定義。
   7230行台以降の refresh ブロックが現在の見た目を後勝ちで上書きする。 */
/* ═══════════════════════════════════════════
   カットイン v4 ─ カードスタイル 中央配置
   ═══════════════════════════════════════════ */

/* 位置コンテナ：垂直中央 */
.sb-cutin {
  position: absolute;
  inset: 0;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  pointer-events: none;
  overflow: visible;
}

/* アニメーションラッパー */
.sb-cutin-wrap {
  position: relative;
  width: 100%;
  animation: ci-in .28s cubic-bezier(.12,0,.22,1) both;
}

/* カード本体 */
.sb-cutin-card {
  position: relative;
  height: 130px;          /* ← 縮小（元177px）*/
  border-radius: 14px;
  overflow: visible;
  z-index: 1;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 32px 80px rgba(0,0,0,.88),
    0 10px 28px rgba(0,0,0,.64);
}
/* エフェクト・背景・キャラをカード内にクリップするマスク */
.sb-cutin-card-inner {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  z-index: 0;
}

/* キャラ画像：カード下端に揃え・上方向へはみ出す */
.sb-cutin-char {
  position: absolute;
  bottom: 0;
  width: 44%;
  height: 177px;          /* カード元サイズ固定 → カードを縮めても画像サイズ変わらず */
  object-fit: contain;
  object-position: bottom center;
  z-index: 20;
  opacity: 1;
}
.sb-cutin-char.side-l { left: 4px; }
.sb-cutin-char.side-r { right: 4px; }

/* テキストブロック：カード外（sb-cutin-card基準）に配置して影が切れない */
.sb-cutin-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 0px;
  pointer-events: none;
}
.sb-cutin-text.side-r { right: 5%; align-items: flex-end; text-align: right; }
.sb-cutin-text.side-l { left:  5%; align-items: flex-start; text-align: left; }

.sb-cutin-text-star {
  font-family: 'DotGothic16', sans-serif;
  font-size: 16px;
  color: #ffd700;
  text-shadow:
    0 0 12px rgba(255,210,0,.9),
    0 0 4px rgba(255,210,0,1),
    0 0 28px rgba(255,180,0,.5);
  line-height: 1;
  letter-spacing: 4px;
  margin-bottom: 6px;
}
.sb-cutin-text-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(22px, 6.5vw, 34px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.15;
  text-shadow:
    0 0 40px rgba(255,255,255,.22),
    2px 2px 0 rgba(0,0,0,.98),
    5px 5px 0 rgba(0,0,0,.55),
    8px 8px 14px rgba(0,0,0,.4);
  white-space: nowrap;
}

/* BG・フラッシュ・補助 */
.sb-cutin-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sb-cutin-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  animation: ci-wf 2.5s ease forwards;
}
.sb-cutin-line {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
}
.sb-cutin-eff {
  position: absolute;
  pointer-events: none;
}

/* 退場 */
.sb-cutin.cutin-exit .sb-cutin-wrap {
  animation: ci-out .22s cubic-bezier(.5,0,.9,.7) forwards !important;
}

/* スマホ */
@media (max-width: 430px) {
  .sb-cutin           { left: 8px; right: 8px; }
  .sb-cutin-card      { height: 110px; border-radius: 12px; }
  .sb-cutin-char      { width: 42%; height: 130px; }
  .sb-cutin-text-name { font-size: clamp(20px, 6.5vw, 28px); }
  .sb-cutin-text-star { font-size: 14px; }
}

/* デスクトップ */
@media (min-width: 431px) {
  .sb-cutin           { left: 80px; right: 80px; }
  .sb-cutin-card      { height: 160px; }
  .sb-cutin-char      { height: 234px; }
  .sb-cutin-text-name {
    font-size: clamp(42px, 7.5vw, 62px);
    text-shadow:
      0 0 60px rgba(255,255,255,.35),
      3px 3px 0 rgba(0,0,0,1),
      7px 7px 0 rgba(0,0,0,.65),
      12px 12px 20px rgba(0,0,0,.45);
  }
  .sb-cutin-text-star { font-size: 24px; letter-spacing: 6px; }
}

/* ═══ キーフレーム ═══ */

/* 入退場 */
@keyframes ci-in  { 0%{opacity:0;transform:scale(.84) translateY(10px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
@keyframes ci-out { 0%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(.88) translateY(-8px)} }

/* フラッシュ・BG */
@keyframes ci-wf  { 0%{opacity:0} 2%{opacity:.38} 10%{opacity:0} 100%{opacity:0} }
@keyframes ci-bg-s{ 0%{opacity:0} 6%{opacity:1} 100%{opacity:1} }

/* エフェクト共通 */
@keyframes ci-ring  { 0%{transform:scale(0);opacity:.95} 75%{transform:scale(3.2);opacity:0} }
@keyframes ci-ring2 { 0%{transform:scale(.3);opacity:.7} 100%{transform:scale(4.5);opacity:0} }
@keyframes ci-glow  { 0%{transform:scale(0);opacity:.6} 100%{transform:scale(6);opacity:0} }
@keyframes ci-spark { 0%{opacity:0;transform:scale(0) rotate(0)} 18%{opacity:1;transform:scale(1) rotate(12deg)} 70%{opacity:.8} 100%{opacity:0;transform:scale(.15) rotate(48deg)} }
@keyframes ci-arc   { 0%{stroke-dashoffset:280;opacity:.9} 62%{stroke-dashoffset:0;opacity:.55} 100%{opacity:0} }
@keyframes ci-shd   { 0%{stroke-dashoffset:320;opacity:0} 3%{opacity:.9} 55%{stroke-dashoffset:0;opacity:1} 82%{opacity:.5} 100%{opacity:0} }
@keyframes ci-sla   { 0%{transform:translateX(-160%);opacity:.98} 22%{transform:translateX(160%);opacity:.65} 23%{opacity:0} }
@keyframes ci-slb   { 0%,10%{opacity:0} 11%{transform:translateX(-160%);opacity:.72} 34%{transform:translateX(160%)} 35%{opacity:0} }
@keyframes ci-slc   { 0%,20%{opacity:0} 21%{transform:translateX(-160%);opacity:.42} 44%{transform:translateX(160%)} 45%{opacity:0} }
@keyframes ci-bar-t { 0%{transform:translateY(-100%)} 22%{transform:translateY(0)} 100%{transform:translateY(0)} }
@keyframes ci-bar-b { 0%{transform:translateY(100%)}  22%{transform:translateY(0)} 100%{transform:translateY(0)} }
@keyframes ci-sl-l  { 0%{left:-4%} 48%{left:108%} 49%{opacity:0} }
@keyframes ci-sl-r  { 0%{right:-4%} 48%{right:108%} 49%{opacity:0} }
@keyframes ci-bd-rs { 0%{transform:translateY(22px);opacity:.8} 50%{transform:translateY(0);opacity:.55} 100%{opacity:0} }
@keyframes ci-line  { 0%{opacity:0;transform:scaleX(0);transform-origin:left} 28%{opacity:1;transform:scaleX(1)} 100%{opacity:1} }
@keyframes ci-line-r{ 0%{opacity:0;transform:scaleX(0);transform-origin:right} 28%{opacity:1;transform:scaleX(1)} 100%{opacity:1} }
@keyframes ci-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes ci-drift { 0%{transform:translateY(0) translateX(0);opacity:0} 15%{opacity:.7} 100%{transform:translateY(-28px) translateX(8px);opacity:0} }
@keyframes ci-rotate{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes ci-znoise{ 0%,100%{opacity:.04} 33%{opacity:.08} 66%{opacity:.03} }

/* キャラ入場なし（最初から表示） */
@keyframes ci-char-show { 0%{opacity:1} 100%{opacity:1} }

/* テキスト入場 */
@keyframes ci-tx-r    { 0%,42%{opacity:0;transform:translateY(-50%) translateX(18px)} 62%{opacity:1;transform:translateY(-50%)} 100%{transform:translateY(-50%)} }
@keyframes ci-tx-l    { 0%,42%{opacity:0;transform:translateY(-50%) translateX(-18px)} 62%{opacity:1;transform:translateY(-50%)} 100%{transform:translateY(-50%)} }
@keyframes ci-tx-flip { 0%,40%{opacity:0;transform:translateY(-50%) rotateX(60deg);filter:blur(2px)} 60%{opacity:1;transform:translateY(-50%);filter:blur(0)} 100%{transform:translateY(-50%)} }
@keyframes ci-tx-sc-l { 0%,40%{clip-path:inset(0 100% 0 0);opacity:1} 62%{clip-path:inset(0 0% 0 0)} 100%{} }
@keyframes ci-tx-sc-r { 0%,40%{clip-path:inset(0 0 0 100%);opacity:1} 62%{clip-path:inset(0 0 0 0%)} 100%{} }
@keyframes ci-tx-ru-r { 0%,12%{opacity:0;transform:translateY(-50%) translateX(22px)} 24%{opacity:1;transform:translateY(-50%)} 100%{transform:translateY(-50%)} }
@keyframes ci-tx-ru-l { 0%,12%{opacity:0;transform:translateY(-50%) translateX(-22px)} 24%{opacity:1;transform:translateY(-50%)} 100%{transform:translateY(-50%)} }
@keyframes ci-tx-dn   { 0%,25%{opacity:0;transform:translateY(calc(-50% - 20px))} 42%{opacity:1;transform:translateY(-50%)} 100%{transform:translateY(-50%)} }
@keyframes ci-tx-gw   { 0%,35%{opacity:0;filter:blur(6px)} 55%{opacity:1;filter:blur(0)} 100%{filter:blur(0)} }
@keyframes ci-tx-up   { 0%,35%{opacity:0;transform:translateY(calc(-50% + 20px))} 54%{opacity:1;transform:translateY(-50%)} 100%{transform:translateY(-50%)} }
@keyframes ci-tx-alw  { 0%,30%{opacity:0;transform:translateY(-50%) scale(.85)} 50%{opacity:1;transform:translateY(-50%) scale(1)} 100%{transform:translateY(-50%)} }

/* ═══════════════════════════════════════════════════════════════════
   スマホ統一レイアウト：全スマホ（Reno5A等を含む）で1画面に収める
   ─────────────────────────────────────────────────────────────────
   対象: タイトル画面モード選択 / わかバトル対局画面
   ─────────────────────────────────────────────────────────────────
   重要: このブロックはファイル先頭の @media(max-width:480px) より
         後に定義されているため、≤480pxの端末でも値を上書きできる。
         481px〜767px の端末も含め、全スマホで同一サイズに揃える。
   注: このブロック以降に @media(max-width:390px) / (max-width:340px)
       が続くため、極小スマホではそちらが優先される（上書き可）
   注: ≤480px のボード横パディング(14px 36px)はファイル末尾の
       @media(max-width:480px) ブロックでも設定しており同値のため
       競合なし
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ════════════════════════════════════════
     タイトル画面：全スマホで小型スマホと同じ
     コンパクトサイズに統一
     ────────────────────────────────────────
     Reno5A等でわかバトルカードが画面内に
     収まるよう、ロゴエリアを縮小する
     ════════════════════════════════════════ */

  /* コンテナの min-height:100vh を解除して内容高さに追従 */
  #reversi {
    min-height: auto;
  }
  #screen-title.screen {
    min-height: auto;
  }

  /* タイトル画面：上部パディングを縮小してモードカードを画面内に収める */
  #screen-title {
    height: auto;
    padding: 140px 20px 0;
    justify-content: flex-start;
    align-items: center;
  }

  /* ロゴエリア：高さ・マージンを縮小してカード2枚が収まるスペースを確保 */
  #screen-title .title-logo-area {
    height: 84px;
    margin-bottom: 32px;
  }
  /* ロゴ内ディスク間隔を縮小 */
  #screen-title .title-discs {
    margin-bottom: 6px;
  }

  /* コンテンツ幅制限 */
  #screen-title .title-content {
    max-width: 380px;
    width: 100%;
    padding-bottom: 48px;
  }

  /* モードセクション・カード：コンパクトスタイル */
  #screen-title .mode-section {
    gap: 8px;
    width: 100%;
  }
  #screen-title .mode-cards {
    gap: 8px;
    width: 100%;
  }
  #screen-title .mode-card {
    border-radius: 16px;
    padding: 12px 16px;
  }

  /* ════════════════════════════════════════
     通常リバーシ・わかバトル対局画面：
     全スマホで同一サイズに統一
     ════════════════════════════════════════ */

  /* ── 通常リバーシ・わかバトル共通：ゲーム全体の最大幅を375pxに ── */
  .reversi-game {
    max-width: 375px;
  }

  /* ── 通常リバーシ：盤面パディングを全スマホで統一 ── */
  .reversi-game .ot-board-wrap {
    padding: 14px 36px;
  }

  /* ── わかバトル：盤面ラッパーを340px制限＋縦パディング縮小 ──
        340px × 1マス分 = 8px幅, 内側=340-72=268px, 高さも268px
        で対局画面全体が1画面に収まるサイズ                         */
  .ability-battle .ot-board-wrap {
    max-width: 340px;
    padding: 36px;
  }

  /* ── わかバトル：スコアバー・上下エリアを340px制限 ── */
  .ability-battle .sb-top-row,
  .ability-battle .sb-bottom-row {
    max-width: 340px;
    padding: 2px 6px;
    gap: 4px;
  }
  .ability-battle .sb-score-bar {
    max-width: 340px;
    padding: 0 6px;
    gap: 4px;
  }

  /* ── メッセージバー ── */
  .ability-battle .sb-message-bar {
    max-width: 328px;
    width: calc(100% - 12px);
  }

  /* ── キャラ枠：flex比率でスロットと同サイズに揃える ── */
  .ability-battle .sb-top-char-box,
  .ability-battle .sb-bottom-char-box {
    min-width: unset;
    max-width: unset;
    width: 0;
    flex: 1 0 0;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
  }
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    width: 100%;
    height: 100%;
    flex: unset;
    aspect-ratio: 1 / 1;
    min-height: unset;
    max-height: unset;
  }

  /* ── スコア数字：上限を固定 ── */
  .ability-battle .sb-score-box-num {
    font-size: clamp(20px, 6vw, 24px);
  }
  .ability-battle .sb-score-box-label {
    font-size: 9px;
  }

  /* ── 発動ボタン：高さ・フォントサイズを固定 ── */
  .ability-battle .sb-activate-btn {
    height: 22px;
    font-size: 10px;
  }
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }

  /* ── 能力エリアのpadding・gap縮小 ── */
  .ability-battle .sb-top-ability-area,
  .ability-battle .sb-bottom-ability-area {
    gap: 3px;
    padding: 3px 4px;
  }
  /* ── スマホ：プレイヤー行のサイズをCPU行と完全一致させる ──
       [原因] sb-bottom-ability-col に align-self:stretch（デフォルト）が効くと
              ボタン行分だけ col が縦に伸び、ability-area も flex:1 で
              その高さを使い切るためスキル枠がCPU側より大きく見える。
              また absolute の基準が sb-bottom-row だとボタンがキャラ下に来る。
       [解決] 1) sb-bottom-ability-col に position:relative + align-self:flex-start
                 → col の高さをスキル枠のコンテンツのみで決定
              2) sb-bottom-ability-area の flex:1 を解除
                 → 高さが自然なコンテンツサイズ（CPU側と同一）
              3) sb-player-activate-row を sb-bottom-ability-col 基準で absolute
                 → ボタンがスキル枠の真下・各スロット幅に一致して配置
              4) sb-bottom-row に margin-bottom でボタン行分のスペースを確保   */
  .ability-battle .sb-bottom-row {
    margin-bottom: 20px;
  }
  .ability-battle .sb-bottom-ability-col {
    position: relative;
    align-self: flex-start;
    width: 0;
    flex: 3 0 0;
  }
  .ability-battle .sb-bottom-ability-area {
    flex: unset;
    width: 100%;
  }
  .ability-battle .sb-player-activate-row {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 3px;
    gap: 3px;
    padding: 0 4px;
  }
  .ability-battle .sb-bottom-char-box {
    align-self: flex-start;
  }
}

/* スマホ向けレスポンシブ調整 */
@media (max-width: 390px) {
  .ability-battle .sb-top-row,
  .ability-battle .sb-bottom-row,
  .ability-battle .sb-score-bar {
    padding: 0 6px;
    gap: 5px;
  }
  .ability-battle .sb-top-ability-area,
  .ability-battle .sb-bottom-ability-area {
    gap: 4px;
    padding: 4px 5px;
  }
  .ability-battle .sb-top-char-box,
  .ability-battle .sb-bottom-char-box {
    min-width: unset !important;
    max-width: unset !important;
    width: 0 !important;
    flex: 1 0 0 !important;
  }
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: 100% !important;
    min-height: unset !important;
    max-height: unset !important;
  }
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }
  .ability-battle .sb-activate-btn {
    height: 24px;
  }
  .ability-battle .sb-score-box-num {
    font-size: clamp(18px, 7vw, 28px);
  }
  .ability-battle .sb-score-box-label {
    font-size: clamp(7px, 2vw, 9px);
  }
  .ability-battle .sb-activate-btn {
    font-size: clamp(9px, 2.6vw, 11px);
  }
  .ability-battle .sb-player-activate-row {
    gap: 4px;
    padding: 0 5px;
  }
  /* 390px：ability-col を基準点に維持、ability-area サイズをCPU側と統一 */
  .ability-battle .sb-bottom-ability-col {
    position: relative;
    align-self: flex-start;
    width: 0;
    flex: 3 0 0;
  }
  .ability-battle .sb-bottom-ability-area {
    flex: unset;
    width: 100%;
  }
  .ability-battle .sb-bottom-char-box {
    align-self: flex-start;
  }
  /* 390px：ボタン高さ24px分を確保 */
  .ability-battle .sb-bottom-row {
    margin-bottom: 30px;
  }

  /* メッセージバー: sb-score-bar の padding(0 6px) × 2 = 12px に合わせる
     max-width: 420px - 12px = 408px */
  .ability-battle .sb-message-bar {
    width: calc(100% - 12px);
    max-width: 408px;
  }
}
@media (max-width: 340px) {
  .ability-battle .sb-top-ability-area,
  .ability-battle .sb-bottom-ability-area {
    padding: 3px 4px;
    gap: 3px;
  }
  .ability-battle .sb-top-char-box,
  .ability-battle .sb-bottom-char-box {
    min-width: unset !important;
    max-width: unset !important;
    width: 0 !important;
    flex: 1 0 0 !important;
  }
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: 100% !important;
    min-height: unset !important;
    max-height: unset !important;
  }
  .ability-battle .sb-score-box-num {
    font-size: 16px;
  }
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }
  .ability-battle .sb-activate-btn {
    height: 22px;
  }
  .ability-battle .sb-activate-btn {
    font-size: 9px;
  }
  /* 340px：ability-col を基準点に維持、ability-area サイズをCPU側と統一 */
  .ability-battle .sb-bottom-ability-col {
    position: relative;
    align-self: flex-start;
    width: 0;
    flex: 3 0 0;
  }
  .ability-battle .sb-bottom-ability-area {
    flex: unset;
    width: 100%;
  }
  .ability-battle .sb-bottom-char-box {
    align-self: flex-start;
  }
  .ability-battle .sb-player-activate-row {
    gap: 3px;
    padding: 0 4px;
  }
  /* 340px：ボタン高さ22px分を確保 */
  .ability-battle .sb-bottom-row {
    margin-bottom: 20px;
  }
}
@media (max-height: 700px) {
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }
  .ability-battle .sb-activate-btn {
    height: 24px;
  }
  .ability-battle .sb-activate-btn {
    font-size: clamp(9px, 2.6vw, 12px);
  }
}

.ot-disc.disc-ability {
  animation: discAbilityDrop .45s cubic-bezier(.22,1.5,.4,1) both;
}

@keyframes discAbilityDrop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.ot-disc.disc-flipped {
  animation: discFlippedIn .45s cubic-bezier(.22,1.5,.4,1) both,
             discFlippedGlow .6s ease-out .1s both;
}

@keyframes discFlippedIn {
  0%   { transform: scaleX(0); opacity: 0.4; }
  55%  { transform: scaleX(1.12); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes discFlippedGlow {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 20px 8px rgba(160,80,230,0.9),
                     inset 0 3px 8px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  0px 0px rgba(160,80,230,0),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
}

.ot-disc.disc-set {
  animation: discSetDrop .55s cubic-bezier(.18,1.4,.4,1) both,
             discSetGlow 3.8s ease-out .08s both;
}

@keyframes discSetDrop {
  0%   { transform: scale(0) translateY(-6px); opacity: 0; }
  55%  { transform: scale(1.12) translateY(2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes discSetGlow {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 28px 12px rgba(50,160,240,1.0),
                     inset 0 3px 8px rgba(200,240,255,0.5); }
  30%  { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 20px 8px rgba(40,140,220,0.7),
                     inset 0 3px 8px rgba(180,230,255,0.3); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0   0px 0px rgba(40,140,220,0),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
}

.ot-disc.disc-pass {
  animation: discPassDrop .38s cubic-bezier(.22,1.5,.4,1) both,
             discPassGlow  .7s ease-out .05s both;
}

@keyframes discPassDrop {
  0%   { transform: scale(0.3) translateY(-8px); opacity: 0; }
  55%  { transform: scale(1.12) translateY(2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes discPassGlow {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 28px 12px rgba(240,190,0,1.0),
                     inset 0 3px 8px rgba(255,255,255,0.4); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0   0px 0px rgba(240,190,0,0),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
}

.ability-battle .ot-cell.cell-erased {
  animation: cellErasedFlash .55s ease-out both;
}

@keyframes cellErasedFlash {
  0%   { background: rgba(239,68,68,0.85);
         box-shadow: inset 0 0 16px 4px rgba(255,100,100,0.9); }
  40%  { background: rgba(239,68,68,0.5); }
  100% { background: transparent; box-shadow: none; }
}

.ot-disc.disc-guarded {
  animation: discGuardedPulse 1.4s ease-in-out infinite;
  overflow: visible;
  position: relative;
}

/* flip アニメーションと disc-guarded が同時に付いた場合の共存ルール */
.ot-disc.flip.disc-guarded {
  animation: discFlippedIn .45s cubic-bezier(.22,1.5,.4,1) both,
             discGuardedPulse 1.4s ease-in-out .45s infinite;
}
.ot-disc.disc-set.disc-guarded {
  animation: discSetDrop .55s cubic-bezier(.18,1.4,.4,1) both,
             discGuardedPulse 1.4s ease-in-out .55s infinite;
}
.ot-disc.disc-pass.disc-guarded {
  animation: discPassDrop .38s cubic-bezier(.22,1.5,.4,1) both,
             discGuardedPulse 1.4s ease-in-out .38s infinite;
}

@keyframes discGuardedPulse {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 3px rgba(40,180,80,0.5),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
  50%  { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 22px 9px rgba(80,220,120,0.8),
                     inset 0 3px 8px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 3px rgba(40,180,80,0.5),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
}

/* 防御残りターン数インジケーター（石の上に重ねて表示） */
.ability-battle .ot-disc .guard-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(11px, 3vw, 15px);
  font-weight: 900;
  color: rgba(160, 255, 180, 1.0);
  text-shadow:
    0 0 6px rgba(40, 200, 80, 0.95),
    0 0 16px rgba(20, 160, 50, 0.7),
    0 1px 2px rgba(0,0,0,0.9);
  z-index: 6;
  pointer-events: none;
  animation: guard-num-pulse 1.4s ease-in-out infinite;
  letter-spacing: 0;
}

@keyframes guard-num-pulse {
  0%,100% { transform: scale(1.0);   opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1.0;  }
}

.ot-disc.disc-cpu-guarded {
  animation: discCpuGuardedPulse 1.4s ease-in-out infinite;
  overflow: visible;
  position: relative;
}

/* flip アニメーションと disc-cpu-guarded が同時に付いた場合の共存ルール */
.ot-disc.flip.disc-cpu-guarded {
  animation: discFlippedIn .45s cubic-bezier(.22,1.5,.4,1) both,
             discCpuGuardedPulse 1.4s ease-in-out .45s infinite;
}
.ot-disc.disc-set.disc-cpu-guarded {
  animation: discSetDrop .55s cubic-bezier(.18,1.4,.4,1) both,
             discCpuGuardedPulse 1.4s ease-in-out .55s infinite;
}
.ot-disc.disc-pass.disc-cpu-guarded {
  animation: discPassDrop .38s cubic-bezier(.22,1.5,.4,1) both,
             discCpuGuardedPulse 1.4s ease-in-out .38s infinite;
}

@keyframes discCpuGuardedPulse {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 3px rgba(10,130,40,0.45),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
  50%  { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 20px 8px rgba(40,180,80,0.75),
                     inset 0 3px 8px rgba(255,255,255,0.25); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 3px rgba(10,130,40,0.45),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
}

.ability-battle .ot-board-wrap.board-ability-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  animation: boardAbilityFlash .9s ease-out forwards;
  z-index: 10;
}

.ability-battle .ot-board-wrap.board-ability-flash-player::after {
  background: radial-gradient(circle at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 50%, transparent 75%);
}

.ability-battle .ot-board-wrap.board-ability-flash-cpu::after {
  background: radial-gradient(circle at center, rgba(80,80,80,0.35) 0%, rgba(40,40,40,0.15) 50%, transparent 75%);
}

@keyframes boardAbilityFlash {
  0%   { opacity: 0; transform: scale(0.85); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* カットイン退場アニメも少し長めに */
.cutin-exit .sb-cutin-band {
  animation-duration: .4s !important;
}
.cutin-exit .sb-cutin-content {
  animation-duration: .35s !important;
}
/* 指南ハイライト（guided hint）― 白い強調枠でくっきり表示 */
.ability-battle .ot-cell.hint-guided {
  background: rgba(255, 255, 255, 0.22) !important;
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: -2px;
  border-radius: 4px;
  animation: guided-cell-pulse 0.75s ease-in-out infinite;
  z-index: 1;
}
.ability-battle .ot-cell.hint-guided::after { content: none; }
@keyframes guided-cell-pulse {
  0%,100% { outline-color: rgba(200,200,200,0.6); background: rgba(255,255,255,0.12) !important; }
  50%      { outline-color: rgba(255,255,255,1.0); background: rgba(255,255,255,0.32) !important; }
}

/* 未来予知ポップアップ */
.sb-future-popup {
  position: absolute;
  background: #fff;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 3px 10px;
  font-family: 'DotGothic16', sans-serif;
  font-size: 15px;
  color: #111;
  text-shadow: none;
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  animation: future-popup-in 0.12s ease;
}
.sb-future-popup.below {
  animation: future-popup-in-below 0.12s ease;
}
@keyframes future-popup-in {
  from { opacity: 0; transform: translateY(4px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)  scale(1);   }
}
@keyframes future-popup-in-below {
  from { opacity: 0; transform: translateY(-4px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.ability-battle .sb-ability-slot.slot-passive {
  cursor: default;
  opacity: 1;
}
.ability-battle .sb-ability-slot.slot-passive:hover {
  filter: none;
  transform: none;
}

/* ============================================================
   スキル選択画面（ダークテーマ）
   ============================================================ */
/* 能力選択画面（試合開始前・コイントスの前に表示） */
.sb-choice-modal {
  max-width: 360px;
  width: 92vw;
}

.sb-choice-chapter {
  text-align: center;
  font-size: 12px;
  font-family: 'DotGothic16', sans-serif;
  font-weight: 700;
  color: #3a2010;
  letter-spacing: .08em;
  margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.sb-choice-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.sb-choice-card {
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: box-shadow 0.18s, transform 0.15s, border-color 0.18s;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
}
.sb-choice-card:hover  { transform: translateY(-2px) scale(1.01); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.sb-choice-card:active { transform: scale(0.98); }

/* 系統別カラー: ダーク背景 + カテゴリ色のtint（alpha 0.14）+ ボーダー */
.sb-choice-cat-placement  { background: rgba(30, 100, 200, 0.55); border-color: rgba(30, 100, 200, 0.80); }
.sb-choice-cat-flip       { background: rgba(160, 80, 230, 0.55); border-color: rgba(160, 80, 230, 0.80); }
.sb-choice-cat-erase      { background: rgba(240, 60, 60, 0.55);  border-color: rgba(240, 60, 60, 0.80); }
.sb-choice-cat-combo      { background: rgba(200, 155, 0, 0.55);  border-color: rgba(200, 155, 0, 0.80); }
.sb-choice-cat-block      { background: rgba(160, 100, 40, 0.55); border-color: rgba(160, 100, 40, 0.80); }
.sb-choice-cat-hint       { background: rgba(140, 140, 140, 0.50); border-color: rgba(140, 140, 140, 0.75); }
.sb-choice-cat-guard      { background: rgba(40, 180, 80, 0.55);  border-color: rgba(40, 180, 80, 0.80); }
.sb-choice-cat-always     { background: rgba(60, 60, 60, 0.60); border-color: rgba(120, 120, 120, 0.75); }
.sb-choice-cat-null       { background: rgba(60, 60, 60, 0.60); border-color: rgba(120, 120, 120, 0.75); }

/* 右上コーナー三角（テーマカラー） */
/* border-width: top right bottom left → top=0, right=38px, bottom=38px, left=0 で右上三角になる */
.sb-choice-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 38px 38px 0;
  border-color: transparent transparent transparent transparent;
}

/* 選択時のみ・カテゴリ補色（淡め）三角 */
.sb-choice-card.selected::after                          { border-color: transparent rgba(200,200,200,0.7) transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-placement::after  { border-color: transparent #ffe680 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-flip::after       { border-color: transparent #b8f075 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-erase::after      { border-color: transparent #7eedec transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-combo::after      { border-color: transparent #8888e8 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-block::after      { border-color: transparent #6aabdf transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-hint::after       { border-color: transparent #888888 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-guard::after      { border-color: transparent #e06090 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-always::after     { border-color: transparent #cccccc transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-null::after       { border-color: transparent #cccccc transparent transparent; }

.sb-choice-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}
.sb-choice-icon {
  font-size: 13px;
  font-family: 'DotGothic16', sans-serif;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255,200,0,0.6);
  flex-shrink: 0;
  letter-spacing: 1px;
  line-height: 1;
}
.sb-choice-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(11px, 3.5vw, 15px);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  display: inline;
  flex-shrink: 0;
  margin-bottom: 0;
}
.sb-choice-cond-tag {
  font-family: 'DotGothic16', sans-serif;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-bottom: 2px solid rgba(255,255,255,0.15);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  box-shadow: none;
  padding: 1px 8px;
  border-radius: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 2px;
}
.sb-choice-desc {
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
/* 反転系（リバース）発動中：選択可能な相手石ハイライト */

/* セル枠：紫色の光る枠 */
.ability-battle .ot-cell.hint-flip {
  outline: 2.5px solid rgba(160, 80, 230, 0.9);
  outline-offset: -2px;
  border-radius: 4px;
  background: rgba(110, 30, 190, 0.18);
  animation: flip-cell-pulse 1.1s ease-in-out infinite;
  z-index: 1;
}

@keyframes flip-cell-pulse {
  0%   { outline-color: rgba(160,80,230,0.6); background: rgba(110,30,190,0.10); }
  50%  { outline-color: rgba(210,140,255,1.0); background: rgba(150,60,220,0.28); }
  100% { outline-color: rgba(160,80,230,0.6); background: rgba(110,30,190,0.10); }
}

/* 石本体：紫のグロー＋スケールでぷるぷる */
.ability-battle .ot-disc.disc-flip-target {
  animation: flip-disc-glow 1.1s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes flip-disc-glow {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 2px rgba(160,80,230,0.4),
                     inset 0 3px 8px rgba(255,255,255,0.15);
         transform: scale(1.00); }
  50%  { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 18px 6px rgba(200,120,255,0.85),
                     inset 0 3px 8px rgba(255,255,255,0.25);
         transform: scale(1.10); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 2px rgba(160,80,230,0.4),
                     inset 0 3px 8px rgba(255,255,255,0.15);
         transform: scale(1.00); }
}

/* ホバー時：さらに強調 */
.ability-battle .ot-cell.hint-flip:hover {
  background: rgba(130, 50, 210, 0.35);
  outline-color: rgba(210, 140, 255, 1.0);
}

.ability-battle .ot-cell.hint-flip:hover .ot-disc.disc-flip-target {
  animation: none;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3),
              0 0 24px 8px rgba(200,120,255,1.0),
              inset 0 3px 8px rgba(255,255,255,0.35);
  transform: scale(1.15);
  transition: transform .1s, box-shadow .1s;
}

/* 妨害エフェクト（sealed セルのパルス） */

/* 妨害発動時の盤面フラッシュ（茶色系） */
.ability-battle .ot-board-wrap.board-block-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  animation: boardBlockFlash 1.0s ease-out forwards;
  z-index: 10;
  background: radial-gradient(circle at center, rgba(160,100,40,0.75) 0%, rgba(100,55,10,0.3) 50%, transparent 75%);
}

@keyframes boardBlockFlash {
  0%   { opacity: 0; transform: scale(0.88); }
  18%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* 妨害系（ブロック）発動中：選択可能マスのハイライト */

/* 選択可能な空きマス：茶色の枠パルス＋外側ホワイトグロー */
.ability-battle .ot-cell.hint-block {
  background: rgba(100, 55, 10, 0.35);
  outline: 2.5px solid rgba(210, 165, 100, 0.9);
  outline-offset: -2px;
  border-radius: 4px;
  animation: block-cell-pulse 1.1s ease-in-out infinite;
  z-index: 1;
}

@keyframes block-cell-pulse {
  0%   {
    outline-color: rgba(160,100,40,0.55);
    background: rgba(100,55,10,0.20);
    box-shadow: 0 0 4px 1px rgba(255,255,255,0.15);
  }
  50%  {
    outline-color: rgba(255,220,140,1.0);
    background: rgba(140,85,20,0.45);
    box-shadow: 0 0 14px 5px rgba(255,220,140,0.50),
                0 0 6px  2px rgba(255,255,255,0.35);
  }
  100% {
    outline-color: rgba(160,100,40,0.55);
    background: rgba(100,55,10,0.20);
    box-shadow: 0 0 4px 1px rgba(255,255,255,0.15);
  }
}

/* hint-block マスの中央ドットは表示しない（集合体恐怖症対策） */
.ability-battle .ot-cell.hint-block::after { content: none; }

/* ホバー時 */
.ability-battle .ot-cell.hint-block:hover {
  background: rgba(140, 80, 15, 0.60);
  outline-color: rgba(255, 230, 160, 1.0);
  box-shadow: 0 0 18px 6px rgba(255,220,140,0.60),
              0 0 8px  3px rgba(255,255,255,0.40);
  animation: none;
}

/* 消去系（リムーブ）発動中：選択可能な相手石ハイライト */

/* セル枠：赤系の光る枠 */
.ability-battle .ot-cell.hint-erase {
  outline: 2.5px solid rgba(252, 100, 100, 0.9);
  outline-offset: -2px;
  border-radius: 4px;
  background: rgba(200, 30, 30, 0.18);
  animation: erase-cell-pulse 1.1s ease-in-out infinite;
  z-index: 1;
}

@keyframes erase-cell-pulse {
  0%   { outline-color: rgba(252,100,100,0.5); background: rgba(200,30,30,0.10); }
  50%  { outline-color: rgba(255,160,160,1.0); background: rgba(220,50,50,0.30); }
  100% { outline-color: rgba(252,100,100,0.5); background: rgba(200,30,30,0.10); }
}

/* 石本体：赤いグロー＋スケールでぷるぷる */
.ability-battle .ot-disc.disc-erase-target {
  animation: erase-disc-glow 1.1s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes erase-disc-glow {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 2px rgba(252,100,100,0.4),
                     inset 0 3px 8px rgba(255,255,255,0.15);
         transform: scale(1.00); }
  50%  { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 18px 6px rgba(255,120,120,0.85),
                     inset 0 3px 8px rgba(255,255,255,0.25);
         transform: scale(1.10); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0  8px 2px rgba(252,100,100,0.4),
                     inset 0 3px 8px rgba(255,255,255,0.15);
         transform: scale(1.00); }
}

/* ホバー時：さらに強調 */
.ability-battle .ot-cell.hint-erase:hover {
  background: rgba(220, 50, 50, 0.38);
  outline-color: rgba(255, 180, 180, 1.0);
}

.ability-battle .ot-cell.hint-erase:hover .ot-disc.disc-erase-target {
  animation: none;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3),
              0 0 24px 8px rgba(255,120,120,1.0),
              inset 0 3px 8px rgba(255,255,255,0.35);
  transform: scale(1.15);
  transition: transform .1s, box-shadow .1s;
}

/* ============================================================
   わかバトル関連：全テキストをDotGothic16に（スマホ含む）
   ============================================================ */
#screen-spec,
#screen-spec *,
.sb-swap-overlay,
.sb-swap-overlay *,
.sb-continue-overlay,
.sb-continue-overlay *,
.sb-coin-overlay,
.sb-coin-overlay *,
.sb-ability-tooltip,
.sb-ability-tooltip * {
  font-family: 'DotGothic16', sans-serif !important;
}
/* ============================================================
   モード選択ボタン（スタイリッシュ）
   ============================================================ */
.mode-arrow { display: none; }

.mode-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  font-family: 'Fredoka One', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  position: relative;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: none;
}

.mode-select-btn::before { display: none; }

.mode-select-label {
  position: relative;
  z-index: 1;
}

.mode-select-btn:hover {
  opacity: 0.82;
  transform: none;
  box-shadow: none;
}

.mode-select-btn:active {
  transform: scale(0.97);
}

/* シンプルモード用（白カード上）選択ボタン → 黒 */
.mode-card.simple .mode-select-btn {
  background: #111;
  color: #fff;
  border: none;
  box-shadow: none;
}

.mode-card.simple .mode-select-btn:hover {
  background: #333;
  box-shadow: none;
}

/* わかバトルモード用（黒カード上）選択ボタン → 白 */
.mode-card.magic .mode-select-btn {
  background: #fff;
  color: #111;
  border: none;
  box-shadow: none;
}

.mode-card.magic .mode-select-btn:hover {
  background: #e8e8e8;
  box-shadow: none;
}

/* 選択状態のカードスタイル */
.mode-card.mode-card-selected {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.5), 0 8px 28px rgba(0,0,0,0.15);
}

.mode-card.simple.mode-card-selected {
  box-shadow: 0 0 0 2.5px rgba(17,153,142,0.7), 0 8px 28px rgba(17,153,142,0.15);
}

.mode-card.magic.mode-card-selected {
  box-shadow: 0 0 0 2.5px rgba(168,85,247,0.8), 0 8px 28px rgba(124,58,237,0.3);
}

/* ============================================================
   タイトル画面 背景切り替えアニメーション
   ============================================================ */
#screen-title {
  transition: background-color 0.5s ease, background-image 0.5s ease;
}

/* シンプルモード選択時背景 */
#screen-title.bg-simple::before {
  background-color: #e8f5f4;
  background-image:
    linear-gradient(rgba(17,153,142,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,153,142,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  transition: background-color 0.5s, background-image 0.5s;
}

#screen-title.bg-simple {
  background: linear-gradient(160deg, #e8f5f4 0%, #f0fffe 60%, #e0f2f1 100%);
}

/* わかバトルモード選択時背景：JSのインラインスタイルで画像を設定するため
   ここではグリッドオーバーレイの除去と文字色のみ制御する */
#screen-title.bg-magic::before,
#screen-title[data-bg-mode="magic"]::before {
  display: none;
}

#screen-title.bg-magic {
  background: linear-gradient(160deg, #0d0515 0%, #1a0530 60%, #0d1a2e 100%);
}

#screen-title.bg-magic .mode-card.simple {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

#screen-title.bg-magic .mode-card.simple .mode-name {
  color: #e0d0ff;
}

#screen-title.bg-magic .mode-card.simple .mode-desc {
  color: rgba(220,200,255,0.6);
}

/* ============================================================
   レベルクリア画面（豪華演出）
   ============================================================ */
.sb-level-clear-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  animation: sb-fade-in .5s ease;
}
.sb-level-clear-overlay.hiding { animation: sb-fade-out .42s ease forwards; }

/* LV1 = 緑 */
.sb-level-clear-overlay[data-lv="1"]   { background: radial-gradient(ellipse at center, #0d3320 0%, #041508 100%); }
/* LV2 = 赤 */
.sb-level-clear-overlay[data-lv="2"]   { background: radial-gradient(ellipse at center, #3a0808 0%, #180202 100%); }
/* LV3 = 銀（ダークグレー） */
.sb-level-clear-overlay[data-lv="3"]   { background: radial-gradient(ellipse at center, #1e2228 0%, #080a0d 100%); }
/* LVMAX = 金 */
.sb-level-clear-overlay[data-lv="max"] { background: radial-gradient(ellipse at center, #3a2800 0%, #180f00 100%); }

.sb-level-clear-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 48px;
  text-align: center;
}

.sb-level-clear-stars {
  font-size: clamp(20px, 5vw, 34px);
  letter-spacing: 10px;
  line-height: 1;
  animation: lvClearStars .7s cubic-bezier(.34,1.56,.64,1) .1s both;
}
/* LV1 = 緑の星 */
[data-lv="1"]   .sb-level-clear-stars { color: #4ade80; text-shadow: 0 0 16px rgba(74,222,128,0.9); }
/* LV2 = 赤の星 */
[data-lv="2"]   .sb-level-clear-stars { color: #f87171; text-shadow: 0 0 16px rgba(248,113,113,0.9); }
/* LV3 = 銀の星 */
[data-lv="3"]   .sb-level-clear-stars { color: #cbd5e1; text-shadow: 0 0 16px rgba(203,213,225,0.9); }
/* LVMAX = 金の星 */
[data-lv="max"] .sb-level-clear-stars { color: #ffd700; text-shadow: 0 0 16px rgba(255,215,0,0.9); }

.sb-level-clear-badge {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(44px, 11vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  animation: lvClearBadge .6s cubic-bezier(.34,1.56,.64,1) .3s both;
}
[data-lv="1"]   .sb-level-clear-badge { color: #4ade80; text-shadow: 0 0 40px rgba(74,222,128,0.5); }
[data-lv="2"]   .sb-level-clear-badge { color: #f87171; text-shadow: 0 0 40px rgba(248,113,113,0.5); }
[data-lv="3"]   .sb-level-clear-badge { color: #cbd5e1; text-shadow: 0 0 40px rgba(203,213,225,0.5); }
[data-lv="max"] .sb-level-clear-badge { color: #ffd700; text-shadow: 0 0 40px rgba(255,215,0,0.5); }

.sb-level-clear-sub {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(22px, 5.5vw, 36px);
  color: #3a2010;
  letter-spacing: .1em;
  animation: lvClearSub .5s ease .6s both;
}

/* 次へボタン：レベル色に合わせた大きなボタン */
.sb-level-clear-btn {
  margin-top: 24px;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(16px, 4vw, 22px);
  letter-spacing: .12em;
  padding: 12px 40px;
  border-radius: 50px;
  border: 2px solid;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  animation: lvClearBtn .4s ease 1.1s both;
}
.sb-level-clear-btn:hover  { opacity: .82; transform: scale(1.04); }
.sb-level-clear-btn:active { transform: scale(0.97); }

[data-lv="1"]   .sb-level-clear-btn { background: #4ade80; color: #042d12; border-color: #22c55e; }
[data-lv="2"]   .sb-level-clear-btn { background: #f87171; color: #3b0000; border-color: #ef4444; }
[data-lv="3"]   .sb-level-clear-btn { background: #cbd5e1; color: #1e293b; border-color: #94a3b8; }
[data-lv="max"] .sb-level-clear-btn { background: #ffd700; color: #3a1f00; border-color: #f59e0b; }

@keyframes lvClearStars  { from { transform: scale(0) rotate(-20deg); opacity:0; } to { transform: scale(1) rotate(0); opacity:1; } }
@keyframes lvClearBadge  { from { transform: scale(0.3) translateY(24px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } }
@keyframes lvClearSub    { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
@keyframes lvClearBtn    { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }

/* ============================================================
   レベルスタート画面
   ============================================================ */
.sb-level-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  animation: sb-fade-in .35s ease;
}
.sb-level-start-overlay.hiding { animation: sb-fade-out .42s ease forwards; }

.sb-level-start-inner {
  text-align: center;
  animation: lvStartPop .55s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.sb-level-start-label {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(44px, 13vw, 90px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}
.sb-level-start-label[data-lv="2"]   { color: #60b4ff; }
.sb-level-start-label[data-lv="3"]   { color: #c080ff; }
.sb-level-start-label[data-lv="max"] { color: #ffd700; }

.sb-level-start-sub {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(18px, 4.5vw, 28px);
  color: rgba(255,255,255,0.65);
  margin-top: 10px;
  letter-spacing: .25em;
}
@keyframes lvStartPop { from { transform: scale(0.5); opacity:0; } to { transform: scale(1); opacity:1; } }
/* ════════════════════════════════════════════════════
   Battle Intro Screen (バトルイントロ演出)
   ════════════════════════════════════════════════════ */

.bi-overlay {
  position: absolute;
  inset: 0;
  z-index: 10500;
  background-color: #000;
  background-image: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* コンテンツだけをフェードイン（黒背景は即表示・絵が徐々に現れる） */
.bi-overlay > * {
  animation: biFadeIn 0.4s ease 0.05s both;
}
@keyframes biFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bi-overlay.hiding {
  animation: biFadeOut 0.4s ease forwards;
}
@keyframes biFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* オーバーレイ表示中スクロール禁止 */
#reversi.overlay-open {
  overflow: hidden;
}

/* ════ CPU挑発画面（showCpuTaunt）════ */

/* 背景カラーオーバーレイ */
.bi-taunt-colorbg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: color;
  opacity: 0.9;
}

/* CPUキャラ：中央・大きめアップ（88%） */
.bi-taunt-img {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 92%;
  height: auto;
  image-rendering: pixelated;
  z-index: 3;
  transform: translateX(-50%) scale(0.75) translateY(24px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
}
.bi-taunt-img.enter {
  opacity: 1;
  transform: translateX(-50%) scale(1) translateY(0);
}

/* キャラ名ラベル */
.bi-taunt-name {
  display: none;
}

/* ダイアログ枠（ボーダー色はインラインでテーマ色を指定） */
.bi-taunt-msgbox {
  border-width: 5px;
  border-radius: 18px !important;
  display: flex;
  flex-direction: column;
}

/* ── のうりょくパネル（ステージ右上） ── */
.bi-status-outer {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  width: 178px;
}
.bi-status-frame {
  position: relative;
  width: 100%;
}
.bi-status-frame-img {
  display: none;
}
.bi-status-inner {
  position: relative;
  padding: 10px 14px 12px;
  background: #000000;
  border: 5px solid #ffffff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'DotGothic16', monospace;
}
.bi-status-head {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2px;
  padding-bottom: 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.bi-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bi-status-label {
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.bi-status-stars {
  font-size: 15px;
  color: #f0c040;
  letter-spacing: -1px;
  text-shadow: 0 0 6px rgba(240,192,64,0.5);
}
@media (max-width: 480px) {
  .bi-status-outer { width: 120px; }
  .bi-status-inner { padding: 6px 8px 8px; gap: 4px; }
  .bi-status-head { font-size: 10px; padding-bottom: 4px; margin-bottom: 0; }
  .bi-status-label { font-size: 10px; }
  .bi-status-stars { font-size: 11px; }
}

/* ── キャラ名タグ（ステージ下端とダイアログの境目） ── */
.bi-name-tag-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 0;
  z-index: 20;
}
.bi-name-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(0);
  width: auto;
  min-width: 80px;
  max-width: 220px;
}
.bi-name-frame-img {
  display: none;
}
.bi-name-inner {
  position: relative;
  background: #000000;
  border: 5px solid #ffffff;
  border-radius: 14px;
  padding: 5px 18px 5px 14px;
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(17px, 4.5vw, 22px);
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .bi-taunt-img { width: 88%; }
}

/* ── 背景イラスト舞台 ── */
.bi-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
  border-style: solid;
  border-width: 5px;
  border-color: #ffffff;
  border-radius: 18px;
  box-sizing: border-box;
}
.bi-overlay:not(.bi-taunt-overlay) .bi-stage {
  box-shadow: none;
}

.bi-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── プレイヤーキャラ（左下） ── */
.bi-player {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52%;
  height: auto;
  image-rendering: pixelated;
  z-index: 3;
  transform: translateX(-160%);
  opacity: 0;
  /* デュオトーン: 暗部→#252524 / 明部→#D5D2CD、透過は維持 */
  filter: url(#bi-duotone);
}
.bi-player.enter {
  animation: biSlideFromLeft 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
@keyframes biSlideFromLeft {
  from { transform: translateX(-160%); opacity: 0.5; }
  to   { transform: translateX(0);    opacity: 1;   }
}

/* ── CPUキャラ（右上） ── */
.bi-cpu {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: auto;
  image-rendering: pixelated;
  z-index: 3;
  transform: translateX(160%);
  opacity: 0;
  /* デュオトーン: 暗部→#252524 / 明部→#D5D2CD、透過は維持 */
  filter: url(#bi-duotone);
}
.bi-cpu.enter {
  animation: biSlideFromRight 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}
@keyframes biSlideFromRight {
  from { transform: translateX(160%);  opacity: 0.5; }
  to   { transform: translateX(0);     opacity: 1;   }
}

/* ── 挑発画面ではキャラ下の名前タグを非表示 ── */
.bi-taunt-overlay .bi-name-tag-wrap {
  display: none;
}

/* ── 挑発画面 キャラ名タグ ── */
.bi-taunt-nametag-wrap {
  /* bi-stage・bi-msgwrap と同じ幅・同じ中央揃え */
  width: 100%;
  max-width: 480px;
  position: relative;
  height: 0;
  z-index: 30;
  flex-shrink: 0;
  /* align-self はデフォルト(center)のまま → bi-stageと左端が一致する */
}
.bi-taunt-nametag {
  position: absolute;
  left: -5px;
  top: -35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 158px;         /* セリフ同フォント5文字 + padding分 */
  height: 59px;
}
.bi-taunt-nametag-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.bi-taunt-nametag-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(14px, 3.8vw, 17px);
  color: #ffffff;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  padding: 28px 38px 0 16px;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media (min-width: 481px) {
  /* PC 481px+ : セリフ22px × 5文字 + padding */
  .bi-taunt-nametag { top: -48px; left: -5px; width: 235px; height: 87px; }
  .bi-taunt-nametag-text { font-size: 22px; padding: 36px 56px 0 24px; align-items: flex-start; color: #ffffff; }
}

/* スマホ(480px以下)：デフォルト値で対応済み */
/* 小型スマホ（360px以下）：さらに縮小 */
@media (max-width: 360px) {
  .bi-taunt-nametag {
    width: 126px;
    height: 47px;
    top: -30px;
    left: -5px;
  }
  .bi-taunt-nametag-text {
    font-size: clamp(11px, 3.2vw, 13px);
    padding: 22px 30px 0 14px;
    align-items: flex-start;
  }
}

/* ── コマンドメッセージ枠 ── */
.bi-msgwrap {
  width: 100%;
  max-width: 480px;
  flex-shrink: 0;
  padding: 0;
  margin-top: 6px;
}

.bi-msgbox {
  background: #000000;
  border-style: solid;
  border-width: 5px;
  border-color: #ffffff;
  border-radius: 18px;
  padding: 18px 28px 14px;
  min-height: 80px;
  position: relative;
}
.bi-overlay:not(.bi-taunt-overlay) .bi-msgbox {
  box-shadow: none;
}

/* 挑発画面：キャラ枠・ダイアログ枠を枠の色で同じ強さで発光させる */
.bi-taunt-overlay .bi-stage,
.bi-taunt-overlay .bi-msgbox {
  animation: biTauntGlow 2s ease-in-out infinite;
}
@keyframes biTauntGlow {
  0%, 100% {
    box-shadow: 0 0 8px 2px var(--bi-glow-col, rgba(255,255,255,0.6)),
                0 0 18px 6px var(--bi-glow-col, rgba(255,255,255,0.35));
  }
  50% {
    box-shadow: 0 0 14px 4px var(--bi-glow-col, rgba(255,255,255,0.9)),
                0 0 28px 10px var(--bi-glow-col, rgba(255,255,255,0.55));
  }
}

/* ── 挑発ダイアログ内 名前行・区切り線 ── （非表示化）
.bi-taunt-name-line { display: none; }
.bi-taunt-name-divider { display: none; }
*/
.bi-taunt-name-line {
  display: none;
}
.bi-taunt-name-divider {
  display: none;
}

/* ── 挑発ダイアログ内 能力パネル（会話と同じ枠に表示） ── */
.bi-taunt-status {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
}
.bi-taunt-status-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: baseline;
  white-space: nowrap;
}
.bi-taunt-status-label {
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(17px, 4.5vw, 22px);
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.75;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}
.bi-taunt-status-stars {
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(17px, 4.5vw, 22px);
  color: #f0c040;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-shadow: 0 0 6px rgba(240,192,64,0.5);
  white-space: nowrap;
}

.bi-msg {
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(17px, 4.5vw, 22px);
  color: #ffffff;
  line-height: 1.75;
  white-space: pre-wrap;
  letter-spacing: 0.05em;
  min-height: 3.5em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* ── エンカウントダイアログ専用カラー ── */
.bi-overlay:not(.bi-taunt-overlay) .bi-stage {
  border-color: #D0C6BD;
}
.bi-overlay:not(.bi-taunt-overlay) .bi-msgbox {
  border-color: #D0C6BD;
  background: #252524;
}
.bi-overlay:not(.bi-taunt-overlay) .bi-msg-line1,
.bi-overlay:not(.bi-taunt-overlay) .bi-msg-line2,
.bi-overlay:not(.bi-taunt-overlay) .bi-msg-line3 {
  color: #D0C6BD;
}

/* ── タップ促進 ▼ ── */
.bi-tap-hint {
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  color: rgba(60,40,10,0.5);
  text-align: right;
  margin-top: 2px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  animation: biTapBlink 0.9s ease-in-out infinite;
}
.bi-tap-hint.visible { opacity: 1; }
@keyframes biTapBlink {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.7; }
}

/* モバイル調整 */
@media (max-width: 480px) {
  .bi-stage { max-width: 100%; aspect-ratio: 1 / 1; }
  .bi-msgwrap { padding: 0; max-width: 100%; }
  .bi-msg { font-size: clamp(14px, 3.8vw, 17px); }
  /* 名前タグを画面左端に確実に寄せる */
  .bi-name-tag-wrap { max-width: 100%; align-self: stretch; }
  .bi-name-frame { left: 0; }
  /* 名前フォントをセリフと同じサイズに統一 */
  .bi-name-inner { font-size: clamp(14px, 3.8vw, 17px); padding: 4px 12px 4px 10px; }
  /* エンカウントダイアログ: 3行固定（17px × 1.75 × 3行 + margin 2px + padding 32px） */
  .bi-msgbox {
    height: 124px;
    min-height: unset;
    overflow: hidden;
  }
  /* 挑発ダイアログ: エンカウントと同じ3行固定 */
  .bi-taunt-overlay .bi-msgbox {
    height: 124px;
    min-height: unset;
    overflow: hidden;
  }
  /* 挑発ダイアログ内 名前行・区切り線のモバイルサイズ */
  .bi-taunt-name-line {
    font-size: clamp(14px, 3.8vw, 17px);
  }
  /* 能力パネル: 会話と同じ文字サイズ */
  .bi-taunt-status-label,
  .bi-taunt-status-stars {
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.75;
  }
  /* エンカウントダイアログ: 挑発画面と同じ文字色・サイズ */
  .bi-msg-line1,
  .bi-msg-line2,
  .bi-msg-line3 {
    font-family: 'DotGothic16', 'PixelMplus10', monospace;
    font-size: clamp(14px, 3.8vw, 17px);
    color: #ffffff;
    letter-spacing: 0.05em;
    line-height: 1.75;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  }
  .bi-msg-line1 { margin-bottom: 2px; }
}

/* PC向け拡大（481px以上） */
@media (min-width: 481px) {
  .bi-msg {
    font-size: 22px;
  }
  .bi-msgbox {
    min-height: 96px;
    padding: 20px 32px 16px;
  }
  .bi-name-tag-wrap { max-width: 480px; }
  .bi-name-frame { left: 0; }
  .bi-name-inner { font-size: 22px; }
  /* line1・line2・line3 を同じサイズ・色に統一 */
  .bi-msg-line1,
  .bi-msg-line2,
  .bi-msg-line3 {
    font-family: 'DotGothic16', 'PixelMplus10', monospace;
    font-size: 22px;
    color: #ffffff;
    line-height: 1.75;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  }
  .bi-msg-line1 { margin-bottom: 2px; }
  /* エンカウントダイアログ: 3行固定（22px × 1.75 × 3行 + margin 2px + padding 36px） */
  .bi-overlay:not(.bi-taunt-overlay) .bi-msgbox {
    height: 154px;
    min-height: unset;
    overflow: hidden;
  }
  /* 挑発ダイアログ: エンカウントと同じ3行固定 */
  .bi-taunt-overlay .bi-msgbox {
    height: 154px;
    min-height: unset;
    overflow: hidden;
  }
  /* 能力パネル: 会話と同じ文字サイズ */
  .bi-taunt-status-label,
  .bi-taunt-status-stars {
    font-size: 22px;
    line-height: 1.75;
  }
}

/* PC向け拡大（769px以上） */
@media (min-width: 769px) {
  .bi-stage {
    max-width: 640px;
  }
  .bi-msgwrap {
    max-width: 640px;
  }
  .bi-name-tag-wrap {
    max-width: 640px;
  }
  .bi-taunt-nametag-wrap {
    max-width: 640px;
  }
  /* PC 769px+ : セリフ26px × 5文字 + padding、msgbox padding-leftに合わせて36pxオフセット */
  .bi-taunt-nametag { top: -52px; left: -5px; width: 256px; height: 95px; }
  .bi-taunt-nametag-text { font-size: 26px; padding: 42px 62px 0 28px; align-items: flex-start; color: #ffffff; }
  .bi-msgbox {
    padding: 22px 36px 18px;
    min-height: 96px;
  }
  .bi-name-frame { left: 0; }
  .bi-name-inner { font-size: 26px; }
  /* エンカウントダイアログ: 3行固定（26px × 1.75 × 3行 + margin 2px + padding 40px） */
  .bi-overlay:not(.bi-taunt-overlay) .bi-msgbox {
    height: 179px;
    min-height: unset;
    overflow: hidden;
  }
  /* 挑発ダイアログ: エンカウントと同じ3行固定 */
  .bi-taunt-overlay .bi-msgbox {
    height: 179px;
    min-height: unset;
    overflow: hidden;
  }
  .bi-msg {
    font-size: 26px;
  }
  .bi-msg-line1,
  .bi-msg-line2,
  .bi-msg-line3 {
    font-size: 26px;
  }
  /* 能力パネル: 会話と同じ文字サイズ */
  .bi-taunt-status-label,
  .bi-taunt-status-stars {
    font-size: 26px;
    line-height: 1.75;
  }
}

/* ════════════════════════════════════════════
   エンカウントエフェクト（モザイク＋スクリーンワイプ）
   ─ ゲームエリア内（全画面なし）           ─
   ─ 即座に黒で盤面を隠す                  ─
   ─ ① モザイクピクセルが埋まる（1.5s）    ─
   ─ ② 横帯ワイプが閉じる（1.5s）         ─
   ════════════════════════════════════════════ */

/* ── ベースオーバーレイ ── */
.bi-encounter-overlay {
  position: absolute;         /* ゲームコンテナ内に収める・全画面なし */
  inset: 0;
  z-index: 10480;
  pointer-events: none;
  overflow: hidden;
  background: #1a1a18;        /* 表示と同時に盤面を即隠す */
}

/* ── モザイクcanvas ── */
.bi-enc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── スクリーンワイプ（6本横帯・canvas上に重なる） ── */
.bi-encounter-wipes {
  position: absolute;
  inset: 0;
  z-index: 1;                 /* canvasより前面 */
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}
.bi-encounter-wipe {
  background: #1a1a18;
  transform: scaleX(0);
}
.bi-encounter-wipe:nth-child(odd)  { transform-origin: left center; }
.bi-encounter-wipe:nth-child(even) { transform-origin: right center; }
.bi-encounter-wipe.go {
  animation: biWipeClose 0.65s cubic-bezier(0.4, 0, 0.1, 1) forwards;
}
@keyframes biWipeClose {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* スマホ調整 */
@media (max-width: 480px) {
  .sb-swap-overlay {
    align-items: flex-start;
    padding-top: 48px;
  }
}
/* ===== 結果画面・継続画面カスタマイズ ===== */

/* ── PC: 勝利・敗北モーダルサイズ ── */
.reversi-game .ot-result-modal {
  width: min(440px, 94vw) !important;
  min-height: min(680px, 90vw) !important;
}
@media (max-width: 480px) {
  .reversi-game .ot-result-modal {
    min-height: 88vw !important;
  }
}

/* ═══════════════════════════════════════════════════════
   勝ち・負け共通: タイトル＋スコアを完全に同じ高さに固定

   ★ 重要: display !important は絶対に使わない
     → display: flex !important は JS の display:none を無効化する
     → 勝ちと負けのボタンが同時表示されるバグの原因

   仕組み:
   ① modal-body の gap を広げてスコアとボタンの間隔を確保
   ② win-choice / lose-actions 両方を min-height:140px で固定
   ③ どちらか一方だけ JS が display:flex にするので body 高は常に同じ
      → タイトルとスコアが win/lose で全く同じ Y 位置になる
═══════════════════════════════════════════════════════ */

.reversi-game .ot-result-modal-body {
  gap: 14px;
  padding: 24px 24px 28px;
  align-items: center;
}

/* アクションエリア共通レイアウト（display は JS に委ねる）*/
.reversi-game .ot-overlay #sb-win-choice,
.reversi-game .ot-overlay #sb-lose-actions {
  /* display: flex !important は絶対に書かない（JSのdisplay:noneを壊す） */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  width: 100%;
  position: relative;
  z-index: 2;
  text-align: center;
  box-sizing: border-box;
}

/* 入れ替えるラベル */
.reversi-game .ot-overlay #sb-win-choice > div:first-child {
  text-align: center;
  width: 100%;
}

/* ボタン行（スマホでは縦並び維持） */
.reversi-game .ot-overlay #sb-win-choice > div:nth-child(2) {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
}

/* ボタン幅（スマホ用デフォルト） */
.reversi-game #sb-steal-btn,
.reversi-game #sb-keep-btn,
.reversi-game #sb-retry-btn {
  width: 75%;
}

/* ── 継続モーダル: 基本スタイルは上部 sb-continue-modal で定義済み ── */

/* ══════════════════════════════════════════════════════════════
   PC専用（481px以上）：勝利・連勝モーダルの上下レイアウト
   ・タイトル＋石数 / 連勝  → 上部
   ・メッセージ＋ボタン     → 下部（両画面で同じ高さ・位置に統一）
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) {

  /* ══════════════════════════════════════════
     勝利画面：連勝と同じ2カラムレイアウト
     左48%=キャラ画像、右52%=黒UI
     ══════════════════════════════════════════ */
  .reversi-game .ot-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* モーダルを横長2カラムに */
  .reversi-game .ot-result-modal {
    display: flex !important;
    flex-direction: row !important;
    width: min(660px, 96vw) !important;
    min-width: unset !important;
    min-height: unset !important;
    height: 400px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: none !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
  }
  .reversi-game .ot-result-modal::after { display: none !important; }

  /* 左ペイン：キャラ画像 */
  .reversi-game .ot-result-char-pane {
    flex: 0 0 48%;
    position: relative;
    overflow: hidden;
  }
  .reversi-game .ot-result-char-pane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .reversi-game .ot-result-char-pane::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 50%, rgba(10,10,18,0.95) 100%),
                linear-gradient(to bottom, rgba(10,10,18,0.2) 0%, transparent 25%);
    pointer-events: none;
  }

  /* 右ペイン：UI（modal-body） */
  .reversi-game .ot-result-modal-body {
    flex: 1 !important;
    background: #0a0a12 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px 24px !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
  }

  /* タイトル（あなたの勝ち！） */
  .reversi-game .ot-overlay .ot-result-title {
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 24px !important;
    color: #fff !important;
    text-align: center !important;
    margin: 0 !important;
    text-shadow: none !important;
    letter-spacing: .06em !important;
    line-height: 1.1 !important;
  }

  /* スコア */
  .reversi-game .ot-overlay .ot-result-scores {
    margin: 6px 0 0 0 !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    align-self: center !important;
  }
  .reversi-game .ot-overlay .ot-result-num {
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 38px !important;
    text-shadow: none !important;
  }

  /* アクションエリア（★display!importantは書かない） */
  .reversi-game .ot-overlay #sb-win-choice,
  .reversi-game .ot-overlay #sb-lose-actions {
    margin-top: 16px !important;
    min-height: unset !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* 「相手のスキルと入れ替える？」ラベル */
  .reversi-game .ot-overlay #sb-win-choice > div:first-child {
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 15px !important;
    color: rgba(255,255,255,0.75) !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    text-shadow: none !important;
  }

  /* ボタン行：縦並び・全幅 */
  .reversi-game .ot-overlay #sb-win-choice > div:nth-child(2) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* ボタン */
  .reversi-game #sb-steal-btn,
  .reversi-game #sb-keep-btn,
  .reversi-game #sb-retry-btn {
    width: 100% !important;
    min-width: unset !important;
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    border-radius: 6px !important;
    letter-spacing: .06em !important;
    text-align: center !important;
  }
  /* 入れ替える（黒背景・白文字） */
  .reversi-game #sb-steal-btn {
    background: #111 !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  .reversi-game #sb-steal-btn:hover {
    background: #222 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  /* 入れ替えない（ゴースト） */
  .reversi-game #sb-keep-btn {
    background: transparent !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.55) !important;
    box-shadow: none !important;
  }
  .reversi-game #sb-keep-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: rgba(255,255,255,0.8) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  /* 敗北リトライボタン */
  .reversi-game #sb-retry-btn {
    background: #111 !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* ══════════════════════════════════════════
     連勝画面：縦レイアウト（たぬきフレーム）
     ══════════════════════════════════════════ */
  .sb-continue-overlay {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sb-continue-modal {
    flex-direction: column !important;
    align-items: center !important;
    width: 92vw !important;
    max-width: 500px !important;
    min-width: unset !important;
    min-height: unset !important;
    height: auto !important;
    padding: 72px 54px 96px !important;
    background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi15.webp') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45)) !important;
    overflow: visible !important;
    gap: 16px !important;
  }
  .sb-continue-modal::after { display: none !important; }

  .sb-continue-face {
    width: 150px !important;
    height: 150px !important;
  }

  .sb-continue-wins {
    font-size: 36px !important;
    color: #3a2010 !important;
    text-shadow: none !important;
    margin: 0 !important;
  }

  .sb-continue-title {
    font-size: 16px !important;
    color: #3a2010 !important;
    text-shadow: none !important;
    margin: 0 !important;
  }

  .sb-continue-actions {
    align-items: center !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
  .sb-continue-actions .ot-btn {
    width: 75% !important;
    min-width: unset !important;
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    letter-spacing: .06em !important;
  }

  .sb-continue-btn {
    background: #3a2010 !important;
    border-color: #5a3a20 !important;
    color: #fff8f0 !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
  }
  .sb-continue-btn:hover {
    background: #5a3a20 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.30) !important;
  }
  .sb-continue-save-btn {
    background: rgba(58,32,16,0.12) !important;
    border: 1.5px solid rgba(58,32,16,0.4) !important;
    color: #3a2010 !important;
    box-shadow: none !important;
  }
  .sb-continue-save-btn:hover {
    background: rgba(58,32,16,0.25) !important;
    border-color: rgba(58,32,16,0.65) !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   スマホ：全オーバーレイ画面の表示制御
   ─ bi-overlay / sb-swap:
       position:absolute; inset:0 (#reversi 基準、ナビ下から表示)
   ─ ot-overlay（勝ち・負け）/ sb-continue-overlay（連勝）:
       position:fixed; inset:0 でビューポート全体を覆う
       → .ot-board-wrap(position:relative)の子要素なので
         absolute では盤面エリアしか覆えないため fixed が必須
       → .mobile-category-nav に z-index:9999 設定済み(style.css)
         なので、ナビはこれらのオーバーレイより常に手前に表示される
   ─ padding-top:148px で全画面のコンテンツ開始位置をナビ直下に統一
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── バトルが挑んできた画面 & キャラ挑発画面 ──
     position:absolute; inset:0 (#reversi 基準)                      */
  .bi-overlay {
    justify-content: flex-start;
    padding: 76px 12px 12px;
  }

  /* ── スキル選択 & スキル入れ替え画面 ──
     position:absolute; inset:0 (#reversi 基準)                      */
  .sb-swap-overlay {
    align-items: flex-start;
    padding-top: 76px;
  }
  /* 連勝画面：スマホでも縦レイアウト（たぬきフレーム・中央表示） */
  .sb-continue-overlay {
    position: fixed !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0;
    overflow-y: auto;
  }

  .sb-continue-modal {
    min-height: unset !important;
    justify-content: center !important;
    border-radius: 0 !important;
    width: 92vw !important;
    max-width: 340px !important;
    padding: 52px 32px 56px !important;
  }

  /* スマホ：勝利モーダルを たぬきフレーム(reversi15.webp) に変更 */
  .reversi-game .ot-overlay {
    padding: 76px 16px 16px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .reversi-game .ot-result-modal {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 92vw !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 360 / 600 !important;
    border-radius: 0 !important;
    border: none !important;
    background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi15.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45)) !important;
    overflow: visible !important;
    padding: 52px 32px 56px !important;
  }
  .reversi-game .ot-result-modal::after { display: none !important; }
  .reversi-game .ot-result-char-pane {
    display: block !important;
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid #3a2010 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
  }
  .reversi-game .ot-result-char-pane img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }
  .reversi-game .ot-result-modal-body {
    flex: unset !important;
    flex-direction: column !important;
    background: transparent !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .reversi-game .ot-overlay .ot-result-title {
    font-size: clamp(20px, 6vw, 28px) !important;
    text-align: center !important;
    align-self: center !important;
    color: #3a2010 !important;
    text-shadow: none !important;
  }
  .reversi-game .ot-overlay .ot-result-scores {
    align-self: center !important;
    background: rgba(58,32,16,0.08) !important;
    border: 1.5px solid rgba(58,32,16,0.35) !important;
    padding: 14px 30px !important;
    border-radius: 20px !important;
  }
  .reversi-game .ot-overlay .ot-result-num {
    font-size: clamp(34px, 10vw, 48px) !important;
    color: #3a2010 !important;
    text-shadow: none !important;
  }
  .reversi-game .ot-overlay .ot-result-vs {
    color: rgba(58,32,16,0.5) !important;
  }
  .reversi-game .ot-overlay #sb-win-choice,
  .reversi-game .ot-overlay #sb-lose-actions {
    margin-top: 0 !important;
    min-height: unset !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .reversi-game .ot-overlay #sb-win-choice > div:first-child {
    font-size: 13px !important;
    color: #5a3a20 !important;
    text-align: center !important;
    text-shadow: none !important;
  }
  .reversi-game .ot-overlay #sb-win-choice > div:nth-child(2) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .reversi-game #sb-steal-btn,
  .reversi-game #sb-keep-btn,
  .reversi-game #sb-retry-btn,
  .reversi-game #sb-next-btn {
    width: 80% !important;
    min-width: unset !important;
    background: #3a2010 !important;
    border-color: #5a3a20 !important;
    color: #fff8f0 !important;
    border-radius: 50px !important;
    padding: 12px 0 !important;
    font-size: 15px !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2) !important;
    transition: background .15s, transform .15s, box-shadow .15s !important;
  }
  .reversi-game #sb-keep-btn {
    background: rgba(58,32,16,0.12) !important;
    border-color: rgba(58,32,16,0.4) !important;
    color: #3a2010 !important;
  }
  /* 連勝モーダル：縦型たぬきフレームに統一 */
  .sb-continue-overlay {
    padding-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .sb-continue-modal {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 0 !important;
    width: 92vw !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: unset !important;
    padding: 52px 32px 56px !important;
    border: none !important;
  }
  .sb-continue-wins {
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 32px !important;
    color: #3a2010 !important;
    text-shadow: none !important;
  }
  .sb-continue-title {
    font-size: 14px !important;
    color: #3a2010 !important;
    text-shadow: none !important;
  }
  .sb-continue-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .sb-continue-actions .ot-btn {
    width: 75% !important;
    min-width: unset !important;
    border-radius: 50px !important;
    padding: 12px 0 !important;
    font-size: 15px !important;
  }
  .sb-continue-btn {
    background: #3a2010 !important;
    border-color: #5a3a20 !important;
    color: #fff8f0 !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
  }
  .sb-continue-save-btn {
    background: rgba(58,32,16,0.12) !important;
    border: 1.5px solid rgba(58,32,16,0.4) !important;
    color: #3a2010 !important;
    box-shadow: none !important;
  }

  /* ── あなたの勝ち！/ 負け / 引き分け画面 ──
     position:fixed でビューポート全体を覆い、ナビ直下にコンテンツ配置
     ナビは z-index:9999 (style.css) で自動的に手前に表示される      */
  .reversi-game .ot-overlay {
    position: fixed !important;
    inset: 0 !important;
    justify-content: flex-start;
    align-items: center;
    padding: 148px 0 0;
  }

  /* 勝ち・負けモーダル: 画面の高さを最大限使用しボタンを下に配置 */
  .reversi-game .ot-result-modal {
    min-height: calc(100vh - 148px) !important;
    min-height: calc(100dvh - 148px) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    justify-content: flex-end !important;
    /* キャラ画像をモーダル幅に合わせてピッタリ表示 */
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  /* 連勝モーダルのたぬきフレームは 100% 100% を維持 */

  /* ── 手順決め（コイントス）画面 ──
     スマホではスキル選択と同じ位置・中央揃えに統一                  */
  .sb-coin-overlay {
    align-items: center;
    justify-content: flex-start;
    padding-top: 76px;
    display: flex;
    flex-direction: column;
  }
  .sb-coin-overlay-inner {
    margin: 0 auto;
  }

  /* ── わかバトル対局画面：コンテンツ全体を19px下げる ── */
  .reversi-game.ability-battle {
    padding-top: 19px;
  }

  /* ── スマホの盤面を縦横1マス分縮小 ──
     上下左右すべて36pxに統一（シンプルリバーシ・わかバトル共通）   */
  .reversi-game .ot-board-wrap {
    padding: 36px;
  }
}
.back-btn { display: none; }

/* ═══════════════════════════════════════════════════════════
   シンプルリバーシ 勝敗ダイアログ
   ─ #ot-result-overlay のみスコープ（わかバトルには非適用）
   ─ 全面表示をやめ、盤面枠と同幅のダイアログに変更
   ═══════════════════════════════════════════════════════════ */

/* オーバーレイを position:absolute に変更して盤面枠内に収める */
/* ot-board-wrap が position:relative なので親として機能する    */
#ot-result-overlay.ot-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 14px !important; /* ot-board-inner と同じ */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px !important;
  z-index: 10 !important;
  gap: 0 !important;
}

/* ダイアログ本体：盤面と同サイズ・白背景・黒枠・丸角 */
#ot-result-overlay .ot-result-dialog {
  background: #fff;
  border: 3px solid #111;
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  /* オーバーレイいっぱいに広げる */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  animation: ot-drop .3s cubic-bezier(.22,1.4,.4,1);
}

/* タイトル（WIN / LOSE / DRAW）*/
#ot-result-overlay .ot-result-title {
  font-family: 'Fredoka One', sans-serif !important;
  font-size: clamp(40px, 12vw, 64px) !important;
  color: #111 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  text-align: center !important;
  letter-spacing: .06em !important;
  width: 100% !important;
}

/* スコア行：中央揃え */
#ot-result-overlay .ot-result-scores {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #ddd !important;
  border-radius: 14px !important;
  padding: 12px 32px !important;
  gap: 20px !important;
  width: auto !important;
}

/* スコア数字：スコアカード（.ot-score-num）と同じ Fredoka One に統一 */
#ot-result-overlay .ot-result-num {
  font-family: 'Fredoka One', sans-serif !important;
  font-size: clamp(36px, 9vw, 52px) !important;
  color: #111 !important;
  text-shadow: none !important;
  line-height: 1 !important;
}

/* vs 区切り */
#ot-result-overlay .ot-result-vs {
  font-family: 'Fredoka One', sans-serif !important;
  color: rgba(0, 0, 0, 0.35) !important;
  font-size: clamp(16px, 4vw, 22px) !important;
}

/* サブテキスト（黒 vs 白） */
#ot-result-overlay .ot-result-sub {
  color: rgba(0, 0, 0, 0.45) !important;
  font-family: 'Fredoka One', sans-serif !important;
  font-size: clamp(11px, 2.5vw, 13px) !important;
}

/* ボタン */
#ot-result-overlay .ot-btn {
  font-family: 'Fredoka One', sans-serif !important;
  font-size: clamp(13px, 3.5vw, 16px) !important;
  background: #111 !important;
  border: 2px solid #333 !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 12px 36px !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
}
#ot-result-overlay .ot-btn:hover {
  background: #333 !important;
  transform: translateY(-2px) scale(1.03) !important;
}
/* ═══════════════════════════════════════════════════════════
   わかバトル 勝敗画面 中央揃え
   ─ 旧ルールは下部の包括ブロックで上書きのため最小限に
   ═══════════════════════════════════════════════════════════ */

/* 入れ替えるラベル・ボタン群 中央揃え */
#sb-result-overlay #sb-win-choice,
#sb-result-overlay #sb-lose-actions {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

#sb-result-overlay #sb-win-choice > div:first-child {
  text-align: center !important;
  width: 100% !important;
}

#sb-result-overlay #sb-win-choice > div:nth-child(2) {
  justify-content: center !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════
   スキル選択ダイアログ：背景画像テーマ（クリーム色）
   ─ .sb-choice-modal のみスコープ
   ═══════════════════════════════════════════════════════════ */

/* ── モーダル本体：背景画像に差し替え ── */
.sb-choice-modal {
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi15.webp') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  /* box-shadow の代わりに filter: drop-shadow を使うことで
     画像の透過部分（角の丸み外側）に影が付かず、キャラ画像と同様に透過が正しく表示される */
  box-shadow: none !important;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45)) !important;
  overflow: visible !important;
  /* 上：耳の高さ分、下：しっぽの高さ分、左右：毛並み+余白 */
  padding: 56px 40px 60px !important;
  max-width: 360px !important; /* スマホ共通ベース値 */
  width: 92vw !important;
}

/* PC専用：スキル選択画面を少し大きく */
@media (min-width: 481px) {
  .sb-choice-modal {
    max-width: 500px !important;
    width: 92vw !important;
    padding: 72px 54px 96px !important;
    margin-top: -49px !important;  /* PC：コンテンツを約1.3cm上に */
  }
  .sb-choice-modal .sb-swap-title {
    font-size: 24px !important;
  }
  .sb-choice-modal .sb-swap-subtitle {
    font-size: 15px !important;
  }
  .sb-choice-modal .sb-choice-card {
    padding: 14px 18px !important;
  }
  .sb-choice-modal .sb-choice-icon {
    font-size: 16px !important;
  }
  .sb-choice-modal .sb-choice-name {
    font-size: 18px !important;
  }
  .sb-choice-modal .sb-choice-cond-tag {
    font-size: 13px !important;
  }
  .sb-choice-modal .sb-choice-desc {
    font-size: 14px !important;
  }
}

/* ── タイトル「スキルを1つ選択」── */
.sb-choice-modal .sb-swap-title {
  color: #3a2010 !important;
  text-shadow: none !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* ── サブタイトル ── */
.sb-choice-modal .sb-swap-subtitle {
  color: #5a3a20 !important;
  text-shadow: none !important;
}

/* ── スキルカード：カテゴリ色を維持しつつ濃くして視認性確保 ── */
.sb-choice-modal .sb-choice-card {
  border-width: 2px !important;
}
.sb-choice-modal .sb-choice-cat-placement { background: rgba(30, 100, 200, 0.75) !important; border-color: rgba(20, 80, 180, 0.95) !important; }
.sb-choice-modal .sb-choice-cat-flip      { background: rgba(140, 60, 210, 0.75) !important; border-color: rgba(120, 40, 190, 0.95) !important; }
.sb-choice-modal .sb-choice-cat-erase     { background: rgba(210, 50, 50, 0.75)  !important; border-color: rgba(190, 30, 30, 0.95)  !important; }
.sb-choice-modal .sb-choice-cat-combo     { background: rgba(180, 130, 0, 0.75)  !important; border-color: rgba(160, 110, 0, 0.95)  !important; }
.sb-choice-modal .sb-choice-cat-block     { background: rgba(140, 80, 20, 0.75)  !important; border-color: rgba(120, 60, 10, 0.95)  !important; }
.sb-choice-modal .sb-choice-cat-hint      { background: rgba(100, 100, 100, 0.70) !important; border-color: rgba(80, 80, 80, 0.95)   !important; }
.sb-choice-modal .sb-choice-cat-guard     { background: rgba(20, 160, 60, 0.75)  !important; border-color: rgba(10, 140, 40, 0.95)  !important; }
.sb-choice-modal .sb-choice-cat-always,
.sb-choice-modal .sb-choice-cat-null      { background: rgba(50, 50, 50, 0.75)   !important; border-color: rgba(80, 80, 80, 0.95)   !important; }

/* ── カード内テキスト：白文字のままshadowを強化 ── */
.sb-choice-modal .sb-choice-name {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9) !important;
}
.sb-choice-modal .sb-choice-icon {
  text-shadow: 0 0 8px rgba(255,200,0,0.9) !important;
}
.sb-choice-modal .sb-choice-cond-tag {
  background: rgba(0,0,0,0.35) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,1) !important;
}
.sb-choice-modal .sb-choice-desc {
  color: #f0f0f0 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 2px 6px rgba(0,0,0,0.9) !important;
}

/* ── ボタン行 ── */
.sb-choice-modal .sb-swap-actions .ot-btn {
  background: #3a2010 !important;
  border-color: #5a3a20 !important;
  color: #fff8f0 !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
}
.sb-choice-modal .sb-swap-actions .ot-btn.secondary {
  background: rgba(58, 32, 16, 0.12) !important;
  border-color: rgba(58, 32, 16, 0.4) !important;
  color: #3a2010 !important;
}
.sb-choice-modal .sb-swap-actions .ot-btn:hover {
  background: #5a3a20 !important;
  color: #fff8f0 !important;
}

/* ── スマホ対応 ── */
@media (max-width: 480px) {
  .sb-choice-modal {
    background-size: 100% 100% !important;
    padding: 52px 36px 72px !important;
    width: 88vw !important;
    max-width: 340px !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   勝敗モーダル：2画面構成
   画面1＝キャラ画像＋勝敗＋石数＋「次へ」
   画面2＝相手のスキルと入れ替えますか？
   ═══════════════════════════════════════════════════════════ */
.ot-result-step1,
.ot-result-step2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 14px;
}
#sb-next-btn {
  margin-top: 4px;
}
.ot-result-step2 {
  min-height: 140px;
}

/* 画面2表示中はキャラ画像ペインを隠し、UI部分のみ表示 */
@media (min-width: 481px) {
  .reversi-game .ot-result-modal-body {
    justify-content: center !important;
  }
  .reversi-game .ot-result-step1,
  .reversi-game .ot-result-step2 {
    align-items: center !important;
    text-align: center !important;
  }
  .reversi-game .ot-result-step1 .ot-result-title,
  .reversi-game .ot-result-step1 .ot-result-scores {
    align-self: center !important;
  }
  /* わかバトル結果オーバーレイのボタンはPC専用スタイルを適用しない */
  #sb-result-overlay #sb-next-btn,
  #sb-result-overlay #sb-retry-btn,
  #sb-result-overlay #sb-steal-btn,
  #sb-result-overlay #sb-keep-btn {
    align-self: stretch !important;
    width: 100% !important;
    background: #3a2010 !important;
    border-radius: 50px !important;
    color: #fff8f0 !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
    padding: 8px 0 !important;
    font-size: 16px !important;
    letter-spacing: .08em !important;
  }
  /* .reversi-game外の#sb-next-btnは上書きしない（わかバトル用オーバーレイに任せる） */
  .reversi-game #sb-next-btn:not(#sb-result-overlay *) {
    align-self: flex-start !important;
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    border-radius: 6px !important;
    letter-spacing: .06em !important;
    background: #111 !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  #sb-next-btn:hover {
    background: #222 !important;
  }
}

/* 勝敗・スキル入れ替え画面表示中：ページ背景(reversi1/2.webp)を完全に黒で覆う（挑発画面と同様） */
#reversi:has(.ot-overlay.show) {
  background-color: #000 !important;
}
#reversi:has(.ot-overlay.show)::before {
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   わかバトル 勝敗モーダル：最終デザイン（PC/スマホ共通）
   ─ #sb-result-overlay のみ・IDセレクタで他のルールより優先
   ─ 背景：黒で全体を覆う／枠：reversi15.webp（たぬきフレーム）
   ─ 6580行台以降と endGame() のPC用style注入に再調整があるため、ここは土台として扱う
   ═══════════════════════════════════════════════════════════ */
/* ─── わかバトル 勝敗オーバーレイ ───────────────────────────────────── */
/* show/hide は opacity で制御（#reversi に移動後も .reversi-game 外で動作） */
/* ── 勝敗画面：オセロ対局画面と同じ背景＋薄化フィルター ── */
#sb-result-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9500 !important;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s !important;
}
@media (max-width: 480px) {
  #sb-result-overlay {
    background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center center / cover no-repeat !important;
  }
}
#sb-result-overlay > * {
  position: relative !important;
  z-index: 1 !important;
}
#sb-result-overlay.show {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* モーダル（たぬきフレーム） */
/* .reversi-game内でもPC横レイアウトに勝つよう両セレクタ記述 */
/* specificity: .reversi-game + #sb-result-overlay + .ot-result-modal = (1,2,0) > 元PC(0,2,0) */
.reversi-game #sb-result-overlay .ot-result-modal,
#sb-result-overlay .ot-result-modal {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important; /* ← 上から積む（2.JPGに合わせる） */
  width: min(380px, 88vw) !important;
  max-width: 380px !important;
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: 360 / 600 !important;
  border-radius: 0 !important;
  border: none !important;
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/06/reversi15.webp') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45)) !important;
  overflow: visible !important;
  /* たぬき枠：上を増やして丸を少し下に／コンテンツをしっぽより上に収める */
  padding: 9% 10% 17% !important;
  gap: 10px !important;
}
#sb-result-overlay .ot-result-modal::after { display: none !important; }

/* ─── キャラ画像 ───────────────────────────────────────────────────── */
.reversi-game #sb-result-overlay .ot-result-char-pane,
#sb-result-overlay .ot-result-char-pane {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  /* 円形スタイルはimgに移したのでコンテナはリセット */
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}
#sb-result-overlay .ot-result-char-pane img {
  display: block !important;
  /* 同一の式で幅・高さを固定 → 必ず正円。220pxで上限を設けPC表示でも巨大化しない */
  width:  min(68vw, 260px) !important;
  height: min(68vw, 260px) !important;
  min-width:  min(68vw, 260px) !important;
  min-height: min(68vw, 260px) !important;
  max-width:  min(68vw, 260px) !important;
  max-height: min(68vw, 260px) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center 15% !important;
  border: 3px solid #3a2010 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
  flex-shrink: 0 !important;
}

/* ─── 本体エリア（タイトル・スコア・ボタン） ──────────────────────── */
.reversi-game #sb-result-overlay .ot-result-modal-body,
#sb-result-overlay .ot-result-modal-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  align-items: center !important;
  justify-content: center !important;  /* flex-end→center：下半分に均等配置 */
  background: transparent !important;
  padding: 0 0 4% !important;          /* 下に少し余白 */
  width: 100% !important;
  gap: 0 !important;
  text-align: center !important;
}
/* step1/step2 の display は JS のインラインスタイルで制御するため display は書かない */
#sb-result-overlay .ot-result-step1,
#sb-result-overlay .ot-result-step2 {
  flex-direction: column !important;
  align-items: center !important;        /* 子要素を横中央に */
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 「かち」「まけ」「ひきわけ」：DotGothic16・中央（font-sizeはJSが文字数に応じて上書き） */
#sb-result-overlay .ot-result-title {
  display: block !important;
  font-family: 'DotGothic16', sans-serif !important;
  font-size: clamp(32px, 10vw, 52px) !important;
  font-weight: 900 !important;
  color: #3a2010 !important;
  text-shadow: none !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  letter-spacing: .10em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* スコア：横並び・幅いっぱい */
#sb-result-overlay .ot-result-scores {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  align-self: stretch !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(58,32,16,0.08) !important;
  border: 1.5px solid rgba(58,32,16,0.35) !important;
  padding: 6px 16px !important;
  border-radius: 16px !important;
}
/* step1直下セレクタ（specificity 1,2,0）で干渉ルールに確実に勝つ */
#sb-result-overlay .ot-result-step1 .ot-result-scores {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#sb-result-overlay .ot-result-num {
  font-family: 'DotGothic16', sans-serif !important;
  font-size: clamp(24px, 6vw, 30px) !important;
  color: #3a2010 !important;
  text-shadow: none !important;
  line-height: 1 !important;
}
#sb-result-overlay .ot-result-vs {
  font-family: 'DotGothic16', sans-serif !important;
  color: rgba(58,32,16,0.5) !important;
  font-size: clamp(18px, 4.5vw, 22px) !important;
}

/* win-choice / lose-actions（displayはJSのインラインで制御） */
#sb-result-overlay #sb-win-choice,
#sb-result-overlay #sb-lose-actions {
  width: 100% !important;
  align-items: center !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
  text-align: center !important;
}

/* 「スキルを入れ替える？」：茶色 */
#sb-result-overlay #sb-win-choice > div:first-child {
  font-size: clamp(16px, 8vw, 32px) !important;
  color: #3a2010 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}
#sb-result-overlay #sb-win-choice > div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* ボタン共通 */
#sb-result-overlay #sb-steal-btn,
#sb-result-overlay #sb-keep-btn,
#sb-result-overlay #sb-retry-btn,
#sb-result-overlay #sb-next-btn {
  display: block !important;
  align-self: stretch !important;
  margin: 0 !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #3a2010 !important;
  border: none !important;
  color: #fff8f0 !important;
  border-radius: 50px !important;
  padding: 11px 8px !important;
  font-family: 'DotGothic16', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: .08em !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
  animation: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .15s, transform .15s, box-shadow .15s !important;
}
/* step1直下セレクタ（specificity 2,1,0）で確実に勝つ */
#sb-result-overlay .ot-result-step1 #sb-next-btn,
#sb-result-overlay .ot-result-step1 #sb-retry-btn,
#sb-result-overlay .ot-result-step1 #sb-steal-btn,
#sb-result-overlay .ot-result-step1 #sb-keep-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#sb-result-overlay #sb-keep-btn {
  background: rgba(58,32,16,0.12) !important;
  border: 1.5px solid rgba(58,32,16,0.4) !important;
  color: #3a2010 !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   PC（481px以上）専用：わかバトル勝敗オーバーレイ 完全ゼロベース
   ─ .reversi-game の横2カラムルール（flex-direction:row）を
     #sb-result-overlay スコープで完全に打ち消す
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) {

  /* ─── モーダル本体：縦1カラム・中央揃え ─────────────────────────── */
  /* .reversi-game .ot-result-modal の flex-direction:row を上書き */
  #sb-result-overlay .ot-result-modal,
  .reversi-game #sb-result-overlay .ot-result-modal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* % padding はviewport幅基準になるためpx固定に変更 */
    padding: 40px 36px 109px !important;  /* bottom+49px=約1.3cm上にコンテンツ */
    /* 横2カラム用プロパティをリセット */
    flex: none !important;
    width: min(380px, 88vw) !important;
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
  }

  /* ─── キャラ画像ペイン：横幅いっぱい・中央揃え ─────────────────── */
  /* .reversi-game .ot-result-char-pane の flex:0 0 48% を上書き */
  #sb-result-overlay .ot-result-char-pane,
  .reversi-game #sb-result-overlay .ot-result-char-pane {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ─── modal-body：縦1カラム・中央揃え ──────────────────────────── */
  /* .reversi-game .ot-result-modal-body の flex:1 + 横レイアウト残骸を上書き */
  #sb-result-overlay .ot-result-modal-body,
  .reversi-game #sb-result-overlay .ot-result-modal-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 !important;
    width: 100% !important;
    padding: 0 0 8% !important;  /* PC: モーダルbottom padding で制御 */
    background: transparent !important;
    gap: 10px !important;
  }

  /* ─── step1 / step2：縦・中央揃え（display は JS 制御のため書かない） ─── */
  #sb-result-overlay .ot-result-step1,
  #sb-result-overlay .ot-result-step2,
  .reversi-game #sb-result-overlay .ot-result-step1,
  .reversi-game #sb-result-overlay .ot-result-step2 {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  /* ─── タイトル「かち」「まけ」：中央揃え ─────────────────────── */
  #sb-result-overlay .ot-result-title,
  .reversi-game #sb-result-overlay .ot-result-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    align-self: center !important;
  }

  /* ─── スコア行：中央揃え・幅いっぱい ─────────────────────────── */
  #sb-result-overlay .ot-result-scores,
  #sb-result-overlay .ot-result-step1 .ot-result-scores,
  .reversi-game #sb-result-overlay .ot-result-scores {
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* ─── ボタン：幅いっぱい・茶色ピル形 ─────────────────────────── */
  #sb-result-overlay #sb-next-btn,
  #sb-result-overlay #sb-retry-btn,
  #sb-result-overlay #sb-steal-btn,
  #sb-result-overlay #sb-keep-btn,
  .reversi-game #sb-result-overlay #sb-next-btn,
  .reversi-game #sb-result-overlay #sb-retry-btn,
  .reversi-game #sb-result-overlay #sb-steal-btn,
  .reversi-game #sb-result-overlay #sb-keep-btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #3a2010 !important;
    color: #fff8f0 !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
    padding: 11px 8px !important;
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 16px !important;
    letter-spacing: .08em !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background .15s, transform .15s, box-shadow .15s !important;
  }
  #sb-result-overlay #sb-keep-btn,
  .reversi-game #sb-result-overlay #sb-keep-btn {
    background: rgba(58,32,16,0.12) !important;
    border: 1.5px solid rgba(58,32,16,0.4) !important;
    color: #3a2010 !important;
    box-shadow: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   勝敗画面ボタン：ホバーエフェクト（PC・スマホ共通）
   ═══════════════════════════════════════════════════════════ */
#sb-result-overlay #sb-next-btn:hover,
#sb-result-overlay #sb-steal-btn:hover,
#sb-result-overlay #sb-retry-btn:hover {
  background: #5a3a20 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 rgba(0,0,0,0.30) !important;
  transition: background .15s, transform .15s, box-shadow .15s !important;
}
#sb-result-overlay #sb-keep-btn:hover {
  background: rgba(58,32,16,0.25) !important;
  border-color: rgba(58,32,16,0.65) !important;
  transform: translateY(-2px) !important;
  transition: background .15s, transform .15s !important;
}
/* active（クリック時）フィードバック */
#sb-result-overlay #sb-next-btn:active,
#sb-result-overlay #sb-steal-btn:active,
#sb-result-overlay #sb-retry-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,0.20) !important;
}
#sb-result-overlay #sb-keep-btn:active {
  transform: translateY(2px) !important;
}

/* ═══════════════════════════════════════════════════════════
   スキル入れ替え？ラベル：DotGothic16・茶色・フォント統一
   ═══════════════════════════════════════════════════════════ */
#sb-result-overlay #sb-win-choice > div:first-child {
  font-family: 'DotGothic16', sans-serif !important;
  font-size: clamp(16px, 8vw, 32px) !important;
  line-height: 1.25 !important;
  color: #3a2010 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  letter-spacing: .06em !important;
  width: 100% !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════
   スキル入れ替え画面（sb-swap-modal）：コンテンツを上にずらし
   しっぽと被らないよう下 padding を増量
   ═══════════════════════════════════════════════════════════ */

/* スマホ：sb-swap-overlay → sb-swap-modal のパディング調整 */
.sb-swap-modal {
  padding-bottom: 40px;
}

/* sb-swap-overlay ホバーボタンへの transition */
.sb-swap-overlay .ot-btn,
.sb-continue-overlay .ot-btn {
  transition: all .18s !important;
}


/* ─── スキルいれかえ画面（sb-swap-overlay）内ボタンホバー確認 ─── */
/* sb-swap-overlay .ot-btn は 2662行にすでにhoverあり。念のため強化 */
.sb-swap-overlay .ot-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 8px 0 rgba(0,0,0,0.45), 0 10px 26px rgba(0,0,0,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════
   PC（481px以上）：スキルいれかえ画面モーダルを約2cm上に
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 481px) {
  .sb-swap-overlay .sb-swap-modal {
    margin-top: -49px !important;
  }
}

/* スキル入れ替え画面：タイトルを小さく（sb-choice-modalは対象外） */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-title {
  font-size: clamp(16px, 5vw, 22px) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}

/* ── スキル入れ替え画面：タイトル・テキストをスキル選択と同配色に ── */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-title {
  color: #3a2010 !important;
  text-shadow: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-incoming-label {
  display: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots-label,
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots-sublabel {
  display: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-arrow {
  color: #5a3a20 !important;
  text-shadow: none !important;
}

/* ── スロットを sb-choice-card と同じデザインに ── */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot {
  border-radius: 10px !important;
  border: 1.5px solid rgba(255,255,255,0.08) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.filled {
  background: rgba(255,255,255,0.05) !important;
}
/* カテゴリ色を完全不透明で指定（reversi15.webpクリーム背景に透けないよう） */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-placement { background: rgb(30,100,200) !important;  border-color: rgb(20,80,180) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-flip      { background: rgb(140,60,210) !important;  border-color: rgb(120,40,190) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-erase     { background: rgb(210,50,50) !important;   border-color: rgb(190,30,30) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-combo     { background: rgb(180,130,0) !important;   border-color: rgb(160,110,0) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-block     { background: rgb(140,80,20) !important;   border-color: rgb(120,60,10) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-hint      { background: rgb(100,100,100) !important; border-color: rgb(80,80,80) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-guard     { background: rgb(20,160,60) !important;   border-color: rgb(10,140,40) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-always,
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-null      { background: rgb(50,50,50) !important;    border-color: rgb(80,80,80) !important; }

/* スロット内テキスト：白文字・影強化 */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-name {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-icon {
  text-shadow: 0 0 8px rgba(255,200,0,0.9) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-cond {
  background: rgba(0,0,0,0.35) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,1) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-desc {
  color: #f0f0f0 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 2px 6px rgba(0,0,0,0.9) !important;
}

/* 空きスロット：暗い背景＋点線ボーダーで画像2と同じデザインに */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.empty {
  background: rgba(10,10,20,0.70) !important;
  border: 2px dashed rgba(255,255,255,0.30) !important;
  border-radius: 10px !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.empty .sb-swap-slot-name {
  color: rgba(255,255,255,0.55) !important;
  text-shadow: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.empty .sb-swap-slot-empty-icon {
  color: rgba(255,255,255,0.45) !important;
}

/* ボタン：スキル選択と同じ茶色 */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-actions .ot-btn {
  background: #3a2010 !important;
  border-color: #5a3a20 !important;
  color: #fff8f0 !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-actions .ot-btn:hover {
  background: #5a3a20 !important;
}

/* スキル入れ替え画面：スロット群を約0.7cm(26px)下に */
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-incoming-area {
  margin-top: 26px !important;
}

/* ============================================================
   Battle modal polish: one visual system for desktop and mobile
   ============================================================ */
:root {
  --sb-overlay-shade: rgba(0, 0, 0, 0.55);
  --sb-ink: #3a2010;
  --sb-ink-soft: #5a3a20;
  --sb-paper: #fff2d6;
  --sb-paper-muted: #ead9ba;
}

/* Keep every game-flow background at the same darkness. */
.sb-swap-overlay,
.sb-continue-overlay,
.sb-coin-overlay,
#sb-result-overlay {
  background-color: #000 !important;
  background-blend-mode: normal !important;
}
.sb-swap-overlay {
  background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') !important;
}
.sb-continue-overlay {
  background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') !important;
}
.sb-coin-overlay {
  background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') !important;
}
#sb-result-overlay {
  background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') !important;
}

/* Shared interaction treatment: clear hierarchy without changing the game flow. */
.sb-swap-overlay .ot-btn,
.sb-continue-overlay .ot-btn,
#sb-result-overlay .ot-btn {
  min-height: 44px;
  font-weight: 900 !important;
  line-height: 1.15;
}
.sb-swap-overlay .ot-btn:focus-visible,
.sb-continue-overlay .ot-btn:focus-visible,
#sb-result-overlay .ot-btn:focus-visible,
.sb-choice-card:focus-visible,
.sb-swap-slot:focus-visible {
  outline: 3px solid #ffd65a !important;
  outline-offset: 3px;
}

/* Skill selection: make the title, cards, and actions read as one compact sheet. */
.sb-swap-modal.sb-choice-modal {
  width: min(92vw, 410px) !important;
  max-width: 410px !important;
  padding: 54px 38px 66px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.sb-choice-modal .sb-swap-title {
  font-size: clamp(19px, 2.2vw, 25px) !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
  margin: 0 0 6px !important;
}
.sb-choice-modal .sb-swap-subtitle {
  font-size: clamp(11px, 1.7vw, 14px) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.sb-choice-modal .sb-choice-cards {
  gap: 9px !important;
  margin: 12px 0 16px !important;
}
.sb-choice-modal .sb-choice-card {
  min-height: 88px;
  padding: 12px 15px !important;
  border-radius: 11px !important;
  border-width: 2px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px 0 rgba(58,32,16,.18) !important;
}
.sb-choice-modal .sb-choice-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 6px 14px rgba(0,0,0,.25) !important;
}
.sb-choice-modal .sb-choice-name {
  font-size: clamp(16px, 2vw, 19px) !important;
  line-height: 1.1 !important;
}
.sb-choice-modal .sb-choice-desc {
  font-size: clamp(12px, 1.55vw, 14px) !important;
  line-height: 1.45 !important;
}
.sb-choice-modal .sb-choice-cond-tag {
  padding: 2px 7px !important;
  line-height: 1.25 !important;
}
.sb-choice-modal .sb-swap-actions {
  gap: 10px !important;
}

/* Coin flip: give the heading, coin, and result consistent visual breathing room. */
.sb-coin-overlay-inner {
  width: min(88vw, 390px) !important;
  max-width: 390px !important;
}
.sb-coin-frame-content {
  padding: 15% 14% 19% !important;
}
.sb-coin-title {
  font-size: clamp(22px, 3vw, 30px) !important;
  letter-spacing: .08em !important;
}
.sb-coin {
  width: clamp(86px, 12vw, 116px) !important;
  height: clamp(86px, 12vw, 116px) !important;
}
.sb-coin-result {
  font-size: clamp(18px, 2.5vw, 27px) !important;
  line-height: 1.45 !important;
}

/* Win / skill-replacement modal: CSS-side sizing; PC can be overridden by endGame() injected style. */
.reversi-game #sb-result-overlay .ot-result-modal,
#sb-result-overlay .ot-result-modal {
  width: min(390px, 90vw) !important;
  max-width: 390px !important;
  padding: 42px 38px 78px !important;
  gap: 12px !important;
}
#sb-result-overlay .ot-result-char-pane img {
  width: clamp(112px, 20vw, 154px) !important;
  height: clamp(112px, 20vw, 154px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-width: 3px !important;
}
#sb-result-overlay .ot-result-modal-body {
  justify-content: center !important;
  padding: 0 !important;
  gap: 12px !important;
}
#sb-result-overlay .ot-result-step1,
#sb-result-overlay .ot-result-step2 {
  gap: 12px !important;
}
#sb-result-overlay .ot-result-title {
  font-size: clamp(30px, 5vw, 42px) !important;
  letter-spacing: .06em !important;
  line-height: 1.12 !important;
}
#sb-result-overlay .ot-result-scores {
  min-height: 56px;
  padding: 8px 18px !important;
  border-radius: 14px !important;
}
#sb-result-overlay .ot-result-num {
  font-size: clamp(24px, 4vw, 30px) !important;
}
#sb-result-overlay #sb-win-choice > div:first-child {
  font-size: clamp(21px, 4vw, 29px) !important;
  line-height: 1.22 !important;
  margin: 0 !important;
}
#sb-result-overlay #sb-win-choice > div:nth-child(2) {
  gap: 9px !important;
}
#sb-result-overlay #sb-steal-btn,
#sb-result-overlay #sb-keep-btn,
#sb-result-overlay #sb-retry-btn,
#sb-result-overlay #sb-next-btn {
  min-height: 44px;
  padding: 11px 12px !important;
}

/* Continue prompt: match the result modal proportions and make its choices easy to scan. */
.sb-continue-modal {
  width: min(90vw, 390px) !important;
  max-width: 390px !important;
  padding: 48px 42px 72px !important;
  gap: 11px !important;
}
.sb-continue-face {
  width: clamp(94px, 15vw, 122px) !important;
  height: clamp(94px, 15vw, 122px) !important;
}
.sb-continue-wins {
  font-size: clamp(25px, 4vw, 34px) !important;
  line-height: 1.1 !important;
}
.sb-continue-title {
  font-size: clamp(13px, 2vw, 16px) !important;
  line-height: 1.5 !important;
}
.sb-continue-actions {
  width: 100% !important;
  gap: 9px !important;
  margin-top: 4px !important;
}
.sb-continue-actions .ot-btn {
  width: 100% !important;
}

@media (max-width: 480px) {
  .sb-swap-overlay { background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') !important; }
  .sb-continue-overlay { background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') !important; }
  .sb-coin-overlay { background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') !important; }
  #sb-result-overlay { background-image: linear-gradient(var(--sb-overlay-shade), var(--sb-overlay-shade)), url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') !important; }

  .sb-swap-overlay,
  .sb-continue-overlay,
  .sb-coin-overlay,
  #sb-result-overlay {
    padding: 10px !important;
    align-items: center !important;
  }
  .sb-swap-modal.sb-choice-modal {
    width: min(92vw, 350px) !important;
    padding: 47px 30px 60px !important;
  }
  .sb-choice-modal .sb-choice-cards { gap: 8px !important; margin: 10px 0 13px !important; }
  .sb-choice-modal .sb-choice-card { min-height: 0; padding: 10px 12px !important; gap: 4px !important; }
  .sb-choice-modal .sb-choice-name { font-size: 16px !important; }
  .sb-choice-modal .sb-choice-desc { font-size: 12px !important; line-height: 1.42 !important; }

  .sb-coin-overlay-inner { width: min(88vw, 350px) !important; }
  .sb-coin-frame-content { padding: 15% 13% 19% !important; }

  .reversi-game #sb-result-overlay .ot-result-modal,
  #sb-result-overlay .ot-result-modal {
    width: min(88vw, 350px) !important;
    padding: 37px 31px 67px !important;
    gap: 10px !important;
  }
  #sb-result-overlay .ot-result-char-pane img { width: 112px !important; height: 112px !important; }
  #sb-result-overlay .ot-result-title { font-size: 30px !important; }
  #sb-result-overlay #sb-win-choice > div:first-child { font-size: 22px !important; }

  .sb-continue-modal { width: min(88vw, 350px) !important; padding: 43px 33px 65px !important; }
  .sb-continue-face { width: 96px !important; height: 96px !important; }
}

@media (max-height: 650px) and (max-width: 480px) {
  .sb-swap-modal.sb-choice-modal { padding-top: 39px !important; padding-bottom: 48px !important; }
  .sb-choice-modal .sb-choice-cards { margin: 8px 0 10px !important; }
  .sb-coin-overlay-inner { width: min(78vh, 330px) !important; }
  #sb-result-overlay .ot-result-char-pane img { width: 94px !important; height: 94px !important; }
  .reversi-game #sb-result-overlay .ot-result-modal,
  #sb-result-overlay .ot-result-modal { padding-top: 31px !important; padding-bottom: 54px !important; }
  .sb-continue-modal { padding-top: 36px !important; padding-bottom: 52px !important; }
  .sb-continue-face { width: 82px !important; height: 82px !important; }
}

/* Follow-up: make portrait framing feel intentional while keeping clear edge room. */
#sb-result-overlay .ot-result-char-pane img {
  width: clamp(128px, 22vw, 172px) !important;
  height: clamp(128px, 22vw, 172px) !important;
}
.sb-continue-face {
  width: clamp(108px, 17vw, 140px) !important;
  height: clamp(108px, 17vw, 140px) !important;
}
.sb-continue-title {
  font-size: clamp(15px, 2.25vw, 18px) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}
@media (max-width: 480px) {
  #sb-result-overlay .ot-result-char-pane img {
    width: 128px !important;
    height: 128px !important;
  }
  .sb-continue-face {
    width: 110px !important;
    height: 110px !important;
  }
  .sb-continue-title { font-size: 16px !important; }
}
@media (max-height: 650px) and (max-width: 480px) {
  #sb-result-overlay .ot-result-char-pane img {
    width: 104px !important;
    height: 104px !important;
  }
  .sb-continue-face {
    width: 92px !important;
    height: 92px !important;
  }
}

/* Result / replacement sheet: prioritise the character portrait and remove the empty midsection. */
#sb-result-overlay .ot-result-char-pane img {
  width: clamp(158px, 27vw, 202px) !important;
  height: clamp(158px, 27vw, 202px) !important;
}
#sb-result-overlay .ot-result-modal-body {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}
#sb-result-overlay .ot-result-step1,
#sb-result-overlay .ot-result-step2 {
  gap: 8px !important;
}
#sb-result-overlay .ot-result-char-pane + .ot-result-modal-body {
  margin-top: 4px !important;
}
@media (max-width: 480px) {
  #sb-result-overlay .ot-result-char-pane img {
    width: min(52vw, 178px) !important;
    height: min(52vw, 178px) !important;
  }
  #sb-result-overlay .ot-result-char-pane + .ot-result-modal-body {
    margin-top: 2px !important;
  }
}
@media (max-height: 650px) and (max-width: 480px) {
  #sb-result-overlay .ot-result-char-pane img {
    width: 132px !important;
    height: 132px !important;
  }
}

/* Compact the cat sheet to the actual result content; the previous 360:600 frame left a large empty lower area. */
.reversi-game #sb-result-overlay .ot-result-modal,
#sb-result-overlay .ot-result-modal {
  aspect-ratio: 360 / 540 !important;
  padding: 30px 34px 55px !important;
}
@media (max-width: 480px) {
  .reversi-game #sb-result-overlay .ot-result-modal,
  #sb-result-overlay .ot-result-modal {
    aspect-ratio: 360 / 540 !important;
    padding: 30px 27px 52px !important;
  }
}
@media (max-height: 650px) and (max-width: 480px) {
  .reversi-game #sb-result-overlay .ot-result-modal,
  #sb-result-overlay .ot-result-modal {
    aspect-ratio: 360 / 520 !important;
    padding-top: 24px !important;
    padding-bottom: 43px !important;
  }
}

/* Keep the existing sizes, but center the portrait-to-actions group vertically in the compact sheet. */
#sb-result-overlay .ot-result-char-pane,
#sb-result-overlay .ot-result-modal-body {
  position: relative !important;
  top: clamp(24px, 4vw, 32px) !important;
}
@media (max-width: 480px) {
  #sb-result-overlay .ot-result-char-pane,
  #sb-result-overlay .ot-result-modal-body {
    top: 26px !important;
  }
}
@media (max-height: 650px) and (max-width: 480px) {
  #sb-result-overlay .ot-result-char-pane,
  #sb-result-overlay .ot-result-modal-body {
    top: 16px !important;
  }
}

/* One vertical anchor for every battle-flow dialog.
   Desktop matches the former skill-choice top edge; mobile matches the red guide line. */
.sb-swap-overlay,
.sb-coin-overlay,
.sb-continue-overlay,
#sb-result-overlay {
  --sb-dialog-top: 86px;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: var(--sb-dialog-top) !important;
  padding-bottom: 16px !important;
  box-sizing: border-box !important;
}
.sb-swap-overlay .sb-swap-modal {
  margin-top: 0 !important;
}
@media (max-width: 480px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    --sb-dialog-top: 94px;
    padding-top: var(--sb-dialog-top) !important;
  }
}

/* Mobile background scrolling: keep the game surface swipeable and remove the pale fallback below it. */
@media (max-width: 480px) {
  #reversi,
  #reversi.overlay-open,
  #screen-game {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
  }
  #reversi {
    background-color: #17383a !important;
  }
  #screen-game {
    min-height: 100svh !important;
    background: transparent !important;
    padding-bottom: 16px;
  }
  #reversi::before {
    min-height: 100svh;
    background-position: center top;
    opacity: .30;
  }
}

/* Mobile correction: swipes on the dim area outside a dialog pass to the game page, not an empty overlay scroller. */
@media (max-width: 480px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
  }
  .sb-swap-modal,
  .sb-coin-overlay-inner,
  .sb-continue-modal,
  #sb-result-overlay .ot-result-modal {
    max-height: calc(100svh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Draw the game background directly once.  This removes the pale, low-opacity image strip below the game. */
  #reversi {
    background-color: #17383a !important;
    background-image: url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
  }
  #reversi::before {
    display: none !important;
  }
}
@media (max-height: 650px) and (max-width: 480px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    --sb-dialog-top: 48px;
  }
}

/* Desktop: center every battle-flow dialog vertically, regardless of its own height. */
@media (min-width: 481px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    align-items: center !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* Mobile viewport fitting
   Use the small viewport height so the dialog remains usable while the browser UI is visible. */
/* Shared by swap/coin/continue/result overlays; keep edits here synchronized across those flows. */
@media (max-width: 480px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    --sb-dialog-top: max(env(safe-area-inset-top, 0px), clamp(18px, 10svh, 94px));
    --sb-dialog-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
    /* 外部ヘッダーを含むviewport高を足さず、absolute + inset:0で#reversi内に収める。 */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scroll-padding-top: var(--sb-dialog-top);
    scroll-padding-bottom: var(--sb-dialog-bottom);
    padding-top: var(--sb-dialog-top) !important;
    padding-bottom: var(--sb-dialog-bottom) !important;
  }
  .sb-swap-modal,
  .sb-coin-overlay-inner,
  .sb-continue-modal,
  #sb-result-overlay .ot-result-modal {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Tall phones: retain comfortable framing around the dialog. */
@media (max-width: 480px) and (min-height: 820px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    --sb-dialog-top: max(env(safe-area-inset-top, 0px), 94px);
    --sb-dialog-bottom: max(env(safe-area-inset-bottom, 0px), 28px);
  }
}

/* Standard phones: keep the title area visible without pushing actions below the fold. */
@media (max-width: 480px) and (min-height: 651px) and (max-height: 819px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    --sb-dialog-top: max(env(safe-area-inset-top, 0px), 52px);
    --sb-dialog-bottom: max(env(safe-area-inset-bottom, 0px), 18px);
  }
}

/* Short phones: use nearly the full usable height and reduce only surrounding whitespace. */
@media (max-width: 480px) and (max-height: 650px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    --sb-dialog-top: max(env(safe-area-inset-top, 0px), 14px);
    --sb-dialog-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  }
}
@media (max-width: 480px) and (max-height: 560px) {
  .sb-swap-modal.sb-choice-modal { padding: 31px 26px 39px !important; }
  .sb-choice-modal .sb-choice-cards { gap: 6px !important; margin: 7px 0 9px !important; }
  .sb-choice-modal .sb-choice-card { padding: 8px 10px !important; }
  .sb-coin-overlay-inner { width: min(76svh, 320px) !important; }
  .sb-continue-modal { padding-top: 31px !important; padding-bottom: 42px !important; }
  .reversi-game #sb-result-overlay .ot-result-modal,
  #sb-result-overlay .ot-result-modal { padding-top: 21px !important; padding-bottom: 36px !important; }
}

/* Mobile exceptions: the coin flip and continue prompts are short, so center them in the usable viewport. */
@media (max-width: 480px) {
  .sb-coin-overlay,
  .sb-continue-overlay {
    align-items: center !important;
    padding-top: max(env(safe-area-inset-top, 0px), 16px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
  }

  /* The replacement confirmation has fewer rows than the score result: use a slightly shorter sheet. */
  #sb-result-overlay:has(#sb-win-choice[style*="display: flex"]) .ot-result-modal {
    aspect-ratio: 360 / 510 !important;
    padding-bottom: 46px !important;
  }
}
@media (max-width: 480px) and (max-height: 650px) {
  .sb-coin-overlay,
  .sb-continue-overlay {
    padding-top: max(env(safe-area-inset-top, 0px), 12px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px) !important;
  }
  #sb-result-overlay:has(#sb-win-choice[style*="display: flex"]) .ot-result-modal {
    aspect-ratio: 360 / 500 !important;
    padding-bottom: 36px !important;
  }
}

/* Skill replacement sheet: compact the flow so it fits on mobile without sacrificing readable controls. */
@media (max-width: 480px) {
  .sb-swap-modal:not(.sb-choice-modal) {
    padding: 42px 30px 46px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-incoming-area {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-arrow {
    margin: 4px 0 !important;
    line-height: 1 !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots {
    gap: 0 !important;
    margin: 4px 0 12px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot {
    border-radius: 0 !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot + .sb-swap-slot {
    margin-top: -1.5px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot:first-child {
    border-radius: 10px 10px 0 0 !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot:last-child {
    border-radius: 0 0 10px 10px !important;
  }
}
@media (max-width: 480px) and (max-height: 650px) {
  .sb-swap-modal:not(.sb-choice-modal) {
    padding: 29px 26px 32px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-title {
    margin-bottom: 5px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots {
    margin-bottom: 9px !important;
  }
}

/* 入れ替え画面は独立した不透明背景を必ず持たせ、背後の盤面を見せない。 */
.sb-swap-overlay {
  background-color: #000 !important;
  background-image:
    var(--sb-swap-bg-grad, linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55))),
    var(--sb-swap-bg-img, url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp')) !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  opacity: 1 !important;
}
@media (max-width: 480px) {
  .sb-swap-overlay {
    background-image:
      var(--sb-swap-bg-grad, linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55))),
      var(--sb-swap-bg-img, url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp')) !important;
  }
}

/* Coin flip: improve mobile readability without changing the dialog or coin size. */
@media (max-width: 480px) {
  .sb-coin-title {
    font-size: clamp(24px, 7vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }
  .sb-coin-result {
    font-size: clamp(20px, 5.8vw, 26px) !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    letter-spacing: .08em !important;
  }
}

/* Refine the mobile replacement sheet: restore breathing room around and between the three slots. */
@media (max-width: 480px) {
  .sb-swap-modal:not(.sb-choice-modal) {
    position: relative !important;
    top: -24px !important;
    padding: 42px 36px 54px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots {
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot + .sb-swap-slot {
    margin-top: 0 !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot {
    border-radius: 9px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot:first-child,
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot:last-child {
    border-radius: 9px !important;
  }
}

/* Mobile overlay scrolling: allow a vertical swipe inside every dialog without changing its placement. */
@media (max-width: 480px) {
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
  }
  .sb-swap-modal,
  .sb-coin-overlay-inner,
  .sb-continue-modal,
  #sb-result-overlay .ot-result-modal {
    touch-action: pan-y pinch-zoom;
  }
}
@media (max-width: 480px) and (max-height: 650px) {
  .sb-swap-modal:not(.sb-choice-modal) {
    top: -12px !important;
    padding: 29px 30px 38px !important;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots {
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
}

/* Final mobile background layer reset: never reveal the pale base scene beneath a dialog overlay. */
@media (max-width: 480px) {
  #reversi {
    background: #17383a url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center top / 100% auto no-repeat !important;
  }
  #reversi::before,
  #screen-game::before,
  #screen-game::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
  }

  /* オーバーレイだけをスクロール領域にし、モーダル内部の二重スクロールをなくす。 */
  .sb-swap-overlay,
  .sb-coin-overlay,
  .sb-continue-overlay,
  #sb-result-overlay {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
  }
  .sb-swap-modal,
  .sb-coin-overlay-inner,
  .sb-continue-modal,
  #sb-result-overlay .ot-result-modal {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* 連勝画面も他の画面と同じく、オーバーレイ全体をスクロール面にする。
   白枠は外側の空白ではなくオーバーレイ自身のborderとして持たせる。 */
@media (max-width: 480px) {
  .sb-continue-overlay {
    position: absolute !important;
    inset: 0 !important;
    border: 16px solid #fff !important;
    background-clip: padding-box !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    touch-action: pan-y pinch-zoom;
  }

  /* 手順決めと連勝画面をスマホ時だけ同じ高さへ上げる。 */
  .sb-coin-overlay-inner,
  .sb-continue-modal {
    transform: translateY(-57px) !important;
  }
}

/* ダイアログ表示中の背景は各オーバーレイだけが所有する。
   #reversi側の背景・描画シールドを残すと、隙間で同じ画像が二重に見える。 */
/* 背後UI非表示の最終防波堤。整理するときは全オーバーレイの実機確認後に行う。 */
#reversi:has(.sb-swap-overlay, .sb-coin-overlay, #sb-result-overlay.show) {
  background: #000 !important;
}
#reversi:has(.sb-continue-overlay) {
  background: #fff !important;
}
#reversi:has(.sb-swap-overlay, .sb-coin-overlay, .sb-continue-overlay, #sb-result-overlay.show)::before,
#reversi.overlay-open:has(.sb-swap-overlay, .sb-coin-overlay, .sb-continue-overlay, #sb-result-overlay.show)::after {
  content: none !important;
  display: none !important;
}

/* 勝敗・連勝画面では背後の対局UIを描画しない。
   visibilityでレイアウト高を保ち、スキル選択画面と同じスクロール構成にする。 */
#reversi:has(> #sb-result-overlay.show) > :not(#sb-result-overlay),
#reversi:has(> .sb-continue-overlay) > :not(.sb-continue-overlay) {
  visibility: hidden !important;
}

/* ============================================================
   Ability cut-in refresh: character-led category cards, no center FX
   Current visual overrides for the base cut-in block above.
   Keep this block later in the file so cascade order stays unchanged.
   ============================================================ */
.sb-cutin {
  --ci-main: #5b72c9;
  --ci-deep: #18244f;
  --ci-edge: #9bb4ff;
  --ci-glow: rgba(112, 151, 255, .42);
  isolation: isolate;
}
.sb-cutin.cutin-cat-placement { --ci-main: #246ad2; --ci-deep: #0c245e; --ci-edge: #86c7ff; --ci-glow: rgba(68, 159, 255, .55); }
.sb-cutin.cutin-cat-flip      { --ci-main: #7b3fc8; --ci-deep: #29104f; --ci-edge: #d1a4ff; --ci-glow: rgba(183, 103, 255, .52); }
.sb-cutin.cutin-cat-erase     { --ci-main: #c84642; --ci-deep: #59151b; --ci-edge: #ffb0a3; --ci-glow: rgba(255, 93, 75, .52); }
.sb-cutin.cutin-cat-combo     { --ci-main: #bf8e16; --ci-deep: #503408; --ci-edge: #ffe58a; --ci-glow: rgba(255, 206, 57, .55); }
.sb-cutin.cutin-cat-block     { --ci-main: #95632c; --ci-deep: #39220d; --ci-edge: #e8bc7c; --ci-glow: rgba(203, 139, 65, .48); }
.sb-cutin.cutin-cat-hint      { --ci-main: #52757a; --ci-deep: #18383c; --ci-edge: #b5edef; --ci-glow: rgba(115, 225, 226, .42); }
.sb-cutin.cutin-cat-guard     { --ci-main: #258653; --ci-deep: #0d3827; --ci-edge: #9df0b6; --ci-glow: rgba(72, 229, 135, .48); }
.sb-cutin.cutin-cat-null      { --ci-main: #4a5160; --ci-deep: #171a24; --ci-edge: #c4cad6; --ci-glow: rgba(199, 207, 224, .30); }

/* Remove the former center canvas and flash completely. */
.sb-cutin #ci-fx-canvas,
.sb-cutin .sb-cutin-flash,
.sb-cutin .sb-cutin-eff {
  display: none !important;
}
.sb-cutin-card {
  height: 138px;
  border: 2px solid var(--ci-edge);
  border-radius: 16px;
  overflow: visible;
  background: linear-gradient(112deg, var(--ci-deep), var(--ci-main)) !important;
  box-shadow:
    0 0 0 4px rgba(7, 10, 18, .78),
    0 0 30px var(--ci-glow),
    0 18px 42px rgba(0, 0, 0, .68) !important;
}
.sb-cutin-card-inner {
  border-radius: 14px;
  background: linear-gradient(105deg, rgba(0,0,0,.48), transparent 54%, rgba(255,255,255,.12));
}
.sb-cutin-card-inner::before,
.sb-cutin-card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sb-cutin-card-inner::before {
  background: repeating-linear-gradient(118deg, transparent 0 24px, rgba(255,255,255,.10) 25px 27px, transparent 28px 52px);
  opacity: .7;
  animation: ci-stripes 1.8s linear infinite;
}
.sb-cutin-card-inner::after {
  inset: 7px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.35);
}
.sb-cutin-bg { background: transparent !important; }
.sb-cutin-char {
  width: 42%;
  height: 178px;
  bottom: -2px;
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.62)) drop-shadow(0 0 12px var(--ci-glow));
  animation: ci-character-enter .38s cubic-bezier(.16,.92,.27,1.15) both;
}
.sb-cutin-char.side-l { left: 4%; }
.sb-cutin-char.side-r { right: 4%; }
.sb-cutin-text {
  top: 51%;
  gap: 5px;
}
.sb-cutin-text.side-r { right: 6%; }
.sb-cutin-text.side-l { left: 6%; }
.sb-cutin-text-star {
  font-size: 15px;
  color: #fff0a0;
  letter-spacing: 3px;
  margin-bottom: 0;
  text-shadow: 0 0 10px var(--ci-glow), 1px 1px 0 rgba(0,0,0,.8);
}
.sb-cutin-text-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(22px, 6.2vw, 34px);
  line-height: 1.18;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.92), 0 0 16px var(--ci-glow);
}
@keyframes ci-stripes { from { transform: translateX(-28px); } to { transform: translateX(28px); } }
@keyframes ci-character-enter { from { opacity: 0; transform: translateX(var(--ci-char-enter, -20px)) scale(.94); } to { opacity: 1; transform: translateX(0) scale(1); } }
.sb-cutin.cutin-cpu .sb-cutin-char { --ci-char-enter: 20px; }

@media (max-width: 430px) {
  .sb-cutin-card { height: 116px; border-radius: 13px; }
  .sb-cutin-char { height: clamp(172px, 48vw, 190px); width: 54%; bottom: -2px; }
  .sb-cutin-char.side-l { left: 0; }
  .sb-cutin-char.side-r { right: 0; }
  .sb-cutin-text-name { font-size: clamp(20px, 6.3vw, 28px); }
  .sb-cutin-text-star { font-size: 13px; }
}
@media (min-width: 431px) {
  .sb-cutin {
    left: clamp(42px, 10vw, 190px);
    right: clamp(42px, 10vw, 190px);
  }
  .sb-cutin-wrap {
    max-width: 860px;
    margin: 0 auto;
  }
  .sb-cutin-card { height: 168px; }
  .sb-cutin-char { height: 410px; width: 62%; bottom: -2px; }
  .sb-cutin-char.side-l { left: -7%; }
  .sb-cutin-char.side-r { right: -7%; }
  .sb-cutin-text.side-r { right: 8%; }
  .sb-cutin-text.side-l { left: 8%; }
  .sb-cutin-text-name { font-size: clamp(36px, 6.5vw, 54px); }
  .sb-cutin-text-star { font-size: 21px; }
}

/* Cut-in texture variants: restrained category motifs in place of the shared diagonal stripes. */
.sb-cutin-card-inner::before {
  opacity: .30;
  animation: none;
}
/* Blue / placement: slow waves and cloud-like arcs. */
.sb-cutin.cutin-cat-placement .sb-cutin-card-inner::before {
  background:
    repeating-radial-gradient(ellipse at 18% 122%, transparent 0 22px, rgba(196,235,255,.42) 23px 25px, transparent 26px 43px),
    repeating-radial-gradient(ellipse at 76% 116%, transparent 0 29px, rgba(196,235,255,.24) 30px 32px, transparent 33px 56px);
  background-size: 128px 58px, 166px 74px;
  animation: ci-wave-drift 8s linear infinite;
}
/* Flip: a fine magic-circle geometry, kept in the background. */
.sb-cutin.cutin-cat-flip .sb-cutin-card-inner::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 15px, rgba(238,214,255,.38) 16px 17px, transparent 18px 29px),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(238,214,255,.23) 0deg 2deg, transparent 2deg 30deg);
  background-size: auto, auto;
  animation: ci-circle-turn 18s linear infinite;
}
/* Erase: quiet scattered sparks. */
.sb-cutin.cutin-cat-erase .sb-cutin-card-inner::before {
  background-image:
    radial-gradient(circle at 14% 28%, rgba(255,238,190,.90) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 70%, rgba(255,177,112,.75) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 24%, rgba(255,238,190,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 66%, rgba(255,177,112,.70) 0 1.5px, transparent 2.5px);
  background-size: 58px 42px, 76px 56px, 64px 48px, 84px 62px;
  animation: ci-spark-twinkle 3.5s ease-in-out infinite;
}
/* Combo: vertical yellow light lines, replacing the former gold treatment. */
.sb-cutin.cutin-cat-combo { --ci-main: #b7aa13; --ci-deep: #474207; --ci-edge: #fff17a; --ci-glow: rgba(255, 237, 49, .38); }
.sb-cutin.cutin-cat-combo .sb-cutin-card-inner::before {
  background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(255,244,101,.52) 21px 23px, transparent 24px 52px);
  background-size: 76px 100%;
  animation: ci-light-lines 2.8s ease-in-out infinite;
}
/* Block: subdued brick pattern. */
.sb-cutin.cutin-cat-block .sb-cutin-card-inner::before {
  background:
    linear-gradient(rgba(255,229,188,.34) 1px, transparent 1px) 0 0 / 52px 25px,
    linear-gradient(90deg, rgba(255,229,188,.30) 1px, transparent 1px) 0 0 / 52px 25px,
    linear-gradient(90deg, rgba(255,229,188,.26) 1px, transparent 1px) 26px 12px / 52px 25px;
  animation: none;
}
/* Hint: navigation grid with a soft guidance scan. */
.sb-cutin.cutin-cat-hint .sb-cutin-card-inner::before {
  background:
    linear-gradient(rgba(199,255,255,.30) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(199,255,255,.30) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 50%, rgba(199,255,255,.30) 0 2px, transparent 3px);
  animation: ci-nav-scan 5s linear infinite;
}
/* Guard: low-contrast hexagonal mesh. */
.sb-cutin.cutin-cat-guard .sb-cutin-card-inner::before {
  background:
    linear-gradient(30deg, rgba(210,255,220,.30) 12%, transparent 12.5%, transparent 87%, rgba(210,255,220,.30) 87.5%, rgba(210,255,220,.30)),
    linear-gradient(150deg, rgba(210,255,220,.30) 12%, transparent 12.5%, transparent 87%, rgba(210,255,220,.30) 87.5%, rgba(210,255,220,.30)),
    linear-gradient(90deg, rgba(210,255,220,.22) 2%, transparent 2.5%, transparent 97%, rgba(210,255,220,.22) 97.5%, rgba(210,255,220,.22));
  background-size: 42px 72px;
  background-position: 0 0, 0 0, 21px 36px;
  animation: none;
}
@keyframes ci-wave-drift { from { background-position: 0 0, 0 0; } to { background-position: 128px 0, -166px 0; } }
@keyframes ci-circle-turn { from { transform: rotate(0deg) scale(1.05); } to { transform: rotate(360deg) scale(1.05); } }
@keyframes ci-spark-twinkle { 0%,100% { opacity:.20; } 50% { opacity:.42; } }
@keyframes ci-light-lines { 0%,100% { opacity:.22; } 50% { opacity:.46; } }
@keyframes ci-nav-scan { from { background-position: 0 0, 0 0, -24px 0; } to { background-position: 0 0, 0 0, 24px 0; } }

/* Vivid category palette and per-category pattern timing. */
.sb-cutin.cutin-cat-placement { --ci-main: #148cff; --ci-deep: #063777; --ci-edge: #a5ddff; --ci-glow: rgba(55, 168, 255, .62); }
.sb-cutin.cutin-cat-flip      { --ci-main: #9d48e8; --ci-deep: #360a6c; --ci-edge: #e1b9ff; --ci-glow: rgba(196, 108, 255, .62); }
.sb-cutin.cutin-cat-erase     { --ci-main: #e23e37; --ci-deep: #6b1117; --ci-edge: #ffc0a8; --ci-glow: rgba(255, 89, 70, .62); }
.sb-cutin.cutin-cat-combo     { --ci-main: #d9c400; --ci-deep: #5e5300; --ci-edge: #fff590; --ci-glow: rgba(255, 236, 22, .58); }
.sb-cutin.cutin-cat-block     { --ci-main: #b66f2d; --ci-deep: #4a260c; --ci-edge: #f2c786; --ci-glow: rgba(224, 142, 63, .55); }
.sb-cutin.cutin-cat-hint      { --ci-main: #259aa2; --ci-deep: #0c4148; --ci-edge: #bdfcff; --ci-glow: rgba(79, 234, 239, .52); }
.sb-cutin.cutin-cat-guard     { --ci-main: #1aab5d; --ci-deep: #0a4828; --ci-edge: #a7ffc5; --ci-glow: rgba(74, 239, 140, .55); }
.sb-cutin.cutin-cat-null      { --ci-main: #66728e; --ci-deep: #202637; --ci-edge: #d4ddec; --ci-glow: rgba(195, 213, 245, .38); }

/* Standard pace */
.sb-cutin.cutin-cat-placement .sb-cutin-card-inner::before { animation-duration: 5.5s; }
.sb-cutin.cutin-cat-flip .sb-cutin-card-inner::before { animation-duration: 10s; }
.sb-cutin.cutin-cat-hint .sb-cutin-card-inner::before { animation-duration: 3.8s; }
/* Fast spark scatter for erase; very fast vertical light sweep for combo. */
.sb-cutin.cutin-cat-erase .sb-cutin-card-inner::before { animation: ci-spark-twinkle 1.15s ease-in-out infinite; }
.sb-cutin.cutin-cat-combo .sb-cutin-card-inner::before {
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,246,92,.68) 5px 6px, transparent 7px 11px);
  background-size: 100% 48px;
  opacity: .48;
  animation: ci-combo-rush .26s linear infinite;
}
/* Move previously static brick / hex / neutral textures at a quiet pace. */
.sb-cutin.cutin-cat-block .sb-cutin-card-inner::before { animation: ci-brick-drift 7s linear infinite; }
.sb-cutin.cutin-cat-guard .sb-cutin-card-inner::before { animation: ci-hex-drift 8s linear infinite; }
.sb-cutin.cutin-cat-null .sb-cutin-card-inner::before { animation: ci-stripes 7s linear infinite; }
@keyframes ci-brick-drift { from { background-position: 0 0, 0 0, 26px 12px; } to { background-position: 52px 25px, 52px 25px, 78px 37px; } }
@keyframes ci-hex-drift { from { background-position: 0 0, 0 0, 21px 36px; } to { background-position: 42px 72px, 42px 72px, 63px 108px; } }
@keyframes ci-combo-rush { from { background-position: 0 0; } to { background-position: 0 48px; } }

/* Erase: denser, brighter sparks with a short explosive pulse. */
.sb-cutin.cutin-cat-erase .sb-cutin-card {
  box-shadow: 0 0 0 4px rgba(7,10,18,.78), 0 0 42px rgba(255,78,42,.72), 0 18px 42px rgba(0,0,0,.68) !important;
}
.sb-cutin.cutin-cat-erase .sb-cutin-card-inner::before {
  background-image:
    radial-gradient(circle at 8% 20%, #fff6bf 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 24% 72%, #ffce5e 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 41% 28%, #fff6bf 0 1.8px, transparent 3px),
    radial-gradient(circle at 57% 76%, #ff8b43 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 73% 38%, #ffe38a 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 91% 67%, #ff7044 0 1.7px, transparent 3px),
    linear-gradient(118deg, transparent 46%, rgba(255,217,120,.36) 48% 49%, transparent 51%);
  background-size: 42px 32px, 50px 39px, 56px 42px, 48px 36px, 62px 46px, 54px 40px, 68px 52px;
  opacity: .78;
  animation: ci-erase-spark-burst .54s steps(2, end) infinite;
}
@keyframes ci-erase-spark-burst {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; transform: scale(1); }
  55%  { background-position: 22px -16px, -28px 18px, 31px 14px, -24px -20px, 27px -18px, -30px 15px, 34px -22px; transform: scale(1.025); }
  100% { background-position: 44px -32px, -56px 36px, 62px 28px, -48px -40px, 54px -36px, -60px 30px, 68px -44px; transform: scale(1); }
}

/* Hint: replace the centre dot with a white targeting reticle that patrols up / right / down / left. */
.sb-cutin.cutin-cat-hint .sb-cutin-card-inner::before {
  background:
    linear-gradient(rgba(199,255,255,.24) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(199,255,255,.24) 1px, transparent 1px) 0 0 / 24px 24px;
  opacity: .42;
}
.sb-cutin.cutin-cat-hint .sb-cutin-card-inner::after {
  inset: 50% auto auto 50%;
  width: 64px;
  height: 64px;
  border: 1.5px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)) center / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,.86)) center / 100% 1px no-repeat,
    radial-gradient(circle at center, #fff 0 2px, transparent 3px);
  box-shadow: 0 0 10px rgba(221,255,255,.74), inset 0 0 8px rgba(221,255,255,.18);
  animation: ci-reticle-patrol 3.6s ease-in-out infinite;
}
@keyframes ci-reticle-patrol {
  0%, 100% { transform: translate(-50%, -50%) translateY(-18px); }
  25%      { transform: translate(-50%, -50%) translateX(28px); }
  50%      { transform: translate(-50%, -50%) translateY(18px); }
  75%      { transform: translate(-50%, -50%) translateX(-28px); }
}

/* Victory result legacy pseudo-element layer; the later star-field rules disable these pseudo-elements. */
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::before,
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::after {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::before {
  content: '✦';
  top: 13%;
  left: 11%;
  color: #fff2a6;
  font-size: clamp(17px, 4vw, 30px);
  line-height: 1;
  text-shadow:
    18vw 8vh 0 #fff8c8,
    58vw 3vh 0 #ffe98a,
    67vw 24vh 0 #fff8c8,
    7vw 39vh 0 #ffe98a,
    61vw 46vh 0 #fff8c8,
    24vw 58vh 0 #ffe98a,
    72vw 65vh 0 #fff8c8;
  filter: drop-shadow(0 0 7px rgba(255,220,77,.92));
  animation: sb-win-sparkle-stars 1.8s ease-in-out infinite alternate;
}
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::after {
  content: '';
  inset: 8%;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 84% 18%, rgba(255,234,130,.90) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 92% 60%, rgba(255,255,255,.90) 0 1px, transparent 2px),
    radial-gradient(circle at 9% 72%, rgba(255,234,130,.90) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 82%, rgba(255,255,255,.80) 0 1px, transparent 2px);
  animation: sb-win-sparkle-dots 2.6s ease-in-out infinite;
}
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"]) .ot-result-modal {
  position: relative;
  z-index: 3 !important;
}
@keyframes sb-win-sparkle-stars {
  from { opacity: .45; transform: scale(.82) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1.13) rotate(8deg); }
}
@keyframes sb-win-sparkle-dots {
  0%, 100% { opacity: .25; transform: scale(.96); }
  50%      { opacity: .82; transform: scale(1.03); }
}

/* Victory stars: many stationary ★ marks in front of the dialog, then fade out. */
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::before,
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::after {
  z-index: 8;
  inset: auto;
  background: none;
  animation-fill-mode: forwards;
}
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::before {
  content: '★';
  top: 12%;
  left: 9%;
  font-size: clamp(14px, 3.8vw, 27px);
  color: #fff9c2;
  text-shadow:
    16vw 4vh 0 #ffe86b,
    45vw 2vh 0 #fff9c2,
    67vw 8vh 0 #ffe86b,
    4vw 17vh 0 #fff9c2,
    61vw 20vh 0 #fff2a2,
    20vw 30vh 0 #ffe86b,
    72vw 34vh 0 #fff9c2,
    1vw 45vh 0 #ffe86b,
    48vw 49vh 0 #fff9c2,
    69vw 56vh 0 #ffe86b;
  filter: drop-shadow(0 0 6px rgba(255,220,58,.92));
  animation: sb-win-stars-a 2.9s ease-out forwards;
}
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"])::after {
  content: '★';
  top: 20%;
  left: 76%;
  font-size: clamp(11px, 3.1vw, 22px);
  color: #fff;
  text-shadow:
    -31vw 0vh 0 #ffe86b,
    -58vw 9vh 0 #fff9c2,
    -8vw 16vh 0 #ffe86b,
    -49vw 25vh 0 #fff9c2,
    -71vw 33vh 0 #ffe86b,
    -17vw 39vh 0 #fff9c2,
    -43vw 53vh 0 #ffe86b,
    -4vw 60vh 0 #fff9c2;
  filter: drop-shadow(0 0 5px rgba(255,232,99,.9));
  animation: sb-win-stars-b 2.9s .18s ease-out forwards;
}
#sb-result-overlay.result-win:has(#sb-result-step1[style*="display: flex"]) .ot-result-modal {
  z-index: 4 !important;
}
@keyframes sb-win-stars-a {
  0%   { opacity: 0; transform: scale(.2) rotate(-12deg); }
  12%  { opacity: 1; transform: scale(1.12) rotate(5deg); }
  30%  { opacity: .45; transform: scale(.78) rotate(-3deg); }
  48%  { opacity: 1; transform: scale(1.05) rotate(3deg); }
  70%  { opacity: .50; transform: scale(.82); }
  100% { opacity: 0; transform: scale(.25); }
}
@keyframes sb-win-stars-b {
  0%   { opacity: 0; transform: scale(.25) rotate(10deg); }
  15%  { opacity: .9; transform: scale(1.08) rotate(-4deg); }
  35%  { opacity: .35; transform: scale(.72) rotate(2deg); }
  55%  { opacity: 1; transform: scale(1.02) rotate(-2deg); }
  75%  { opacity: .42; transform: scale(.76); }
  100% { opacity: 0; transform: scale(.2); }
}

/* Win-only full-screen star field: blink in place, then dissolve slowly. */
#sb-result-overlay.result-win::before,
#sb-result-overlay.result-win::after {
  content: none !important;
  display: none !important;
}
.sb-victory-star-field {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 1;
  transition: opacity 2s ease-out;
}
#sb-result-overlay > .sb-victory-star-field {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
}
.sb-victory-star-field.is-fading { opacity: 0; }
.sb-victory-star-field span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: var(--tone);
  font-family: sans-serif;
  font-size: var(--size);
  line-height: 1;
  text-shadow: 0 0 3px currentColor, 0 0 9px rgba(255,235,129,.9);
  animation: sb-victory-star-blink var(--twinkle) steps(2, end) var(--delay) infinite;
}
@keyframes sb-victory-star-blink {
  0%, 100% { opacity: .16; transform: scale(.48); }
  50%      { opacity: 1; transform: scale(1.28); }
}

/* ============================================================
   Skill card readability polish
   フォントは従来の DotGothic16 のまま、情報階層だけを明確化する。
   ============================================================ */
.ability-battle .sb-ability-slot.slot-disabled {
  /* 発動可能になるまでは背景・文字・条件・残り回数をまとめて暗くする。 */
  opacity: .55;
}
.ability-battle .sb-ability-slot.slot-disabled::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.18) 56%, rgba(0,0,0,.38) 100%);
}
.ability-battle .sb-ability-slot[class*="slot-cat-"] {
  /* 要素全体へのbrightnessで文字まで灰色になるのを防ぐ。 */
  filter: none !important;
}
.ability-battle .sb-ability-slot[class*="slot-cat-"]:not(.slot-used):not(.slot-disabled):hover {
  filter: none !important;
  transform: none !important;
}
.ability-battle .sb-ability-slot.slot-used {
  filter: none !important;
}

.ability-battle .sb-inline-ability-name.sb-dom-ability-card {
  inset: 4px;
  gap: 3px;
  padding: 4px 3px;
  justify-content: center;
}
.ability-battle .sb-inline-ability-name.sb-dom-ability-card.has-remaining {
  padding-bottom: 23px;
}

.ability-battle .sb-dom-ability-card .sb-slot-stars {
  color: #fff;
  background: rgba(5,8,12,.78);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
  -webkit-text-stroke: .45px #050505;
  text-shadow: 0 1px 2px #000;
}

.ability-battle .sb-dom-ability-card .sb-slot-name-text {
  font-family: 'DotGothic16', sans-serif;
  color: #fff;
  background: rgba(5,8,12,.84);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
  -webkit-text-stroke: .48px #050505;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(0,0,0,.95);
}

.ability-battle .sb-dom-ability-card .sb-slot-tags {
  margin-top: 2px;
  gap: 3px;
}
.ability-battle .sb-dom-ability-card .sb-slot-cond-tag {
  font-family: 'DotGothic16', sans-serif;
  color: #fff;
  background: rgba(5,8,12,.80);
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 1px 3px rgba(0,0,0,.48);
  -webkit-text-stroke: .25px rgba(0,0,0,.95);
  text-shadow: 0 1px 2px #000;
}

.ability-battle .sb-dom-ability-card .sb-slot-remaining {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 4px;
  background: rgba(5,8,12,.84);
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  -webkit-text-stroke: .25px rgba(0,0,0,.95);
  text-shadow: 0 1px 2px #000;
}
.ability-battle .sb-dom-ability-card .sb-slot-remaining.is-empty {
  color: #ffb0b0;
  border-color: rgba(255,150,150,.72);
}

.ability-battle .sb-ability-slot.slot-used .sb-dom-ability-card {
  opacity: .72;
}

/* Skill name cleanup: starless title with automatic light/dark contrast. */
.ability-battle .sb-dom-ability-card .sb-slot-stars {
  display: none !important;
}
.ability-battle .sb-dom-ability-card .sb-slot-name-text {
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  font-weight: 900;
  -webkit-text-stroke: .55px rgba(0,0,0,.96);
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,.95);
}

/* 白・黄色の背景では黒文字、それ以外の背景では白文字。 */
.ability-battle .sb-ability-slot.slot-cat-hint .sb-slot-name-text,
.ability-battle .sb-ability-slot.slot-cat-combo .sb-slot-name-text {
  color: #111;
  -webkit-text-stroke: .25px rgba(0,0,0,.75);
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.90);
}

/* 手数と残り回数は黒い枠＋白い太文字を維持する。 */
.ability-battle .sb-dom-ability-card .sb-slot-cond-tag,
.ability-battle .sb-dom-ability-card .sb-slot-remaining {
  color: #fff;
  background: rgba(5,8,12,.88);
  border-color: rgba(255,255,255,.75);
  font-family: 'DotGothic16', sans-serif;
  font-weight: 900;
  -webkit-text-stroke: .25px rgba(0,0,0,.95);
  text-shadow: 0 1px 2px #000;
}

/* ============================================================
   Skill card final visual
   全カテゴリを「白文字＋細い黒縁」に統一し、条件と回数を半透明黒タグにする。
   ============================================================ */
.ability-battle .sb-inline-ability-name.sb-dom-ability-card.has-remaining {
  padding-bottom: 24px;
}

.ability-battle .sb-dom-ability-card .sb-slot-name-text,
.ability-battle .sb-ability-slot.slot-cat-hint .sb-slot-name-text,
.ability-battle .sb-ability-slot.slot-cat-combo .sb-slot-name-text {
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 2px;
  font-family: 'DotGothic16', sans-serif;
  /* フォールバック後、対応ブラウザではカード幅と文字数から自動縮小する。 */
  font-size: clamp(8px, 2.6vw, 15px);
  font-size: clamp(7.5px, var(--sb-name-fit, 16cqw), 15px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-text-stroke: .35px #000;
  paint-order: stroke fill;
  text-shadow: 0 1px 1px rgba(0,0,0,.98), 0 0 2px rgba(0,0,0,.82);
}

.ability-battle .sb-dom-ability-card .sb-slot-tags {
  margin-top: 2px;
  gap: 3px;
}

.ability-battle .sb-dom-ability-card .sb-slot-cond-tag {
  color: #fff;
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
  padding: 1px 5px;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 900;
  line-height: 1.25;
  -webkit-text-stroke: .15px rgba(0,0,0,.95);
  paint-order: stroke fill;
  text-shadow: 0 1px 1px #000;
}

.ability-battle .sb-dom-ability-card .sb-slot-remaining {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  min-height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2px 4px;
  color: #fff;
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-text-stroke: .15px rgba(0,0,0,.95);
  paint-order: stroke fill;
  text-shadow: 0 1px 1px #000;
}

/* 2026-06-30: normalize CPU cut-ins and keep skill counters visible. */
.sb-cutin.cutin-cpu .sb-cutin-char {
  width: auto !important;
  max-width: 62% !important;
  object-fit: contain;
}
@media (max-width: 430px) {
  .sb-cutin.cutin-cpu .sb-cutin-char {
    width: auto !important;
    max-width: 54% !important;
  }
}
@media (min-width: 431px) {
  .sb-cutin.cutin-cpu .sb-cutin-char {
    width: auto !important;
    max-width: 62% !important;
  }
}

.ability-battle .sb-inline-ability-name.sb-dom-ability-card {
  box-sizing: border-box;
  min-width: 0;
}
.ability-battle .sb-inline-ability-name.sb-dom-ability-card.has-remaining {
  justify-content: flex-start;
  gap: 1px;
  padding: 4px 2px 23px !important;
}
.ability-battle .sb-dom-ability-card .sb-slot-name-text,
.ability-battle .sb-ability-slot.slot-cat-hint .sb-slot-name-text,
.ability-battle .sb-ability-slot.slot-cat-combo .sb-slot-name-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.ability-battle .sb-dom-ability-card .sb-slot-tags {
  max-width: 100%;
  max-height: 25px;
  overflow: hidden;
  flex: 0 1 auto;
}
.ability-battle .sb-dom-ability-card .sb-slot-cond-tag {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ability-battle .sb-dom-ability-card .sb-slot-remaining {
  z-index: 3;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .ability-battle .sb-inline-ability-name.sb-dom-ability-card.has-remaining {
    padding-bottom: 21px !important;
  }
  .ability-battle .sb-dom-ability-card .sb-slot-remaining {
    min-height: 17px;
    padding: 1px 3px;
  }
}

.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-name-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 6px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-icon {
  min-width: 0;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-name,
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-incoming-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-cond {
  min-width: 0;
  max-width: 92px;
  max-width: min(28vw, 92px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-name-row .sb-swap-slot-cond:last-child {
  max-width: none;
}
@media (max-width: 480px) {
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-name-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 4px;
  }
  .sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-cond {
    padding-left: 5px;
    padding-right: 5px;
    padding-inline: 5px;
    max-width: 78px;
    max-width: min(24vw, 78px);
  }
}

/* CPU intro portraits also use a height-based box so character image ratios stay closer to Fuku. */
.bi-cpu {
  width: auto !important;
  height: 52% !important;
  max-width: 52% !important;
  object-fit: contain;
  object-position: top right;
}
.bi-taunt-img {
  width: auto !important;
  height: 92% !important;
  max-width: 92% !important;
  object-fit: contain;
  object-position: bottom center;
}
@media (max-width: 480px) {
  .bi-taunt-img {
    width: auto !important;
    height: 88% !important;
    max-width: 88% !important;
  }
}
/* Player skill cards: lower the label block while preserving the remaining-use badge. */
.ability-battle .sb-bottom-ability-area .sb-inline-ability-name.sb-dom-ability-card.has-remaining {
  justify-content: flex-start;
  padding-top: 12px !important;
  padding-bottom: 23px !important;
}
.ability-battle .sb-bottom-ability-area .sb-dom-ability-card .sb-slot-name-text,
.ability-battle .sb-bottom-ability-area .sb-dom-ability-card .sb-slot-tags {
  transform: translateY(3px);
}
@media (max-width: 480px) {
  .ability-battle .sb-bottom-ability-area .sb-inline-ability-name.sb-dom-ability-card.has-remaining {
    padding-top: 8px !important;
    padding-bottom: 20px !important;
  }
  .ability-battle .sb-bottom-ability-area .sb-dom-ability-card .sb-slot-name-text,
  .ability-battle .sb-bottom-ability-area .sb-dom-ability-card .sb-slot-tags {
    transform: translateY(2px);
  }
}
@media (max-width: 360px) {
  .ability-battle .sb-bottom-ability-area .sb-inline-ability-name.sb-dom-ability-card.has-remaining {
    padding-top: 6px !important;
    padding-bottom: 19px !important;
  }
  .ability-battle .sb-bottom-ability-area .sb-dom-ability-card .sb-slot-name-text,
  .ability-battle .sb-bottom-ability-area .sb-dom-ability-card .sb-slot-tags {
    transform: translateY(1px);
  }
}