/* =============================================================
   GAME: Breakthrough
   ============================================================= */
.board-breakthrough {
  --cell: min(calc((100vw - 72px) / 8), 56px);
  --bt-glow: #ff5c8a;
  --bt-hint: #ffd23f;
}
.bt-grid {
  position: relative; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: #1d0611;
  box-shadow: 0 0 0 2px var(--bt-glow), 0 0 26px rgba(255, 92, 138, .38);
}
.bt-sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; cursor: default; }
.bt-sq.l { background: #5a2a3f; }
.bt-sq.d { background: #2c0f1d; }
.bt-sq.movable, .bt-sq.dest, .bt-sq.cap { cursor: pointer; }
.bt-sq:focus { outline: none; }
.bt-sq:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 2; }
.bt-sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(255, 210, 63, .2); }
.bt-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(255, 92, 138, .3); box-shadow: inset 0 0 0 2px var(--bt-glow); }
.bt-sq.dest::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(255, 210, 63, .65); box-shadow: 0 0 8px rgba(255, 210, 63, .8); z-index: 2; }
.bt-sq.dest:hover::after { width: 40%; height: 40%; }
.bt-sq.cap::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 210, 63, .85), 0 0 8px rgba(255, 210, 63, .6); z-index: 2; }

.bt-rank, .bt-file { position: absolute; font: 700 calc(var(--cell) * .2)/1 var(--font-body); pointer-events: none; z-index: 1; }
.bt-rank { left: 2px; top: 2px; }
.bt-file { right: 3px; bottom: 2px; }
.bt-sq.l .bt-rank, .bt-sq.l .bt-file { color: #2c0f1d; }
.bt-sq.d .bt-rank, .bt-sq.d .bt-file { color: #b06a86; }

.bt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bt-pc { position: relative; width: 96%; height: 96%; z-index: 1; pointer-events: none; overflow: visible; transition: transform .15s, filter .15s; }
.bt-pc g { stroke-width: 1.4; stroke-linejoin: round; }
.bt-pc.p1 g { fill: url(#bt-gw); stroke: #3a2440; }
.bt-pc.p1 .crest { fill: #ff5c8a; stroke: #7a1636; }
.bt-pc.p1 { filter: drop-shadow(0 1.8px 1.2px rgba(10, 2, 6, .65)) drop-shadow(0 0 2.5px rgba(255, 255, 255, .25)); }
.bt-pc.p2 g { fill: url(#bt-gb); stroke: #ffc2d4; }
.bt-pc.p2 .crest { fill: #ffd23f; stroke: #7a5200; }
.bt-pc.p2 { filter: drop-shadow(0 1.8px 1.2px rgba(10, 2, 6, .75)) drop-shadow(0 0 3px rgba(255, 92, 138, .6)); }
.bt-sq.movable:hover .bt-pc { transform: translateY(-2px) scale(1.05); }
.bt-sq.sel .bt-pc { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 2px rgba(10, 2, 6, .6)) drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(255, 92, 138, .95)); }
.bt-sq.last .bt-pc { animation: bt-land .25s ease-out; }
@keyframes bt-land { from { transform: translateY(-4px) scale(1.06); } }

.bt-dot.p1 { background: var(--t-white); box-shadow: 0 0 0 2px #ff5c8a; }
.bt-dot.p2 { background: #3a1020; box-shadow: 0 0 0 2px #ff8fb0; }
@media (prefers-reduced-motion: reduce) { .bt-sq.last .bt-pc { animation: none; } }