@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&family=DotGothic16&display=swap');

#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;
}

/* 背景画像を ::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: calc(160px + 0.5cm) 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 .sparkles {
    height: 20px;
    margin: 6px 0;
  }

  /* コンテンツ幅制限 */
  #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;
}

.star-field {
  display: none;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: #ccc;
  animation: twinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
}
@keyframes twinkle {
  0%,100% { opacity: var(--min-op, 0.1); transform: scale(1);   }
  50%      { opacity: var(--max-op, 0.4);  transform: scale(1.4); }
}

.floating-discs {
  display: none;
}
.fdisk {
  position: absolute;
  border-radius: 50%;
  animation: floatUp var(--fd, 12s) ease-in-out infinite var(--fd-delay, 0s);
  opacity: 0;
}
.fdisk.black { background: radial-gradient(circle at 36% 32%, #555, #111); box-shadow: 0 0 18px rgba(0,0,0,0.15); }
.fdisk.white { background: radial-gradient(circle at 36% 32%, #fff, #e0e0e0); box-shadow: 0 0 18px rgba(0,0,0,0.1); }
@keyframes floatUp {
  0%   { transform: translateY(110%) rotate(0deg);   opacity: 0;   }
  10%  { opacity: 0.3; }
  90%  { opacity: 0.15; }
  100% { transform: translateY(-20%) rotate(360deg); opacity: 0; }
}

.magic-circle-bg { display: none; }
.magic-circle-bg::before { display: none; }
.magic-circle-bg::after  { display: 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;
}

.title-sub    { display: none; }
.title-footer { display: none; }

.sparkles {
  display: none;
}
.sparkle-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.2), transparent);
}
.sparkle-gem {
  font-size: 18px;
  color: #999;
  animation: gemSpin 4s ease-in-out infinite;
}
@keyframes gemSpin {
  0%,100% { transform: scale(1) rotate(0deg);     filter: brightness(1);   }
  50%      { transform: scale(1.3) rotate(180deg); filter: brightness(1.2); }
}

.mode-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mode-label {
  display: none;
}
.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-icon {
  display: none;
}

.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);
}
.mode-arrow {
  font-size: 18px;
  color: rgba(0,0,0,0.3);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.2s;
  flex-shrink: 0;
}
.mode-card:not(.disabled):hover .mode-arrow {
  transform: translateX(4px);
  color: rgba(0,0,0,0.7);
}

.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;
}

.game-header {
  display: none;
}

.back-btn {
  display: none;
}

.back-btn:hover {
  background: #f0f0f0;
  border-color: #bbb;
  color: #111;
}

.game-mode-tag { display: none; }

.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: #145c30;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(20,100,50,0.5),
    0 6px 0 rgba(10,60,30,0.4),
    0 10px 24px rgba(10,60,30,0.25);
  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;
}
.reversi-game .ot-cell:hover { background: #3a8f5c; }

.reversi-game .ot-cell.hint { background: #3a8f5c; }
.reversi-game .ot-cell.hint::after { content: none; }

.reversi-game .ot-disc {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  position: absolute;
  animation: ot-drop .18s cubic-bezier(.3,1.5,.6,1);
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), inset 0 -2px 5px rgba(0,0,0,0.15), inset 0 3px 8px rgba(255,255,255,0.2);
}
.reversi-game .ot-disc.black { background: radial-gradient(circle at 36% 32%, #555, #111); }
.reversi-game .ot-disc.white {
  background: radial-gradient(circle at 36% 32%, #fff, #e8e8e8);
  box-shadow: 0 3px 0 rgba(0,0,0,0.15), inset 0 -2px 5px rgba(0,0,0,0.08), inset 0 3px 8px rgba(255,255,255,0.7);
}
.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(380px, 94vw);
  min-height: min(480px, 80vw);
  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) 30%,
    rgba(0,0,0,0.72) 65%,
    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: 'Fredoka One', 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: 'Fredoka One', 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: 'Fredoka One', 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 .sb-wins-badge {
  display: none !important;
}
.ability-battle .sb-top-bar-spacer {
  width: 80px;
  flex-shrink: 0;
}
.ability-battle .sb-icon-btn {
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid #ddd;
  background: #f5f5f5;
  color: #555;
  cursor: pointer;
  transition: all .2s;
  font-family: 'DotGothic16', sans-serif;
}
.ability-battle .sb-icon-btn:hover { background: #eee; border-color: #bbb; color: #111; }

.ability-battle .sb-ability-slots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
.ability-battle .sb-badge {
  font-size: 16px;
  background: rgba(0,0,0,0.07);
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 2px 5px;
  line-height: 1;
}
.ability-battle .sb-badge.cpu {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}

.ability-battle .sb-ability-panel {
  padding: 12px 14px;
}
.ability-battle .sb-panel-title {
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(0,0,0,0.45);
  margin-bottom: 8px;
  text-align: center;
  font-weight: 700;
}
.ability-battle .sb-ability-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.ability-battle .sb-ability-btn {
  font-family: 'DotGothic16', sans-serif;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 50px;
  border: 2px solid #ddd;
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
  transition: all .18s;
  letter-spacing: .05em;
}
.ability-battle .sb-ability-btn:hover {
  background: #eee;
  border-color: #aaa;
  transform: translateY(-1px);
}
.ability-battle .sb-ability-btn.active {
  background: #111;
  border-color: #333;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  animation: ot-pulse 1.4s ease-in-out infinite;
}

.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);
}

.sb-pick-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,15,0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: sb-fade-in .25s ease;
}
.sb-pick-overlay::before {
  content: none;
}
.sb-pick-modal {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 28px;
  padding: 28px 28px 24px;
  width: fit-content;
  min-width: 360px;
  max-width: 90vw;
  box-shadow: 0 12px 48px rgba(0,0,0,0.12);
  animation: ot-drop .35s cubic-bezier(.22,1.4,.4,1);
  position: relative;
}
.sb-pick-title {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(22px, 6vw, 30px);
  color: #fff;
  text-align: center;
  margin-bottom: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  letter-spacing: .06em;
}
.sb-pick-subtitle {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(11px, 3vw, 13px);
  color: rgba(255,255,255,0.7);
  text-align: center;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.sb-pick-grid {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: center;
}
.sb-pick-card {
  flex: 0 0 160px;
  background: #f5f5f5;
  border: 1.5px solid #e0e0e0;
  border-radius: 20px;
  padding: 18px 14px 14px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.22,1.4,.4,1);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.sb-pick-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
  border-radius: inherit;
}
.sb-pick-card:hover {
  background: #ececec;
  border-color: #aaa;
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.sb-pick-card:active {
  transform: translateY(-2px) scale(1.01);
}
.sb-pick-icon {
  font-size: 32px;
  line-height: 1;
  filter: none;
}
.sb-pick-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(13px, 3.8vw, 16px);
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.sb-pick-desc {
  font-size: clamp(10px, 2.5vw, 12px);
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  font-family: 'DotGothic16', sans-serif;
  white-space: normal;
}

/* スマホ：縦並び3枚 */
@media (max-width: 480px) {
  .sb-pick-modal {
    padding: 24px 16px 20px;
    min-width: 0;
    width: calc(100vw - 40px);
  }
  .sb-pick-grid {
    flex-direction: column;
    gap: 10px;
  }
  .sb-pick-card {
    flex: none;
    width: 100%;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 14px 16px;
    gap: 4px;
  }
  .sb-pick-icon {
    display: none;
  }
  .sb-pick-name {
    font-size: 15px;
  }
  .sb-pick-desc {
    font-size: 11px;
    white-space: normal;
  }
}

#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;
}

/* スコアバー（中央）：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(9px, 2.4vw, 11px);
  color: rgba(255,255,255,0.6);
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.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);
}

/* 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: rgba(255,255,255,0.85);
  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;
  border-radius: 20px;
  overflow: hidden;
  background: #e8e8e8;
  border: 1.5px solid #ddd;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 8px;
}
.ability-battle .ot-board-inner {
  border-radius: 12px;
  overflow: hidden;
  background: #145c30;
  padding: 0;
}

.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-top-bar { display: none; }

/* 空スロット（能力未設定）のプレースホルダー枠 */
.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;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: filter .2s, opacity .2s, transform .15s, 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:has(canvas.ab-canvas) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* 内側グロー装飾 */
.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 {
  filter: brightness(1.1);
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.ability-battle .sb-ability-slot:not(.slot-used):not(.slot-disabled):active {
  transform: scale(0.96);
}

.ability-battle .sb-ability-slot.slot-used {
  background: 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: saturate(0.1) brightness(0.85);
}

.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(9px, 2.5vw, 12px);
  line-height: 1;
  display: block;
  color: rgba(255,255,255,0.7);
  text-shadow: none;
  letter-spacing: 1px;
  flex-shrink: 0;
  margin-bottom: 1px;
}

/* 能力名 */
.ability-battle .sb-slot-name-text {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(10px, 2.8vw, 13px);
  color: #fff;
  letter-spacing: .02em;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  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: 2px;
  max-width: 100%;
  margin-top: 2px;
  flex-shrink: 0;
}

/* 条件タグ */
.ability-battle .sb-slot-cond-tag {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(7px, 1.8vw, 9px);
  font-weight: 800;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.95);
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.4;
  white-space: nowrap;
}

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

/* 配置 → 画像 reversi7.webp */
.ability-battle .sb-ability-slot.slot-cat-placement.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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/04/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: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.15s ease, transform 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: translateX(-50%);
  width: 10px;
  height: 6px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sb-ability-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 6px));
}
/* CPUスロット用：下向きツールチップ */
.sb-ability-tooltip.tip-below {
  transform: translate(-50%, 6px);
}
.sb-ability-tooltip.tip-below.visible {
  transform: translate(-50%, 6px);
}
.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;
}

.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;
  }
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: unset;
    min-height: unset;
  }
  .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: 盤面を拡大 */
  .ability-battle .ot-board-wrap {
    max-width: 520px;
    padding: 8px 38px;
  }

  .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-color: #0a0a0f;
  background-image:
    linear-gradient(rgba(10,3,22,0.45), rgba(10,3,22,0.45)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp');
  background-size: auto, cover;
  background-position: center, center center;
  background-repeat: repeat, no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: sb-fade-in .3s ease;
}
@media (max-width: 480px) {
  .sb-coin-overlay {
    background-image:
      linear-gradient(rgba(10,3,22,0.45), rgba(10,3,22,0.45)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp');
  }
}
@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;
  background: #0e0e12;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 28px;
  padding: 36px 48px 40px;
  box-shadow: 0 0 80px rgba(0,0,0,0.8);
  max-width: 320px;
  width: calc(100% - 48px);
  gap: 0;
  position: relative;
  overflow: hidden;
}
.sb-coin-overlay-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* タイトル */
.sb-coin-title {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(22px, 6vw, 30px);
  color: rgba(255,255,255,0.55);
  letter-spacing: .25em;
  margin-bottom: 28px;
  line-height: 1;
  text-transform: uppercase;
}

/* 石 */
.sb-coin {
  width: clamp(100px, 28vw, 130px);
  height: clamp(100px, 28vw, 130px);
  position: relative;
  perspective: 800px;
  margin-bottom: 32px;
}
.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-result {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(20px, 6vw, 28px);
  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.2;
  text-align: center;
  color: #fff;
}
.sb-coin-result.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sb-coin-result.black { color: #eee; }
.sb-coin-result.white { color: #fff; }

/* sb-coin-sub は使わないが念のため非表示 */
.sb-coin-sub { display: none; }

/* 能力入れ替え画面 */
.sb-swap-overlay {
  position: absolute;
  inset: 0;
  background-color: #0a0a0f;
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 12px;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .sb-swap-overlay {
    background-image: url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp');
  }
}

.sb-swap-modal {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.75) 100%),
    url('https://wakabaland.com/wp-content/uploads/2026/05/reversi15.webp') center center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.18);
  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);
}

.sb-swap-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: .06em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.7);
}

.sb-swap-subtitle {
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 16px;
  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: rgba(255,255,255,0.85);
  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);
}

/* オーバーレイ内 ot-btn グローバルスタイル */
.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: rgba(10,10,15,0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.sb-continue-modal {
  background: url('https://wakabaland.com/wp-content/uploads/2026/04/わかば3.webp') center center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 30px 28px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  min-width: 320px;
  animation: continueModalIn .3s ease;
}

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

.sb-continue-icon {
  font-size: 40px;
  margin-bottom: 6px;
}

.sb-continue-wins {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

.sb-continue-title {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 22px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.sb-continue-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.sb-continue-actions .ot-btn {
  width: 220px;
}

/* スキルカットイン演出 */
/* ═══════════════════════════════════════════
   カットイン 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: 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: 100%;
  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: 130px; border-radius: 12px; }
  /* カードを縮めてもキャラ画像は元のサイズをキープ */
  .sb-cutin-char    { width: 42%; height: 168px; }
  .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: 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%)} }

/* スマホ向けレスポンシブ調整 */
@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: clamp(54px, 14vw, 70px);
    max-width: clamp(54px, 14vw, 70px);
  }
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: unset;
    min-height: unset;
  }
  .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;
  }

  /* メッセージバー: 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: 50px;
    max-width: 50px;
  }
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: unset;
    min-height: unset;
  }
  .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;
  }
}
@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); }
}

/* 配置系：disc-set（青） */
.ot-disc.disc-set {
  animation: discSetDrop .45s cubic-bezier(.22,1.5,.4,1) both,
             discSetGlow  .7s ease-out .05s both;
}

@keyframes discSetDrop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes discSetGlow {
  0%   { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0 24px 10px rgba(60,150,230,1.0),
                     inset 0 3px 8px rgba(255,255,255,0.35); }
  100% { box-shadow: 0 3px 0 rgba(0,0,0,0.3),
                     0 0   0px 0px rgba(60,150,230,0),
                     inset 0 3px 8px rgba(255,255,255,0.15); }
}

/* コンボ系：disc-pass（黄色） */
.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); }
}

/* 消去系：cell-erased（赤い消滅エフェクト） */
.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; }
}

/* 防御系：disc-guarded（プレイヤー・緑グロー持続） */
.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 .45s cubic-bezier(.22,1.5,.4,1) both,
             discGuardedPulse 1.4s ease-in-out .45s 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;  }
}

/* 防御系：disc-cpu-guarded（CPU・緑グロー持続） */
.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 .45s cubic-bezier(.22,1.5,.4,1) both,
             discCpuGuardedPulse 1.4s ease-in-out .45s 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: 20px;
  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: brightness(1.1);
  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: rgba(255,255,255,0.85);
  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 #aaa transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-placement::after { border-color: transparent #0000ff transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-flip::after      { border-color: transparent #9400d3 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-erase::after     { border-color: transparent #ff0000 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-combo::after     { border-color: transparent #ffff00 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-block::after     { border-color: transparent #cd853f transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-hint::after      { border-color: transparent #c0c0c0 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-guard::after     { border-color: transparent #008000 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-always::after    { border-color: transparent #444444 transparent transparent; }
.sb-choice-card.selected.sb-choice-cat-null::after      { border-color: transparent #444444 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(160, 100, 40, 0.85);
  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.5); background: rgba(100,55,10,0.20); }
  50%  { outline-color: rgba(210,165,100,1.0); background: rgba(140,85,20,0.45); }
  100% { outline-color: rgba(160,100,40,0.5); background: rgba(100,55,10,0.20); }
}

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

/* ホバー時 */
.ability-battle .ot-cell.hint-block:hover {
  background: rgba(140, 80, 15, 0.55);
  outline-color: rgba(210, 165, 100, 1.0);
}

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

/* セル枠：赤系の光る枠 */
.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-pick-overlay,
.sb-pick-overlay *,
.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-arrow { display: none; }

.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: rgba(255,255,255,0.85);
  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: #111;
  background-image:
    linear-gradient(rgba(10,3,22,0.45), rgba(10,3,22,0.45)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp');
  background-size: auto, cover;
  background-position: center, center center;
  background-repeat: repeat, no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 480px) {
  .bi-overlay {
    background-image:
      linear-gradient(rgba(10,3,22,0.45), rgba(10,3,22,0.45)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp');
  }
}
/* コンテンツだけをフェードイン（黒背景は即表示・絵が徐々に現れる） */
.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: 0;
  left: 50%;
  width: 88%;
  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 {
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(11px, 2.8vw, 14px);
  color: rgba(240, 236, 224, 0.65);
  letter-spacing: 0.12em;
  margin-bottom: 5px;
}

/* ダイアログ枠（ボーダー色はインラインでテーマ色を指定） */
.bi-taunt-msgbox {
  border-width: 2px;
}

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

/* ── 背景イラスト舞台 ── */
.bi-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

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

/* ── プレイヤーキャラ（左下） ── */
.bi-player {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55%;
  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: 55%;
  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-msgwrap {
  width: 100%;
  max-width: 480px;
  flex-shrink: 0;
  padding: 0;
  margin-top: -2px;
}

.bi-msgbox {
  background: #252524;
  border: 2px solid #ffffff;
  border-radius: 6px;
  padding: 18px 28px 14px;
  min-height: 80px;
  position: relative;
  box-shadow: none;
}

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

/* ── タップ促進 ▼ ── */
.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(15px, 4.2vw, 20px); }
}

/* PC向け拡大（769px以上） */
@media (min-width: 769px) {
  .bi-stage {
    max-width: 640px;
  }
  .bi-msgwrap {
    max-width: 640px;
  }
  .bi-msgbox {
    padding: 22px 36px 18px;
    min-height: 96px;
  }
  .bi-msg {
    font-size: 24px;
  }
}

/* ════════════════════════════════════════════
   エンカウントエフェクト（モザイク＋スクリーンワイプ）
   ─ ゲームエリア内（全画面なし）           ─
   ─ 即座に黒で盤面を隠す                  ─
   ─ ① モザイクピクセルが埋まる（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(420px, 94vw) !important;
  min-height: min(480px, 82vw) !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: 20px !important;          /* スコアとボタンの間隔を広げる */
  padding: 24px 24px 28px !important;
  align-items: center !important;
}

/* アクションエリア共通レイアウト（display は JS に委ねる）*/
.reversi-game .ot-overlay #sb-win-choice,
.reversi-game .ot-overlay #sb-lose-actions {
  min-height: 140px !important;   /* 固定高でボディ高を両画面統一 */
  /* ↑ display: flex !important は絶対に書かない！ */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  width: 100%;
  position: relative !important;
  z-index: 2 !important;
  text-align: center;
  box-sizing: border-box;
}

/* 入れ替えるラベル（相手のスキルと入れ替える？）: 中央揃え */
.reversi-game .ot-overlay #sb-win-choice > div:first-child {
  text-align: center !important;
  width: 100%;
}

/* 入れ替える・入れ替えないボタン: 縦並び・同幅・中央 */
.reversi-game .ot-overlay #sb-win-choice > div:nth-child(2) {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  gap: 8px !important;
}

/* ボタン幅を揃える */
.reversi-game #sb-steal-btn,
.reversi-game #sb-keep-btn,
.reversi-game #sb-retry-btn {
  width: 75% !important;
}

/* ── 継続モーダル: 結果モーダルと同じ見た目・サイズ ── */
.sb-continue-modal {
  background: url('https://wakabaland.com/wp-content/uploads/2026/04/わかば3.webp') center top / cover no-repeat !important;
  border-radius: 24px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  text-align: center;
  box-shadow: 0 16px 56px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.12) !important;
  width: min(420px, 94vw) !important;
  min-height: min(480px, 82vw) !important;
  min-width: unset !important;
  position: relative !important;
  overflow: hidden !important;
}
@media (max-width: 480px) {
  .sb-continue-modal {
    min-height: 88vw !important;
  }
}
.sb-continue-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) 30%,
    rgba(0,0,0,0.72) 65%,
    rgba(0,0,0,0.88) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.sb-continue-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 24px 28px;
  position: relative;
  z-index: 1;
}
.sb-continue-wins {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(46px, 11vw, 56px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .08em;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin: 0;
}
.sb-continue-title {
  font-size: clamp(13px, 3.2vw, 15px);
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  letter-spacing: .04em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin: 0;
}
.sb-continue-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.sb-continue-actions .ot-btn {
  width: 75%;
}
/* ═══════════════════════════════════════════════════════════
   スマホ：全オーバーレイ画面の表示制御
   ─ 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: 12px;
  }

  /* ── スキル選択 & スキル入れ替え画面 ──
     position:absolute; inset:0 (#reversi 基準)                      */
  .sb-swap-overlay {
    align-items: flex-start;
    padding-top: 12px;
  }

  /* ── 連勝（コンティニュー）画面 ──
     position:fixed でビューポート全体を覆い、ナビ直下にコンテンツ配置
     ナビは z-index:9999 (style.css) で自動的に手前に表示される      */
  .sb-continue-overlay {
    position: fixed !important;
    inset: 0 !important;
    align-items: center;
    justify-content: flex-start;
    padding-top: 148px;
    padding-bottom: 0;
    overflow-y: auto;
  }

  /* 連勝モーダル: 画面の高さを最大限使用しボタンを下に配置 */
  .sb-continue-modal {
    min-height: calc(100vh - 148px) !important;
    min-height: calc(100dvh - 148px) !important;
    justify-content: flex-end !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !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;
  }

  /* 連勝モーダルも同様にキャラ画像をピッタリ表示 */
  .sb-continue-modal {
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  /* ── 手順決め（コイントス）画面 ──
     他のオーバーレイと同じく上揃えに                               */
  .sb-coin-overlay {
    align-items: flex-start;
    justify-content: center;
    padding-top: 12px;
  }

  /* ── スマホの盤面を縦横1マス分縮小 ──
     board-wrap の横パディングを14px→36pxに増やし
     盤面幅を約44px(≈1マス分)狭くする                               */
  .reversi-game .ot-board-wrap {
    padding: 14px 36px;
  }
}