/*
 * reversi002.css
 * Ownership: Wakabattle components, dialogs, cut-ins, results, and responsive presentation.
 * Shared shell, title screen, simple Reversi, and board primitives belong in reversi001.css.
 */

/* WAKABATTLE_COMPONENTS_MOVED_FROM_001 */
/* Wakabattle result screen. */
#sb-result-overlay {
  position: absolute;
  inset: 0;
  z-index: 9500;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    linear-gradient(rgba(0,0,0,.56), rgba(0,0,0,.56)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

#sb-result-overlay.show {
  opacity: 1;
  pointer-events: all;
}

#sb-result-overlay:not(.show) {
  display: none;
}

#sb-result-overlay .ot-result-modal {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: min(380px, 88vw);
  aspect-ratio: 400 / 650;
  height: auto;
  min-height: 0;
  padding: 40px 36px 78px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi15.webp') center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.45));
  overflow: visible;
}

#sb-result-overlay .ot-result-modal::after,
#sb-result-overlay .ot-result-char-pane::after {
  display: none;
}

#sb-result-overlay .ot-result-char-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

#sb-result-overlay .ot-result-char-pane img {
  display: block;
  width: min(248px, 62vw);
  height: min(248px, 62vw);
  border: 3px solid #3a2010;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

#sb-result-overlay .ot-result-modal-body,
#sb-result-overlay .ot-result-step1,
#sb-result-overlay .ot-result-step2,
#sb-result-overlay #sb-win-choice,
#sb-result-overlay #sb-lose-actions {
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

#sb-result-overlay .ot-result-modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

#sb-result-overlay .ot-result-step1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
}

#sb-result-overlay .ot-result-step1 .ot-result-title {
  margin-top: auto;
}

#sb-result-overlay .ot-result-step1 #sb-next-btn {
  margin-top: auto;
}

#sb-result-overlay .ot-result-step2,
#sb-result-overlay #sb-win-choice,
#sb-result-overlay #sb-lose-actions {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

#sb-result-overlay .ot-result-title {
  margin: 0;
  color: #3a2010;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(32px, 10vw, 50px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
}

#sb-result-overlay .ot-result-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 7px 16px;
  gap: 10px;
  border: 1.5px solid rgba(58,32,16,.35);
  border-radius: 16px;
  background: rgba(58,32,16,.08);
}

#sb-result-overlay .ot-result-num {
  color: #3a2010;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1;
  text-shadow: none;
}

#sb-result-overlay .ot-result-vs {
  color: rgba(58,32,16,.5);
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(18px, 4.5vw, 22px);
}

#sb-result-overlay #sb-win-choice > div:first-child {
  width: 100%;
  color: #3a2010;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(16px, 5vw, 22px);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-shadow: none;
}

@media (max-width: 480px) {
  #sb-result-overlay {
    align-items: flex-start;
    padding: 76px 0 16px;
    background:
      linear-gradient(rgba(0,0,0,.56), rgba(0,0,0,.56)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center top / cover no-repeat;
  }
  #sb-result-overlay .ot-result-modal {
    width: min(92vw, 340px);
    padding: 46px 30px 102px;
    gap: 10px;
  }
  #sb-result-overlay .ot-result-char-pane img {
    width: min(54vw, 200px);
    height: min(54vw, 200px);
  }
  #sb-result-overlay .ot-result-step1 {
    gap: 12px;
  }
}

@media (max-width: 300px) {
  #sb-result-overlay .ot-result-step1 #sb-next-btn {
    align-self: flex-start;
    width: calc(100% - 46px);
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  #reversi .sb-continue-wins,
  .reversi-game .sb-continue-wins {
    font-size: 24px !important;
    letter-spacing: 0;
    white-space: nowrap;
  }

  #reversi .sb-continue-title,
  .reversi-game .sb-continue-title {
    font-size: 15px !important;
    white-space: nowrap;
  }
}

.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 .ot-btn,
.reversi-game .ot-btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-width: min(230px, 75vw);
  min-height: 44px;
  padding: 9px 24px 11px;
  border: 1.5px solid rgba(255,255,255,.18);
  border-bottom-width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6b452b 0%, #56331d 56%, #3a2010 100%);
  color: #fff8f0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  box-shadow:
    0 4px 0 rgba(42,22,10,.82),
    0 2px 0 rgba(255,255,255,.14) inset,
    0 8px 18px rgba(0,0,0,.24);
  transition: all .18s;
  text-shadow: 0 2px 0 rgba(0,0,0,.34);
  outline: none;
  animation: none;
}
#reversi .ot-btn:hover,
.reversi-game .ot-btn:hover  { background: linear-gradient(180deg, #765034 0%, #603a22 56%, #452714 100%); transform: translateY(-1px); }
#reversi .ot-btn:active,
.reversi-game .ot-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(42,22,10,.82); }

#reversi .ot-btn.secondary,
.reversi-game .ot-btn.secondary {
  border-color: rgba(92,58,28,.38);
  background: linear-gradient(180deg, #f3dfbf 0%, #e5cba4 100%);
  color: #4a2b18;
  box-shadow:
    0 2px 0 rgba(92,58,28,.34),
    0 1px 0 rgba(255,255,255,.52) inset,
    0 7px 16px rgba(0,0,0,.10);
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
#reversi .ot-btn.secondary:hover,
.reversi-game .ot-btn.secondary:hover { background: linear-gradient(180deg, #f7e7cd 0%, #ecd4ad 100%); }

.sb-surrender-overlay {
  position: absolute;
  inset: 0;
  z-index: 21000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(0,0,0,.34);
  pointer-events: auto;
  animation: sb-surrender-overlay-in .16s ease both;
}

.sb-surrender-overlay.hiding {
  animation: sb-surrender-overlay-out .2s ease forwards;
}

.sb-surrender-modal {
  box-sizing: border-box;
  width: min(292px, 88vw);
  padding: 18px 18px 16px;
  border: 2px solid rgba(88,54,30,.42);
  border-radius: 18px;
  background: rgba(255,239,205,.96);
  color: #3a2010;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.65);
  font-family: 'DotGothic16', sans-serif;
  animation: sb-surrender-modal-in .18s cubic-bezier(.2,.9,.25,1.15) both;
}

.sb-surrender-title {
  margin: 0 0 14px;
  color: #3a2010;
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .02em;
  text-shadow: none;
}

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

.sb-surrender-confirm-btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 1 112px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 18px 10px;
  border: 1.5px solid rgba(255,255,255,.18);
  border-bottom-width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6b452b 0%, #56331d 56%, #3a2010 100%);
  color: #fff8f0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.34);
  box-shadow:
    0 4px 0 rgba(42,22,10,.82),
    0 2px 0 rgba(255,255,255,.14) inset,
    0 8px 18px rgba(0,0,0,.20);
  transition: transform .16s, background .16s, box-shadow .16s;
}

.sb-surrender-confirm-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(42,22,10,.82);
}

.sb-surrender-confirm-btn:disabled {
  opacity: .55;
  cursor: default;
}

.sb-surrender-no {
  border-color: rgba(92,58,28,.38);
  background: linear-gradient(180deg, #f3dfbf 0%, #e5cba4 100%);
  color: #4a2b18;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  box-shadow:
    0 2px 0 rgba(92,58,28,.34),
    0 1px 0 rgba(255,255,255,.52) inset,
    0 7px 16px rgba(0,0,0,.10);
}

@keyframes sb-surrender-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sb-surrender-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sb-surrender-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sb-result-choice-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#reversi .sb-result-choice-actions .ot-btn,
.reversi-game .sb-result-choice-actions .ot-btn,
.sb-result-choice-actions .ot-btn {
  min-width: 0;
  width: min(184px, calc((100vw - 88px) / 2));
}

@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;
}
.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; }
.mode-card.magic .mode-name,
.mode-card.magic .mode-desc,
.mode-card.magic .mode-badge {
  font-family: 'DotGothic16', sans-serif;
}
.mode-badge.spec {
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .1em;
}

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

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

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

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

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

.ability-battle .ot-cell.sealed.being-selected {
  outline-color: rgba(220, 170, 100, 1.0);
  background: rgba(140, 80, 10, 0.7);
}

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

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

.ability-battle .sb-top-row {
  --sb-top-gap: 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  gap: var(--sb-top-gap);
  padding: 6px 8px;
}

.ability-battle .sb-top-ability-col {
  grid-column: 2 / 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ability-battle .sb-top-ability-area {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sb-top-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  align-items: start;
}

.ability-battle .sb-cpu-activate-spacer {
  height: 0;
  flex-shrink: 0;
}

.ability-battle .sb-top-char-box {
  grid-column: 1;
  min-width: 0;
  max-width: none;
  width: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.ability-battle .sb-top-char-box .sb-char-frame {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

@media (max-width: 480px) {
  .ability-battle .sb-top-char-box {
    align-self: flex-start;
  }
  .ability-battle .sb-top-char-box .sb-char-frame {
    width: 100%;
    height: 100%;
    flex: unset;
    aspect-ratio: 1 / 1;
  }
  .ability-battle .sb-top-ability-col {
    grid-column: 2 / 5;
  }

  .ability-battle .sb-bottom-row {
    --sb-row-pad-x: 6px;
    --sb-row-gap: 4px;
    --sb-action-height: 24px;
    --sb-action-offset: 5px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto var(--sb-action-height);
    column-gap: var(--sb-row-gap);
    row-gap: var(--sb-action-offset);
    align-items: stretch;
    padding-bottom: 0;
  }
  .ability-battle .sb-bottom-char-box {
    order: 0;
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    position: static;
    min-width: unset;
    max-width: unset;
    width: auto;
    flex: none;
    aspect-ratio: auto;
    align-self: stretch;
    overflow: visible;
  }
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    width: 100%;
    height: auto;
    flex: unset;
    aspect-ratio: 1 / 1;
  }
  .ability-battle .sb-surrender-btn {
    position: static;
    width: 100%;
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
    margin: 0;
  }
  .ability-battle .sb-bottom-ability-col {
    order: 1;
    display: grid;
    grid-column: 2 / 5;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    flex: none;
  }
}

.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: 3px;
  padding: 4px 4px;
  gap: 1px;
  min-width: 0;
  box-shadow:
    1px 1px 0 rgba(255,255,255,0.16) inset,
    -2px -2px 0 rgba(0,0,0,0.4) inset,
    2px 2px 0 rgba(10,20,12,0.28);
}

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

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

.ability-battle .sb-bottom-row {
  --sb-row-gap: 4px;
  --sb-action-height: 24px;
  --sb-action-offset: 3px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto var(--sb-action-height);
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 0;
  column-gap: var(--sb-row-gap);
  row-gap: var(--sb-action-offset);
  padding: 0 8px;
}

.ability-battle .sb-bottom-char-box {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 3;
  grid-template-rows: auto var(--sb-action-height);
  row-gap: var(--sb-action-offset);
  align-self: stretch;
  min-width: 0;
  max-width: none;
  width: auto;
}
.ability-battle .sb-bottom-char-box .sb-char-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.ability-battle .sb-surrender-btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: var(--sb-action-height);
  min-height: var(--sb-action-height);
  margin: 0;
  padding: 0 6px;
  border: 2px solid #dce6dc;
  border-radius: 3px;
  background: #080b09;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-align: center;
  text-shadow: 2px 2px 0 #000;
  box-shadow:
    1px 1px 0 rgba(255,255,255,0.16) inset,
    -2px -2px 0 rgba(0,0,0,0.55) inset,
    2px 2px 0 rgba(0,0,0,0.3);
}
.ability-battle .sb-surrender-btn:active {
  transform: scale(.98);
}

.ability-battle .sb-bottom-ability-col {
  display: grid;
  grid-column: 2 / 5;
  grid-row: 1 / 3;
  grid-template-rows: auto var(--sb-action-height);
  row-gap: var(--sb-action-offset);
  min-width: 0;
  width: auto;
}

.ability-battle .sb-bottom-ability-area {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sb-row-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  align-items: stretch;
}

.ability-battle .sb-player-activate-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sb-row-gap);
  padding: 0;
}

.ability-battle .sb-activate-btn {
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(10px, 2.6vw, 12px);
  height: var(--sb-action-height);
  min-height: var(--sb-action-height);
  border-radius: 3px;
  border: 2px solid #dce6dc;
  background: #080b09;
  color: #fff;
  cursor: pointer;
  transition: color 80ms steps(2, end), background-color 80ms steps(2, end), transform .1s;
  letter-spacing: .06em;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 2px 0 #000;
  font-weight: 700;
  white-space: nowrap;
  padding: 0;
  width: 100%;
  z-index: 10;
  box-shadow:
    1px 1px 0 rgba(255,255,255,0.16) inset,
    -2px -2px 0 rgba(0,0,0,0.55) inset,
    2px 2px 0 rgba(0,0,0,0.3);
}
.ability-battle .sb-activate-btn:not(:disabled):hover {
  background: #1a2b20;
  color: #fff8b5;
}
.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);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 1px 1px 0 rgba(255,255,255,0.08) inset;
}
.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 #2c1b02, 0 0 0 4px #ffd84a, 3px 3px 0 rgba(0,0,0,0.28);
  border-color: #ffd84a;
}

.ability-battle .sb-score-box[data-disc-color="black"] {
  background: #111;
  border-color: rgba(255,255,255,0.18);
}
.ability-battle .sb-score-box[data-disc-color="black"] .sb-score-box-label {
  color: #fff;
}
.ability-battle .sb-score-box[data-disc-color="black"] .sb-score-box-num {
  color: #fff;
}
.ability-battle .sb-score-box[data-disc-color="black"].active-score {
  box-shadow: 0 0 0 2px #2c1b02, 0 0 0 4px #ffd84a, 3px 3px 0 rgba(0,0,0,0.28);
  border-color: #ffd84a;
}

.ability-battle .sb-score-box[data-disc-color="white"] {
  background: #fff;
  border-color: rgba(0,0,0,0.18);
  box-shadow: 1px 1px 0 rgba(255,255,255,0.8) inset, -2px -2px 0 rgba(0,0,0,0.12) inset, 2px 2px 0 rgba(0,0,0,0.16);
}
.ability-battle .sb-score-box[data-disc-color="white"] .sb-score-box-label {
  color: #000;
}
.ability-battle .sb-score-box[data-disc-color="white"] .sb-score-box-num {
  color: #111;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.12);
}
.ability-battle .sb-score-box[data-disc-color="white"].active-score {
  box-shadow: 0 0 0 2px #2c1b02, 0 0 0 4px #ffd84a, 3px 3px 0 rgba(0,0,0,0.22);
  border-color: #ffd84a;
}

.ability-battle .sb-score-box[data-disc-color="neutral"] {
  background: #111;
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 2px 2px 0 rgba(255,255,255,0.06);
}
.ability-battle .sb-score-box[data-disc-color="neutral"] .sb-score-box-label {
  color: #fff;
}
.ability-battle .sb-score-box[data-disc-color="neutral"] .sb-score-box-num {
  color: #fff;
  text-shadow: none;
}

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

.ability-battle .sb-message-bar {
  text-align: center;
  font-family: 'DotGothic16', sans-serif;
  width: calc(100% - 16px);
  max-width: 404px;
  margin: 0 auto;
  box-sizing: border-box;
}
.ability-battle .sb-message-bar.is-atari {
  color: #111111;
  background: linear-gradient(180deg, #ffffff 0%, #d8dbe0 48%, #9ca2aa 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 16px rgba(210,220,235,.82);
  text-shadow: 0 1px 0 rgba(255,255,255,.76);
  animation: sb-atari-message-pop 2s ease-out 1;
}

.ability-battle .sb-atari-sparkle-layer {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.34) 0 8%, transparent 42%),
    radial-gradient(circle at 22% 30%, rgba(255,244,165,.95) 0 2px, transparent 5px),
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.95) 0 2px, transparent 6px),
    radial-gradient(circle at 28% 76%, rgba(255,244,165,.90) 0 2px, transparent 6px),
    radial-gradient(circle at 72% 72%, rgba(255,255,255,.88) 0 2px, transparent 5px);
  mix-blend-mode: screen;
  animation: sb-atari-sparkle-burst 2s ease-out both;
}

.ability-battle .sb-atari-sparkle-layer::before,
.ability-battle .sb-atari-sparkle-layer::after {
  content: '';
  position: absolute;
  inset: var(--sb-atari-inset, 12%);
  background:
    radial-gradient(circle at 18% 48%, rgba(255,255,255,.95) 0 3px, transparent 7px),
    radial-gradient(circle at 40% 18%, rgba(255,237,92,.95) 0 3px, transparent 8px),
    radial-gradient(circle at 62% 58%, rgba(255,255,255,.92) 0 2px, transparent 7px),
    radial-gradient(circle at 84% 42%, rgba(255,237,92,.90) 0 3px, transparent 8px);
  filter: drop-shadow(0 0 8px rgba(255,248,180,.95));
  animation: sb-atari-sparkle-drift 2s ease-out both;
}

.ability-battle .sb-atari-sparkle-layer::after {
  --sb-atari-inset: 5%;
  transform: rotate(24deg);
  animation-name: sb-atari-sparkle-drift-alt;
}

@keyframes sb-atari-sparkle-burst {
  0% { opacity: 0; transform: scale(.92); filter: brightness(1); }
  12% { opacity: 1; transform: scale(1); filter: brightness(1.6); }
  58% { opacity: .78; filter: brightness(1.2); }
  100% { opacity: 0; transform: scale(1.08); filter: brightness(.9); }
}

@keyframes sb-atari-sparkle-drift {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(1.12); }
}

@keyframes sb-atari-sparkle-drift-alt {
  0% { opacity: 0; transform: rotate(24deg) translateY(12px) scale(.92); }
  18% { opacity: 1; transform: rotate(24deg) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(24deg) translateY(-24px) scale(1.16); }
}

@keyframes sb-atari-message-pop {
  0% { transform: scale(.98); filter: brightness(1); }
  18% { transform: scale(1.035); filter: brightness(1.45); }
  42% { transform: scale(1); filter: brightness(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}

.ability-battle .ot-board-wrap,
.ability-battle .ot-board-inner,
.ability-battle .ot-grid,
.ability-battle .ot-cell {
  visibility: visible !important;
}
.ability-battle .ot-board-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--board-bg-image, url('https://wakabaland.com/wp-content/uploads/2026/09/reversi13.webp'));
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}
.ability-battle .ot-board-inner {
  position: relative;
  z-index: 1;
  background: #0d4327;
  border: 3px solid #07170e;
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 2px #e9f7e9,
    0 0 0 5px #174f30,
    0 6px 0 #092b19,
    0 10px 16px rgba(4,28,15,0.28);
}

.ability-battle .sb-end-announcement {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  box-sizing: border-box;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: rgba(0,0,0,.30);
}

.ability-battle .sb-end-announcement.show {
  visibility: visible;
  opacity: 1;
}

.ability-battle .sb-end-announcement-dialog {
  display: grid;
  place-items: center;
  width: min(88%, 360px);
  min-height: 52px;
  padding: 9px 10px 8px;
  box-sizing: border-box;
  border: 3px solid #f4f6f4;
  outline: 3px solid #07170e;
  background: #080b09;
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  font-size: min(4.2vw, 22px);
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #000;
  box-shadow: 0 8px 0 rgba(0,0,0,.48);
  animation: sb-end-announcement-pop 1.2s steps(2, end) both;
}

.ability-battle .sb-end-announcement-dialog > span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .ability-battle .sb-end-announcement-dialog {
    width: calc(100% - 24px);
    max-width: none;
    min-height: 40px;
    padding: 7px 4px 6px;
    font-size: min(3.8vw, 15px);
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
  }
}

@keyframes sb-end-announcement-pop {
  0% { transform: scale(.86); filter: brightness(1.8); }
  18% { transform: scale(1.04); filter: brightness(1.2); }
  35%, 100% { transform: scale(1); filter: brightness(1); }
}

.ability-battle .ot-disc {
  width: 80%;
  height: 80%;
  box-sizing: border-box;
  border: 2px solid;
  filter: none;
}

.ability-battle .ot-disc.black {
  border-color: #050505;
  background: radial-gradient(circle at 34% 28%, #a3a3a3 0 8%, #686868 9% 18%, #353535 19% 43%, #191919 44% 72%, #080808 73% 100%);
  box-shadow: 0 3px 0 #020202, 3px 3px 0 rgba(0,0,0,0.22), -2px -2px 0 rgba(255,255,255,0.12) inset;
}

.ability-battle .ot-disc.white {
  border-color: #b8b8b8;
  background: radial-gradient(circle at 34% 28%, #fff 0 12%, #f4f4f4 13% 36%, #dedede 37% 70%, #bcbcbc 71% 100%);
  box-shadow: 0 3px 0 #969696, 3px 3px 0 rgba(0,0,0,0.18), -2px -2px 0 rgba(255,255,255,0.72) inset;
}

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

.ability-battle .sb-ability-slot.slot-empty {
  background: rgba(0,0,0,0.02) !important;
  border: 1.5px dashed rgba(0,0,0,0.15) !important;
  border-radius: 4px;
  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: 4px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  transition: opacity 80ms steps(2, end), box-shadow 80ms steps(2, end);
  position: relative;
  overflow: hidden;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.ability-battle .sb-ability-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.24) 0 22%, transparent 23% 100%);
  border-radius: 3px;
  pointer-events: none;
}
.ability-battle .sb-ability-slot[class*="slot-cat-"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  border-radius: 3px;
  pointer-events: none;
  z-index: 0;
}
.ability-battle .sb-ability-slot > * {
  position: relative;
  z-index: 1;
}
.ability-battle .sb-ability-slot:not(.slot-used):not(.slot-disabled):hover {
  box-shadow: 0 0 0 2px #f7fff7, 3px 3px 0 rgba(0,0,0,0.26);
}
.ability-battle .sb-ability-slot:not(.slot-used):not(.slot-disabled):active {
  box-shadow: 0 0 0 2px #ffd84a, 2px 2px 0 rgba(0,0,0,0.28);
}

.ability-battle .sb-ability-slot.slot-used {
  background-color: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 0.45;
}

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

.ability-battle .cpu-ability-area .sb-ability-slot {
  cursor: default;
}

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

.ability-battle .sb-slot-cond-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff 0 46%, #c5c5c5 47% 100%);
  border: 1px solid #111;
  border-bottom: 2px solid #111;
  color: #111111;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow: 1px 1px 0 rgba(255,255,255,.9) inset, 2px 2px 0 rgba(0,0,0,.22);
  min-height: 21px;
  height: 21px;
  padding: 2px 7px 3px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  vertical-align: middle;
}

.ability-battle .sb-ability-slot[class*="slot-cat-"] {
  background-color: #333;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ability-battle .sb-ability-slot.slot-cat-placement { background-color: #236fc8; }
.ability-battle .sb-ability-slot.slot-cat-flip      { background-color: #8140c8; }
.ability-battle .sb-ability-slot.slot-cat-erase     { background-color: #c83a32; }
.ability-battle .sb-ability-slot.slot-cat-guard     { background-color: #21964a; }
.ability-battle .sb-ability-slot.slot-cat-combo     { background-color: #b88d00; }
.ability-battle .sb-ability-slot.slot-cat-block     { background-color: #9a5b24; }
.ability-battle .sb-ability-slot.slot-cat-hint      { background-color: #666a70; }
.ability-battle .sb-ability-slot.slot-cat-null      { background-color: #242424; }

/* Every ability category has its card art.  Keep this mapping in one place. */
.ability-battle .sb-ability-slot.slot-cat-placement { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi7.webp'); }
.ability-battle .sb-ability-slot.slot-cat-erase     { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi9.webp'); }
.ability-battle .sb-ability-slot.slot-cat-guard     { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi12.webp'); }
.ability-battle .sb-ability-slot.slot-cat-block     { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi11.webp'); }
.ability-battle .sb-ability-slot.slot-cat-hint      { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi13.webp'); }
.ability-battle .sb-ability-slot.slot-cat-null      { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi14.webp'); }

.ability-battle .sb-ability-slot.slot-cat-flip.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/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/09/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/09/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/09/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-combo.slot-lv1 { background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/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/09/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/09/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/09/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); }

/* スキル説明は #reversi を基準に重ね、対局全体のレイアウトには参加させない。 */
#reversi .sb-ability-tooltip {
  position: absolute;
  z-index: 120;
  display: none;
  width: min(280px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid rgba(20,20,20,.78);
  border-radius: 9px;
  background: rgba(255,255,255,.97);
  color: #111;
  box-shadow: 0 6px 16px rgba(0,0,0,.26);
  pointer-events: none;
}
#reversi .sb-ability-tooltip.visible {
  display: block;
}
#reversi .sb-ability-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 7px;
  transform: translateX(-50%);
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sb-ability-tooltip.tip-below {
  transform: none;
}
.sb-ability-tooltip.tip-below.visible {
  transform: none;
}
.sb-ability-tooltip.tip-below::after {
  bottom: auto;
  top: -6px;
  background: #fff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sb-tip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sb-tip-name {
  font-family: 'DotGothic16', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #111;
}
.sb-tip-cond-group {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.sb-tip-cond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 48%, #a9a9a9 100%);
  border: 1px solid #111;
  border-bottom: 2px solid #111;
  color: #111111;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(0,0,0,.18);
  min-height: 21px;
  height: 21px;
  padding: 2px 7px 3px;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  vertical-align: middle;
}
.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; }
.ability-battle .cpu-ability-area .sb-inline-ability-name {
  display: contents;
}

.ability-battle .sb-inline-ability-name.sb-dom-ability-card {
  position: absolute;
  inset: 4px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px;
  border-radius: 7px;
  pointer-events: none;
  overflow: hidden;
  container-type: inline-size;
}
.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;
    padding: 0 8px;
  }
  .ability-battle .sb-top-row {
    --sb-top-gap: 5px;
    margin-top: 1px;
    margin-bottom: 0;
  }
  .ability-battle .sb-top-char-box .sb-char-frame {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    flex: none;
    aspect-ratio: 1 / 1;
  }
  .ability-battle .sb-score-bar {
    gap: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
  }
  .ability-battle .sb-top-row,
  .ability-battle .sb-bottom-row {
    align-items: stretch;
  }

  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }
  .ability-battle .sb-activate-btn {
    height: 24px;
    font-size: 13px;
  }
  .ability-battle .sb-bottom-row {
    --sb-row-gap: 5px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ability-battle .sb-bottom-ability-area {
    gap: var(--sb-row-gap);
    padding: 0;
  }

  .ability-battle .sb-score-box-num {
    font-size: clamp(26px, 4.5vw, 36px);
  }

  .ability-battle .ot-board-wrap {
    max-width: 520px;
    padding: 57px;
  }

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

  .ability-battle .sb-message-bar {
    width: calc(100% - 16px);
    max-width: 504px;
  }
}

@keyframes sbCoinSpin {
  0%   { transform: rotateY(0deg) rotateX(0deg); }
  72%  { 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%;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sb-coin-black {
  background: radial-gradient(circle at 34% 28%, #a3a3a3 0 8%, #686868 9% 18%, #353535 19% 43%, #191919 44% 72%, #080808 73% 100%);
  border: 3px solid #050505;
  box-shadow: 0 5px 0 #020202, 5px 5px 0 rgba(0,0,0,0.24), -3px -3px 0 rgba(255,255,255,0.12) inset;
  transform: rotateY(0deg);
}
.sb-coin-white {
  background: radial-gradient(circle at 34% 28%, #fff 0 12%, #f4f4f4 13% 36%, #dedede 37% 70%, #bcbcbc 71% 100%);
  border: 3px solid #a9a9a9;
  box-shadow: 0 5px 0 #8e8e8e, 5px 5px 0 rgba(0,0,0,0.18), -3px -3px 0 rgba(255,255,255,0.72) inset;
  transform: rotateY(180deg);
}

.sb-coin-face::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 23%;
  width: 18%;
  height: 8%;
  background: rgba(255,255,255,0.56);
  box-shadow: 8px -4px 0 rgba(255,255,255,0.22);
}

.sb-coin-white::after {
  background: rgba(255,255,255,0.95);
  box-shadow: 8px -4px 0 rgba(255,255,255,0.68);
}

.sb-coin-disc-label {
  display: none;
}

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

.sb-swap-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 12px;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .sb-swap-overlay {
    background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center center / cover no-repeat;
  }
}
.sb-swap-overlay > * {
  position: relative;
  z-index: 1;
}

.sb-swap-modal {
  background: rgba(14,14,24,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 24px 22px 26px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}
@media (max-width: 480px) {
  .sb-swap-modal {
    background: rgba(10,10,18,0.82);
    border: 1px solid rgba(255,255,255,0.10);
  }
}

.sb-swap-modal:not(.sb-choice-modal) {
  background-image: url('https://wakabaland.com/wp-content/uploads/2026/09/reversi15.webp') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45)) !important;
  overflow: visible !important;
  padding: 56px 40px 78px !important;
  max-width: 360px !important;
  width: 92vw !important;
}
@media (min-width: 481px) {
  .sb-swap-modal:not(.sb-choice-modal) {
    max-width: 500px !important;
    padding: 72px 54px 116px !important;
    margin-top: -49px !important;
  }
}



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

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

.sb-swap-incoming-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sb-swap-slot.sb-swap-cat-placement { background: rgba(30,100,200,0.55) !important;  border-color: rgba(30,100,200,0.80) !important; }
.sb-swap-slot.sb-swap-cat-flip      { background: rgba(160,80,230,0.55) !important;  border-color: rgba(160,80,230,0.80) !important; }
.sb-swap-slot.sb-swap-cat-erase     { background: rgba(240,60,60,0.55) !important;   border-color: rgba(240,60,60,0.80) !important; }
.sb-swap-slot.sb-swap-cat-combo     { background: rgba(200,155,0,0.55) !important;   border-color: rgba(200,155,0,0.80) !important; }
.sb-swap-slot.sb-swap-cat-block     { background: rgba(160,100,40,0.55) !important;  border-color: rgba(160,100,40,0.80) !important; }
.sb-swap-slot.sb-swap-cat-hint      { background: rgba(140,140,140,0.50) !important; border-color: rgba(140,140,140,0.75) !important; }
.sb-swap-slot.sb-swap-cat-guard     { background: rgba(40,180,80,0.55) !important;   border-color: rgba(40,180,80,0.80) !important; }
.sb-swap-slot.sb-swap-cat-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-name-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}

.sb-swap-slot-icon {
  flex-shrink: 0;
}

.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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 48%, #a9a9a9 100%);
  border: 1px solid #111;
  border-bottom: 2px solid #111;
  color: #111111;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(0,0,0,.18);
  min-height: 21px;
  height: 21px;
  border-radius: 6px;
  padding: 2px 7px 3px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 2px;
  letter-spacing: 0;
  vertical-align: middle;
}

.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;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#reversi .sb-swap-actions .ot-btn,
.reversi-game .sb-swap-actions .ot-btn,
.sb-swap-actions .ot-btn {
  min-width: 0;
  width: min(184px, calc((100vw - 88px) / 2));
}

#reversi .sb-swap-actions .ot-btn:only-child,
.reversi-game .sb-swap-actions .ot-btn:only-child,
.sb-swap-actions .ot-btn:only-child {
  min-width: min(230px, 75vw);
  width: auto;
}

@media (max-width: 360px) {
  .sb-swap-actions {
    gap: 8px;
  }
  #reversi .sb-swap-actions .ot-btn,
  .reversi-game .sb-swap-actions .ot-btn,
  .sb-swap-actions .ot-btn {
    width: min(164px, calc((100vw - 64px) / 2));
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }
}

.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);
}
.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-null      { background: rgba(60, 60, 60, 0.85); border-color: rgba(160, 160, 160, 0.9); }

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

.sb-continue-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://wakabaland.com/wp-content/uploads/2026/04/reversi1.webp') center center / cover no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
@media (max-width: 480px) {
  .sb-continue-overlay {
    background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('https://wakabaland.com/wp-content/uploads/2026/04/reversi2.webp') center center / cover no-repeat;
  }
}
.sb-continue-overlay > * {
  position: relative;
  z-index: 1;
}

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

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

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

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

.sb-continue-title {
  font-family: 'DotGothic16', sans-serif;
  color: #3a2010;
  text-shadow: none;
  margin: 0;
}

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

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

.sb-cutin {
  position: absolute;
  inset: 0;
  left: 50%;
  right: auto;
  width: min(86%, 820px);
  max-width: 820px;
  transform: translateX(-50%);
  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: clamp(280px, 23vw, 340px);
  border: 3px solid var(--ci-accent, #fff);
  border-radius: 18px;
  background: var(--ci-base, #050607);
  overflow: hidden;
  z-index: 1;
  box-shadow: none;
}

.sb-cutin-card-inner {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  z-index: 0;
}

.sb-cutin-char {
  position: absolute;
  bottom: 0;
  width: 46%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left bottom;
  z-index: 20;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.78)) drop-shadow(0 5px 4px rgba(0,0,0,.48));
}
.sb-cutin-char.side-l { left: 0; object-position: left bottom; }
.sb-cutin-char.side-r { right: 0; object-position: right bottom; }

/* CPU artwork has extra transparent canvas around the character.  Keep the
   same card geometry as the player and compensate only the visible sprite. */
.sb-cutin.cutin-cpu .sb-cutin-char {
  transform: none;
  transform-origin: right bottom;
}

.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-title-row {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, .8vw, 10px);
  max-width: 100%;
  min-width: 0;
  line-height: 1;
}
.sb-cutin-text.side-r .sb-cutin-title-row {
  justify-content: flex-end;
}
.sb-cutin-text.side-l .sb-cutin-title-row {
  justify-content: flex-start;
}

.sb-cutin-skill-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: clamp(54px, 5.6vw, 76px);
  min-height: clamp(28px, 2.8vw, 36px);
  padding: 2px clamp(8px, 1vw, 12px) 4px;
  border: 2px solid rgba(92,58,0,.86);
  border-bottom-width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8a8 0%, #ffd94c 48%, #b97a16 100%);
  color: #2a1800;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  box-shadow:
    0 3px 0 rgba(92,58,0,.68),
    0 2px 0 rgba(255,255,255,.72) inset,
    0 0 18px rgba(255,224,68,.46);
}

.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 {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(22px, 6.5vw, 34px);
  font-weight: 900;
  color: var(--ci-title, #fff);
  letter-spacing: 0;
  line-height: 1.15;
  -webkit-text-stroke: 2.5px var(--ci-text-outline, #050607);
  paint-order: stroke fill;
  text-shadow: none;
  white-space: nowrap;
}

.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: 4px;
    right: 4px;
    width: auto;
    max-width: none;
    transform: none;
  }
  .sb-cutin-card      { height: clamp(166px, 43vw, 188px); border-radius: 18px; }
  .sb-cutin-char      { width: 48%; max-width: none; height: 100%; }
  .sb-cutin-char.side-l { left: 0; }
  .sb-cutin-char.side-r { right: 0; }
  .sb-cutin-text.side-r { left: 52%; right: 10px; max-width: calc(48% - 10px); }
  .sb-cutin-text.side-l,
  .sb-cutin.cutin-cpu .sb-cutin-text.side-l {
    left: 10px;
    right: 52%;
    max-width: calc(48% - 10px);
  }
  .sb-cutin-title-row {
    align-items: inherit;
    gap: 5px;
  }
  .sb-cutin-skill-rank {
    min-width: 42px;
    min-height: 24px;
    padding: 2px 7px 3px;
    font-size: 15px;
  }
  .sb-cutin-text-name {
    width: 100%;
    font-size: clamp(26px, 7.2vw, 30px);
    -webkit-text-stroke-width: 1.75px;
  }
  .sb-cutin-text-star { font-size: 14px; }
}

@media (max-width: 300px) {
  .sb-cutin-text-name.is-long-name {
    font-size: 22px;
    -webkit-text-stroke-width: 1.5px;
  }
}

@media (min-width: 431px) and (max-width: 834px) {
  .sb-cutin-card { height: clamp(188px, 32vw, 260px); }
  .sb-cutin-char { width: 48%; }
  .sb-cutin-text.side-r {
    left: 52%;
    right: clamp(12px, 3vw, 24px);
    max-width: calc(48% - clamp(12px, 3vw, 24px));
  }
  .sb-cutin-text.side-l,
  .sb-cutin.cutin-cpu .sb-cutin-text.side-l {
    left: clamp(12px, 3vw, 24px);
    right: 52%;
    max-width: calc(48% - clamp(12px, 3vw, 24px));
  }
  .sb-cutin-text-name {
    font-size: clamp(28px, 6vw, 44px);
    -webkit-text-stroke-width: 2px;
  }
  .sb-cutin-text-name.is-long-name { font-size: clamp(26px, 5.4vw, 40px); }
  .sb-cutin-text-star { font-size: 18px; letter-spacing: 4px; }
}

@media (min-width: 835px) {
  .sb-cutin-card      { height: clamp(280px, 23vw, 340px); }
  .sb-cutin-text.side-r {
    left: clamp(348px, 40%, 408px);
    right: clamp(28px, 4vw, 54px);
    max-width: none;
  }
  .sb-cutin-text.side-l,
  .sb-cutin.cutin-cpu .sb-cutin-text.side-l {
    left: clamp(28px, 4vw, 54px);
    right: clamp(382px, 40%, 432px);
    max-width: none;
  }
  .sb-cutin-text-name {
    font-size: clamp(48px, 6.2vw, 76px);
  }
  .sb-cutin-text-name.is-long-name {
    font-size: clamp(42px, 5vw, 60px);
  }
  .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)} }

@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: 767px) {

  .ability-battle .sb-score-box-label .sb-score-color-note {
    display: none;
  }

  #reversi {
    min-height: auto;
  }
  #screen-title.screen {
    min-height: auto;
  }

  #screen-title {
    height: auto;
    padding: 140px 20px 0;
    justify-content: flex-start;
    align-items: center;
  }

  #screen-title .title-logo-area {
    height: 84px;
    margin-bottom: 32px;
  }
  #screen-title .title-discs {
    margin-bottom: 6px;
  }

  #screen-title .title-content {
    max-width: 380px;
    width: 100%;
    padding-bottom: 48px;
  }

  #screen-title .mode-section {
    gap: 8px;
    width: 100%;
  }
  #screen-title .mode-cards {
    gap: 8px;
    width: 100%;
  }
  #screen-title .mode-card {
    border-radius: 16px;
    padding: 12px 16px;
  }

  .reversi-game .ot-board-wrap {
    padding: 14px 36px;
  }

  .ability-battle .ot-board-wrap {
    width: min(calc(100vw - 28px), 360px);
    max-width: 360px;
    box-sizing: border-box;
    align-self: center;
    padding: clamp(34px, 9.75vw, 41px);
  }
  .ability-battle .ot-board-inner,
  .ability-battle .ot-grid {
    width: 100%;
    box-sizing: border-box;
  }

  .ability-battle .sb-top-row,
  .ability-battle .sb-bottom-row {
    width: min(calc(100vw - 28px), 360px);
    max-width: 360px;
    padding: 2px 6px;
  }
  .ability-battle .sb-top-row { --sb-top-gap: 4px; }
  .ability-battle .sb-score-bar {
    width: min(calc(100vw - 28px), 360px);
    max-width: 360px;
    padding: 0 6px;
    gap: 4px;
  }

  .ability-battle .sb-message-bar {
    width: min(calc(100vw - 40px), 348px);
    max-width: 348px;
  }

  .ability-battle .sb-top-char-box .sb-char-frame {
    width: 100%;
    height: 100%;
    flex: unset;
    aspect-ratio: 1 / 1;
    min-height: unset;
    max-height: unset;
  }
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    width: 100%;
    height: auto;
    flex: unset;
    aspect-ratio: 1 / 1;
    min-height: unset;
    max-height: unset;
  }

  .ability-battle .sb-score-box-num {
    font-size: clamp(20px, 6vw, 24px);
  }
  .ability-battle .sb-score-box-label {
    font-size: 9px;
  }

  .ability-battle .sb-activate-btn {
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
    font-size: 10px;
  }
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }

  .ability-battle .sb-bottom-row {
    margin-bottom: 20px;
    --sb-row-pad-x: 6px;
    --sb-row-gap: 4px;
    --sb-action-height: 24px;
    --sb-action-offset: 5px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto var(--sb-action-height);
    column-gap: var(--sb-row-gap);
    row-gap: var(--sb-action-offset);
    align-items: stretch;
    padding-bottom: 2px;
  }
  .ability-battle .sb-bottom-ability-col {
    display: grid;
    grid-column: 2 / 5;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    position: static;
    align-self: stretch;
    width: auto;
    flex: none;
  }
  .ability-battle .sb-bottom-ability-area {
    flex: unset;
    width: 100%;
    padding: 0;
  }
  .ability-battle .sb-player-activate-row {
    position: static;
    margin-top: 0;
    gap: 3px;
    padding: 0;
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
  }
  .ability-battle .sb-bottom-char-box {
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    position: static;
    align-self: stretch;
    width: auto;
    flex: none;
    overflow: visible;
  }
  .ability-battle .sb-surrender-btn {
    position: static;
    width: 100%;
    margin: 0;
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  .ability-battle .sb-top-row,
  .ability-battle .sb-bottom-row,
  .ability-battle .sb-score-bar {
    padding: 0 6px;
  }
  .ability-battle .sb-top-row { --sb-top-gap: 5px; }
  .ability-battle .sb-score-bar { gap: 5px; }
  .ability-battle .sb-bottom-row {
    --sb-row-pad-x: 6px;
    --sb-row-gap: 5px;
    --sb-action-height: 24px;
    --sb-action-offset: 5px;
    padding-bottom: 0;
  }
  .ability-battle .sb-top-char-box .sb-char-frame,
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: auto;
    min-height: unset;
    max-height: unset;
  }
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }
  .ability-battle .sb-activate-btn {
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
  }
  .ability-battle .sb-surrender-btn {
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
    font-size: clamp(9px, 2.6vw, 11px);
  }
  .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 {
    position: static;
    gap: 4px;
    padding: 0;
  }
  .ability-battle .sb-bottom-ability-col {
    display: grid;
    grid-column: 2 / 5;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    position: static;
    align-self: stretch;
    width: auto;
    flex: none;
  }
  .ability-battle .sb-bottom-ability-area {
    flex: unset;
    width: 100%;
    padding: 0;
  }
  .ability-battle .sb-bottom-char-box {
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    position: static;
    align-self: stretch;
    width: auto;
    flex: none;
    overflow: visible;
  }
  .ability-battle .sb-surrender-btn {
    position: static;
    width: 100%;
    margin: 0;
  }
  .ability-battle .sb-bottom-row {
    margin-bottom: 30px;
  }

  .ability-battle .sb-message-bar {
    width: calc(100% - 12px);
    max-width: 408px;
  }
}
@media (max-width: 340px) {
  .ability-battle .sb-top-row { --sb-top-gap: 3px; }
  .ability-battle .sb-top-char-box .sb-char-frame {
    height: 100%;
    min-height: unset;
    max-height: unset;
  }
  .ability-battle .sb-bottom-char-box .sb-char-frame {
    height: auto;
    min-height: unset;
    max-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: var(--sb-action-height);
    min-height: var(--sb-action-height);
  }
  .ability-battle .sb-bottom-row {
    --sb-row-pad-x: 6px;
    --sb-row-gap: 4px;
    --sb-action-height: 22px;
    --sb-action-offset: 5px;
    padding-bottom: 0;
  }
  .ability-battle .sb-surrender-btn {
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
    font-size: 9px;
  }
  .ability-battle .sb-activate-btn {
    font-size: 9px;
  }
  .ability-battle .sb-bottom-ability-col {
    display: grid;
    grid-column: 2 / 5;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    position: static;
    align-self: stretch;
    width: auto;
    flex: none;
  }
  .ability-battle .sb-bottom-ability-area {
    flex: unset;
    width: 100%;
    padding: 0;
  }
  .ability-battle .sb-bottom-char-box {
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-rows: auto var(--sb-action-height);
    row-gap: var(--sb-action-offset);
    position: static;
    align-self: stretch;
    width: auto;
    flex: none;
    overflow: visible;
  }
  .ability-battle .sb-player-activate-row {
    position: static;
    gap: 3px;
    padding: 0;
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
  }
  .ability-battle .sb-bottom-row {
    margin-bottom: 20px;
  }
}
@media (max-height: 700px) {
  .ability-battle .sb-cpu-activate-spacer {
    height: 0;
  }
  .ability-battle .sb-activate-btn {
    height: var(--sb-action-height, 24px);
    min-height: var(--sb-action-height, 24px);
  }
  .ability-battle .sb-surrender-btn {
    height: var(--sb-action-height, 24px);
    min-height: var(--sb-action-height, 24px);
  }
  .ability-battle .sb-activate-btn {
    font-size: clamp(9px, 2.6vw, 12px);
  }
}

@media (max-width: 380px) and (max-height: 640px) {
  .ability-battle .sb-bottom-row {
    --sb-action-height: 21px;
  }
  .ability-battle .sb-player-activate-row,
  .ability-battle .sb-activate-btn,
  .ability-battle .sb-surrender-btn {
    height: var(--sb-action-height);
    min-height: var(--sb-action-height);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ot-disc.flip.disc-guarded {
  animation: discFlippedIn .45s cubic-bezier(.22,1.5,.4,1) both,
             discGuardedPulse 1.4s ease-in-out .45s infinite;
}
.ot-disc.disc-set.disc-guarded {
  animation: discSetDrop .55s cubic-bezier(.18,1.4,.4,1) both,
             discGuardedPulse 1.4s ease-in-out .55s infinite;
}
.ot-disc.disc-pass.disc-guarded {
  animation: discPassDrop .38s cubic-bezier(.22,1.5,.4,1) both,
             discGuardedPulse 1.4s ease-in-out .38s infinite;
}

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

.ability-battle .ot-disc .guard-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(11px, 3vw, 15px);
  font-weight: 900;
  color: rgba(160, 255, 180, 1.0);
  text-shadow:
    0 0 6px rgba(40, 200, 80, 0.95),
    0 0 16px rgba(20, 160, 50, 0.7),
    0 1px 2px rgba(0,0,0,0.9);
  z-index: 6;
  pointer-events: none;
  animation: guard-num-pulse 1.4s ease-in-out infinite;
  letter-spacing: 0;
}

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

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

.ot-disc.flip.disc-cpu-guarded {
  animation: discFlippedIn .45s cubic-bezier(.22,1.5,.4,1) both,
             discCpuGuardedPulse 1.4s ease-in-out .45s infinite;
}
.ot-disc.disc-set.disc-cpu-guarded {
  animation: discSetDrop .55s cubic-bezier(.18,1.4,.4,1) both,
             discCpuGuardedPulse 1.4s ease-in-out .55s infinite;
}
.ot-disc.disc-pass.disc-cpu-guarded {
  animation: discPassDrop .38s cubic-bezier(.22,1.5,.4,1) both,
             discCpuGuardedPulse 1.4s ease-in-out .38s infinite;
}

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

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

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

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

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

.cutin-exit .sb-cutin-band {
  animation-duration: .4s !important;
}
.cutin-exit .sb-cutin-content {
  animation-duration: .35s !important;
}
.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-choice-modal {
  max-width: 360px;
  width: 92vw;
}

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

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

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

.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-null       { background: rgba(60, 60, 60, 0.60); border-color: rgba(120, 120, 120, 0.75); }

.sb-choice-name-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}
.sb-choice-icon {
  flex-shrink: 0;
}
.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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 48%, #a9a9a9 100%);
  border: 1px solid #111;
  border-bottom: 2px solid #111;
  color: #111111;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(0,0,0,.18);
  min-height: 21px;
  height: 21px;
  padding: 2px 7px 3px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 2px;
  letter-spacing: 0;
  vertical-align: middle;
}
.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;
}

.ability-battle .ot-board-wrap.board-block-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  animation: boardBlockFlash 1.0s ease-out forwards;
  z-index: 10;
  background: radial-gradient(circle at center, rgba(160,100,40,0.75) 0%, rgba(100,55,10,0.3) 50%, transparent 75%);
}

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

.ability-battle .ot-cell.hint-block {
  background: rgba(100, 55, 10, 0.35);
  outline: 2.5px solid rgba(210, 165, 100, 0.9);
  outline-offset: -2px;
  border-radius: 4px;
  animation: block-cell-pulse 1.1s ease-in-out infinite;
  z-index: 1;
}

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

.ability-battle .ot-cell.hint-block::after { content: none; }

.ability-battle .ot-cell.hint-erase {
  outline: 2.5px solid rgba(252, 100, 100, 0.9);
  outline-offset: -2px;
  border-radius: 4px;
  background: rgba(200, 30, 30, 0.18);
  animation: erase-cell-pulse 1.1s ease-in-out infinite;
  z-index: 1;
}

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

.ability-battle .ot-disc.disc-erase-target {
  animation: erase-disc-glow 1.1s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

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

.ability-battle .ot-cell.hint-erase:hover {
  background: rgba(220, 50, 50, 0.38);
  outline-color: rgba(255, 180, 180, 1.0);
}

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

#screen-spec,
#screen-spec *,
.sb-swap-overlay,
.sb-swap-overlay *,
.sb-continue-overlay,
.sb-continue-overlay *,
.sb-coin-overlay,
.sb-coin-overlay *,
.sb-ability-tooltip,
.sb-ability-tooltip * {
  font-family: 'DotGothic16', sans-serif !important;
}

.sb-cutin-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  background-color: var(--ci-base, #050607);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 盤面を選択するスキルの対象マス。JS では状態だけ付与し、見た目はここで一元管理する。 */
#reversi .ot-cell.pending-sel,
.reversi-game .ot-cell.pending-sel {
  position: relative;
  outline: 4px solid #050505 !important;
  outline-offset: -4px !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.86), 0 0 13px rgba(0,0,0,.48) !important;
  z-index: 8;
}
#reversi .ot-cell.pending-sel[data-selected-order]::before,
.reversi-game .ot-cell.pending-sel[data-selected-order]::before {
  content: attr(data-selected-order);
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  border: 1px solid rgba(255,255,255,.78);
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.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-save-actions {
  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.magic.has-save .mode-select-btn {
  width: 92px;
  min-width: 92px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.mode-card.magic.has-save .mode-select-btn:hover {
  background: transparent;
  opacity: 1;
}

.mode-card.magic.has-save .mode-select-label {
  display: none;
}

.mode-card.magic.has-save .mode-save-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.mode-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-height: 33px;
  padding: 6px 8px 7px;
  border: 2px solid #111;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #efefef);
  color: #111;
  font-family: 'DotGothic16', sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 rgba(0,0,0,.22);
}

.mode-save-btn:hover {
  background: #fff;
  transform: translateY(-1px);
}

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

#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 {
  border-color: rgba(255,255,255,0.12);
}

.sb-level-clear-overlay,
.sb-level-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}

.sb-level-clear-overlay {
  --milestone-secondary: rgba(255,255,255,.32);
  background: #050505;
  animation: sb-fade-in .5s ease;
}

.sb-level-start-overlay {
  background: #050505;
  animation: none;
}

.sb-level-clear-overlay.hiding,
.sb-level-start-overlay.hiding {
  animation: sb-fade-out .42s ease forwards;
}

.sb-level-clear-inner,
.sb-level-start-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(92%, 720px);
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 62px) clamp(14px, 5vw, 48px);
  text-align: center;
}

.sb-level-clear-inner {
  gap: clamp(8px, 1.5vw, 14px);
  min-height: 100%;
  padding-top: clamp(22px, 4vh, 42px);
  padding-bottom: clamp(18px, 3vh, 34px);
  animation: lvClearBadge .5s cubic-bezier(.2,.9,.28,1.18) .12s both;
}

.sb-level-start-inner {
  gap: clamp(8px, 1.5vw, 14px);
  min-height: 100%;
  padding-top: clamp(22px, 4vh, 42px);
  padding-bottom: clamp(18px, 3vh, 34px);
  animation: none;
}

.sb-level-clear-badge,
.sb-level-start-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.6vw, 14px);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  font-family: 'DotGothic16', sans-serif;
  font-weight: 900;
  line-height: .95;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.sb-level-clear-count,
.sb-level-start-count {
  flex: 0 0 auto;
  font-size: clamp(48px, min(9vw, 9vh), 72px);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.sb-level-clear-copy,
.sb-level-start-copy {
  flex: 0 0 auto;
  font-size: clamp(30px, min(5.4vw, 5.8vh), 46px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.sb-level-clear-count {
  color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,255,255,.28);
}

.sb-level-clear-copy {
  color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(255,255,255,.22);
}

.sb-level-start-count {
  color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,255,255,.28);
}

.sb-level-start-copy {
  color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(255,255,255,.22);
}

.sb-level-clear-sub {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  font-size: clamp(19px, 3.4vw, 28px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 0 #000, 0 0 12px var(--milestone-secondary);
  animation: lvClearSub .42s ease .58s both;
}

.sb-level-clear-count,
.sb-level-clear-copy,
.sb-level-clear-sub {
  font-size: clamp(30px, min(5.4vw, 5.8vh), 46px);
  line-height: 1;
}

.sb-level-clear-character,
.sb-level-start-character {
  display: block;
  flex: 0 1 auto;
  width: min(54%, 360px);
  max-width: 100%;
  max-height: min(40vh, 340px);
  margin: clamp(2px, .8vh, 8px) auto 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.72));
  user-select: none;
  -webkit-user-drag: none;
  animation: lvClearCharacter .55s cubic-bezier(.2,.8,.3,1) .42s both;
}

.sb-level-start-character {
  animation: none;
}

.sb-level-clear-btn {
  margin-top: clamp(6px, 1vw, 12px);
  animation: lvClearBtn .4s ease .88s both;
}

@media (max-width: 480px) {
  .sb-level-clear-inner,
  .sb-level-start-inner {
    width: 100%;
  }

  .sb-level-clear-inner {
    gap: 9px;
    padding: 22px 10px 16px;
  }

  .sb-level-start-inner {
    gap: 9px;
    padding: 22px 10px 16px;
  }

  .sb-level-clear-count,
  .sb-level-start-count {
    font-size: clamp(44px, 15vw, 58px);
  }

  .sb-level-clear-count,
  .sb-level-clear-copy,
  .sb-level-clear-sub {
    font-size: clamp(26px, 8vw, 32px);
    line-height: 1;
  }

  .sb-level-start-copy {
    font-size: clamp(24px, 7.6vw, 30px);
  }

  .sb-level-clear-character,
  .sb-level-start-character {
    width: min(68%, 280px);
    max-height: 36vh;
  }
}

@keyframes lvClearBadge { from { transform: scale(.78) translateY(18px); 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 lvClearCharacter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lvClearBtn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bi-overlay {
  position: absolute;
  inset: 0;
  z-index: 10500;
  background-color: #000;
  background-image: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.bi-overlay > * {
  animation: biFadeIn 0.4s ease 0.05s both;
}
@keyframes biFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bi-overlay.hiding {
  animation: biFadeOut 0.4s ease forwards;
}
@keyframes biFadeOut { from { opacity: 1; } to { opacity: 0; } }

.bi-taunt-colorbg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: color;
  opacity: 0.9;
}

.bi-taunt-img {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 92%;
  height: auto;
  image-rendering: pixelated;
  z-index: 3;
  transform: translateX(-50%) scale(0.75) translateY(24px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
}
.bi-taunt-img.enter {
  opacity: 1;
  transform: translateX(-50%) scale(1) translateY(0);
}

.bi-taunt-name {
  display: none;
}

.bi-taunt-msgbox {
  border-width: 5px;
  border-radius: 18px !important;
  display: flex;
  flex-direction: column;
}

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

.bi-name-tag-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 0;
  z-index: 20;
}
.bi-name-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(0);
  width: auto;
  min-width: 80px;
  max-width: 220px;
}
.bi-name-frame-img {
  display: none;
}
.bi-name-inner {
  position: relative;
  background: #000000;
  border: 5px solid #ffffff;
  border-radius: 14px;
  padding: 5px 18px 5px 14px;
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(17px, 4.5vw, 22px);
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

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

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

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

.bi-player {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52%;
  height: auto;
  image-rendering: pixelated;
  z-index: 3;
  transform: translateX(-160%);
  opacity: 0;
  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;   }
}

.bi-cpu {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: auto;
  image-rendering: pixelated;
  z-index: 3;
  transform: translateX(160%);
  opacity: 0;
  filter: url(#bi-duotone);
}
.bi-cpu.enter {
  animation: biSlideFromRight 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}
@keyframes biSlideFromRight {
  from { transform: translateX(160%);  opacity: 0.5; }
  to   { transform: translateX(0);     opacity: 1;   }
}

.bi-taunt-overlay .bi-name-tag-wrap {
  display: none;
}

.bi-taunt-nametag-wrap {
  width: 100%;
  max-width: 480px;
  position: relative;
  height: 0;
  z-index: 30;
  flex-shrink: 0;
  }
.bi-taunt-nametag {
  position: absolute;
  left: -5px;
  top: -35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 158px;         height: 59px;
}
.bi-taunt-nametag-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.bi-taunt-nametag-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  padding: 28px 38px 0 16px;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media (min-width: 481px) {
  .bi-taunt-nametag { top: -48px; left: -5px; width: 235px; height: 87px; }
  .bi-taunt-nametag-text { font-size: 22px; padding: 36px 56px 0 24px; align-items: flex-start; color: #ffffff; }
}

@media (max-width: 360px) {
  .bi-taunt-nametag {
    width: 126px;
    height: 47px;
    top: -30px;
    left: -5px;
  }
  .bi-taunt-nametag-text {
    font-size: clamp(11px, 3.2vw, 13px);
    padding: 22px 30px 0 14px;
    align-items: flex-start;
  }
}

.bi-msgwrap {
  width: 100%;
  max-width: 480px;
  flex-shrink: 0;
  padding: 0;
  margin-top: 6px;
}

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

.bi-taunt-overlay .bi-stage,
.bi-taunt-overlay .bi-msgbox {
  animation: biTauntGlow 2s ease-in-out infinite;
}
@keyframes biTauntGlow {
  0%, 100% {
    box-shadow: 0 0 8px 2px var(--bi-glow-col, rgba(255,255,255,0.6)),
                0 0 18px 6px var(--bi-glow-col, rgba(255,255,255,0.35));
  }
  50% {
    box-shadow: 0 0 14px 4px var(--bi-glow-col, rgba(255,255,255,0.9)),
                0 0 28px 10px var(--bi-glow-col, rgba(255,255,255,0.55));
  }
}

.bi-taunt-name-line {
  display: none;
}
.bi-taunt-name-divider {
  display: none;
}

.bi-taunt-status {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
}
.bi-taunt-status-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.bi-taunt-status-row {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 12px;
  align-items: baseline;
  white-space: nowrap;
}
.bi-taunt-status-label {
  color: #ffffff;
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(17px, 4.5vw, 22px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}
.bi-taunt-status-stars {
  font-family: 'DotGothic16', 'PixelMplus10', monospace;
  font-size: clamp(17px, 4.5vw, 22px);
  font-weight: 400;
  color: #f0c040;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-shadow: 0 0 6px rgba(240,192,64,0.5);
  white-space: nowrap;
}

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

/* CPU dialogue is authored as three deliberate sentences.  Keep its lines
   independent on every viewport instead of relying on newline rendering. */
.bi-taunt-overlay .bi-msg-line1,
.bi-taunt-overlay .bi-msg-line2,
.bi-taunt-overlay .bi-msg-line3 {
  display: block;
}

/* The opponent-status step replaces the dialogue completely.  This explicit
   state also wins over the generic mobile display rules used by the intro. */
.bi-taunt-overlay.bi-taunt-show-status .bi-msg {
  display: none !important;
}
.bi-taunt-overlay.bi-taunt-show-status .bi-taunt-status {
  display: flex !important;
}

.bi-overlay:not(.bi-taunt-overlay) .bi-stage {
  border-color: #D0C6BD;
}
.bi-overlay:not(.bi-taunt-overlay) .bi-msgbox {
  border-color: #D0C6BD;
  background: #252524;
}
.bi-overlay:not(.bi-taunt-overlay) .bi-msg-line1,
.bi-overlay:not(.bi-taunt-overlay) .bi-msg-line2,
.bi-overlay:not(.bi-taunt-overlay) .bi-msg-line3 {
  color: #D0C6BD;
}

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

@media (max-width: 480px) {
  .bi-name-tag-wrap { max-width: 100%; align-self: stretch; }
  .bi-name-frame { left: 0; }
  .bi-name-inner { font-size: clamp(14px, 3.8vw, 17px); padding: 4px 12px 4px 10px; }
  .bi-msgbox {
    box-sizing: border-box;
    width: 100%;
    height: 168px;
    min-height: 168px;
    overflow: hidden;
  }
  .bi-taunt-name-line {
    font-size: clamp(14px, 3.8vw, 17px);
  }
  .bi-taunt-status-label,
  .bi-taunt-status-stars {
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.45;
  }
  .bi-taunt-status-main {
    gap: 4px;
  }
  .bi-taunt-status-row {
    grid-template-columns: 5.8em 1fr;
    gap: 8px;
  }
  .bi-msg-line1,
  .bi-msg-line2,
  .bi-msg-line3 {
    font-family: 'DotGothic16', 'PixelMplus10', monospace;
    font-size: clamp(14px, 3.8vw, 17px);
    color: #ffffff;
    letter-spacing: 0.05em;
    line-height: 1.75;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  }
  .bi-msg-line1 { margin-bottom: 2px; }
}

@media (min-width: 481px) {
  .bi-msg {
    font-size: 22px;
  }
  .bi-msgbox {
    min-height: 96px;
    padding: 20px 32px 16px;
  }
  .bi-name-tag-wrap { max-width: 480px; }
  .bi-name-frame { left: 0; }
  .bi-name-inner { font-size: 22px; }
  .bi-msg-line1,
  .bi-msg-line2,
  .bi-msg-line3 {
    font-family: 'DotGothic16', 'PixelMplus10', monospace;
    font-size: 22px;
    color: #ffffff;
    line-height: 1.75;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  }
  .bi-msg-line1 { margin-bottom: 2px; }
  .bi-overlay:not(.bi-taunt-overlay) .bi-msgbox {
    height: 154px;
    min-height: unset;
    overflow: hidden;
  }
  .bi-taunt-overlay .bi-msgbox {
    height: 154px;
    min-height: unset;
    overflow: hidden;
  }
  .bi-taunt-status-label,
  .bi-taunt-status-stars {
    font-size: 22px;
    line-height: 1.45;
  }
}

@media (min-width: 769px) {
  .bi-stage {
    max-width: 640px;
  }
  .bi-msgwrap {
    max-width: 640px;
  }
  .bi-name-tag-wrap {
    max-width: 640px;
  }
  .bi-taunt-nametag-wrap {
    max-width: 640px;
  }
  .bi-taunt-nametag { top: -52px; left: -5px; width: 256px; height: 95px; }
  .bi-taunt-nametag-text { font-size: 26px; padding: 42px 62px 0 28px; align-items: flex-start; color: #ffffff; }
  .bi-msgbox {
    padding: 22px 36px 18px;
    min-height: 96px;
  }
  .bi-name-frame { left: 0; }
  .bi-name-inner { font-size: 26px; }
  .bi-overlay:not(.bi-taunt-overlay) .bi-msgbox {
    height: 179px;
    min-height: unset;
    overflow: hidden;
  }
  .bi-taunt-overlay .bi-msgbox {
    height: 179px;
    min-height: unset;
    overflow: hidden;
  }
  .bi-msg {
    font-size: 26px;
  }
  .bi-msg-line1,
  .bi-msg-line2,
  .bi-msg-line3 {
    font-size: 26px;
  }
  .bi-taunt-overlay:not(.bi-taunt-show-status) .bi-msg-line1,
  .bi-taunt-overlay:not(.bi-taunt-show-status) .bi-msg-line2,
  .bi-taunt-overlay:not(.bi-taunt-show-status) .bi-msg-line3 {
    font-size: 25px;
  }
  .bi-taunt-status-label,
  .bi-taunt-status-stars {
    font-size: 26px;
    line-height: 1.45;
  }
}

.bi-encounter-overlay {
  position: absolute;         inset: 0;
  z-index: 10480;
  pointer-events: none;
  overflow: hidden;
  background: #1a1a18;        }

.bi-enc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bi-encounter-wipes {
  position: absolute;
  inset: 0;
  z-index: 1;                 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;
  }
}
.sb-result-reward-cond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DotGothic16', sans-serif;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 48%, #a9a9a9 100%);
  border: 1px solid #111;
  border-bottom: 2px solid #111;
  color: #111111;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(0,0,0,.18);
  min-height: 21px;
  height: 21px;
  padding: 2px 7px 3px;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  vertical-align: middle;
}


@media (min-width: 481px) {

  .sb-continue-overlay {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

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

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

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

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

  .sb-continue-actions {
    align-items: center !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
}

/* Final polish for skill wording, chapter overlays, cut-ins and selection clarity. */
@media (max-width: 480px) {
  .sb-continue-modal {
    display: flex !important;
    flex-direction: column ;
    justify-content: center !important;
    border-radius: 0 !important;
    width: 92vw ;
    max-width: 340px !important;
    height: auto !important;
    min-height: unset !important;
    padding: 52px 32px 56px !important;
    border: none !important;
  }
  .sb-continue-wins {
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 32px ;
    color: #3a2010 ;
    text-shadow: none ;
  }
  .sb-continue-title {
    font-size: 14px !important;
    color: #3a2010 !important;
    text-shadow: none !important;
  }
  .sb-continue-actions {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  .sb-coin-overlay-inner {
    margin: 0 auto;
  }

  .reversi-game.ability-battle {
    padding-top: 19px;
  }

  .reversi-game .ot-board-wrap {
    padding: 36px;
  }
}
.back-btn { display: none; }

#ot-result-overlay.ot-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 14px !important; display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px !important;
  z-index: 10 !important;
  gap: 0 !important;
}

#ot-result-overlay .ot-result-dialog {
  background: #fff;
  border: 3px solid #111;
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  animation: ot-drop .3s cubic-bezier(.22,1.4,.4,1);
}

#ot-result-overlay .ot-result-scores {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #ddd !important;
  border-radius: 14px !important;
  padding: 12px 32px !important;
  gap: 20px !important;
  width: auto !important;
}

#ot-result-overlay .ot-result-num {
  font-family: 'Fredoka One', sans-serif !important;
  font-size: clamp(36px, 9vw, 52px) !important;
  color: #111 !important;
  text-shadow: none !important;
  line-height: 1 !important;
}

#ot-result-overlay .ot-result-sub {
  color: rgba(0, 0, 0, 0.45) !important;
  font-family: 'Fredoka One', sans-serif !important;
  font-size: clamp(11px, 2.5vw, 13px) !important;
}

/* Skill selection is isolated from the older replacement-dialog cascade. */
.sb-skill-choice-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(66vw, 486px);
  height: min(704px, calc(100dvh - 24px));
  min-height: 0;
  margin: 0 auto;
  padding: 60px 50px 120px;
  overflow: hidden;
  border: 0;
  background: transparent url('https://wakabaland.com/wp-content/uploads/2026/09/reversi15.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.45));
  color: #3a2010;
  font-family: 'DotGothic16', sans-serif;
}

#reversi .sb-skill-choice-title {
  flex: 0 0 auto;
  position: static;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  color: #3a2010;
  font: 900 24px/1.15 'DotGothic16', sans-serif;
  letter-spacing: 0;
  text-align: center;
}

.sb-skill-choice-list {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: .5cm auto 12px;
  padding: 7px 7px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.sb-skill-choice-card {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  min-height: 112px;
  width: 100%;
  flex-direction: column;
  gap: 6px;
  padding: 12px 15px;
  overflow: visible;
  border: 2px solid rgba(255,255,255,.42);
  border-bottom-width: 3px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  text-align: left;
  cursor: pointer;
}

.sb-skill-choice-cat-placement { background: rgba(30,100,200,.78); border-color: rgb(20,80,180); }
.sb-skill-choice-cat-flip      { background: rgba(140,60,210,.78); border-color: rgb(120,40,190); }
.sb-skill-choice-cat-erase     { background: rgba(210,50,50,.78); border-color: rgb(190,30,30); }
.sb-skill-choice-cat-combo     { background: rgba(180,130,0,.78); border-color: rgb(160,110,0); }
.sb-skill-choice-cat-block     { background: rgba(140,80,20,.78); border-color: rgb(120,60,10); }
.sb-skill-choice-cat-hint      { background: rgba(100,100,100,.76); border-color: rgb(80,80,80); }
.sb-skill-choice-cat-guard     { background: rgba(20,160,60,.78); border-color: rgb(10,140,40); }
.sb-skill-choice-cat-null      { background: rgba(50,50,50,.80); border-color: rgb(80,80,80); }

.sb-skill-choice-card.selected {
  border-color: #d40000;
  border-width: 4px;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px #d40000,
    0 8px 18px rgba(0,0,0,.38),
    0 0 22px rgba(255,42,42,.74);
  filter: brightness(1.08) saturate(1.12);
}

.sb-skill-choice-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.sb-skill-choice-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(16px, 3.6vw, 18px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.95);
  white-space: nowrap;
}

.sb-skill-choice-rank,
.sb-skill-choice-cond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 2px 7px 3px;
  border: 1px solid #111;
  border-bottom-width: 2px;
  border-radius: 6px;
  color: #111;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.sb-skill-choice-rank {
  background: linear-gradient(#fff6a6, #f1c84d);
}

.sb-skill-choice-cond {
  background: linear-gradient(#fff, #c3c3c3);
}

.sb-skill-choice-desc {
  display: block;
  min-width: 0;
  color: #fff;
  font-size: 13.6px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 1px rgba(0,0,0,.74), 1px 0 1px rgba(0,0,0,.58), -1px 0 1px rgba(0,0,0,.58);
}

.sb-skill-choice-actions {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}

.sb-skill-choice-action {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 7px 10px 9px;
  border: 1px solid #40200f;
  border-bottom-width: 4px;
  border-radius: 999px;
  background: linear-gradient(#714124, #4e2815);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 5px 10px rgba(40,20,6,.22);
  color: #fff;
  font: 900 17px/1.1 'DotGothic16', sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 1px #1d0d05;
  cursor: pointer;
}

.sb-skill-choice-action.secondary {
  border-color: #a78d6d;
  background: linear-gradient(#f4e4c7, #e8d1ad);
  color: #3a2010;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.sb-skill-choice-actions .sb-choice-confirm-btn:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 220px);
}

.sb-skill-choice-actions .sb-choice-confirm-btn:disabled {
  opacity: .45;
  cursor: default;
}

@media (max-width: 767px) {
  .sb-skill-choice-dialog {
    width: min(92vw, 340px);
    height: min(568px, calc(100svh - 88px));
    margin-top: 0;
    padding: 44px 26px 96px;
  }

  .sb-skill-choice-title {
    margin-bottom: 7px;
    font-size: clamp(19px, 5.6vw, 22px);
  }

  .sb-skill-choice-list {
    gap: 6px;
    margin: 10px auto 8px;
    padding: 7px 6px 8px;
    scrollbar-gutter: auto;
  }

  .sb-skill-choice-card {
    min-height: 82px;
    gap: 4px;
    padding: 8px 10px;
  }

  .sb-skill-choice-name {
    font-size: clamp(14px, 4.1vw, 16px);
  }

  .sb-skill-choice-rank,
  .sb-skill-choice-cond {
    min-height: 19px;
    padding: 2px 5px 3px;
    font-size: 10px;
  }

  .sb-skill-choice-desc {
    font-size: clamp(10px, 2.75vw, 12px);
    line-height: 1.3;
  }

  .sb-skill-choice-action {
    min-height: 42px;
    font-size: clamp(14px, 4.2vw, 17px);
  }
}

@media (max-width: 380px) and (max-height: 640px) {
  .sb-skill-choice-dialog {
    height: calc(100svh - 72px);
    padding: 36px 22px 100px;
  }

  .sb-skill-choice-title {
    margin-bottom: 5px;
    font-size: 18px;
  }

  .sb-skill-choice-list {
    gap: 5px;
    margin: 7px auto 6px;
  }

  .sb-skill-choice-card {
    min-height: 78px;
    gap: 3px;
    padding: 6px 8px;
  }

  .sb-skill-choice-desc {
    font-size: clamp(9px, 2.75vw, 10.5px);
    line-height: 1.22;
  }

  .sb-skill-choice-action {
    min-height: 38px;
  }
}
#reversi:has(.ot-overlay.show) {
  background-color: #000 !important;
}
#reversi:has(.ot-overlay.show)::before {
  opacity: 0 !important;
}

.sb-swap-modal {
  padding-bottom: 40px;
}

@media (min-width: 481px) {
  .sb-swap-overlay .sb-swap-modal {
    margin-top: -49px !important;
  }
}

.sb-swap-modal:not(.sb-choice-modal) .sb-swap-title {
  font-size: clamp(16px, 5vw, 22px) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}

.sb-swap-modal:not(.sb-choice-modal) .sb-swap-title {
  color: #3a2010 !important;
  text-shadow: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-incoming-label {
  display: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots-label,
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slots-sublabel {
  display: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-arrow {
  color: #5a3a20 !important;
  text-shadow: none !important;
}

.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot {
  border-radius: 10px !important;
  border: 1.5px solid rgba(255,255,255,0.08) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.filled {
  background: rgba(255,255,255,0.05) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-placement { background: rgb(30,100,200) !important;  border-color: rgb(20,80,180) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-flip      { background: rgb(140,60,210) !important;  border-color: rgb(120,40,190) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-erase     { background: rgb(210,50,50) !important;   border-color: rgb(190,30,30) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-combo     { background: rgb(180,130,0) !important;   border-color: rgb(160,110,0) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-block     { background: rgb(140,80,20) !important;   border-color: rgb(120,60,10) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-hint      { background: rgb(100,100,100) !important; border-color: rgb(80,80,80) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-guard     { background: rgb(20,160,60) !important;   border-color: rgb(10,140,40) !important; }
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.sb-swap-cat-null      { background: rgb(50,50,50) !important;    border-color: rgb(80,80,80) !important; }

.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-name {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-icon {
  text-shadow: 0 0 8px rgba(255,200,0,0.9) !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot-desc {
  color: #f0f0f0 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 2px 6px rgba(0,0,0,0.9) !important;
}

.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.empty {
  background: rgba(10,10,20,0.70) !important;
  border: 2px dashed rgba(255,255,255,0.30) !important;
  border-radius: 10px !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.empty .sb-swap-slot-name {
  color: rgba(255,255,255,0.55) !important;
  text-shadow: none !important;
}
.sb-swap-modal:not(.sb-choice-modal) .sb-swap-slot.empty .sb-swap-slot-empty-icon {
  color: rgba(255,255,255,0.45) !important;
}

.sb-swap-modal:not(.sb-choice-modal) .sb-swap-incoming-area {
  margin-top: 26px !important;
}

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