.dm-wrap { width: min(520px, 100%); }
.match-stage .dm-wrap { width: min(480px, 100%); }
.dm-board {
  --frame: linear-gradient(135deg, #5b3418, #2e1a0b);
  --frame-edge: #7a4a2466;
  --sq-light: #e9d2ad;
  --sq-dark: #8a5a32;
  --sq-last: #a8783f;
  --sq-selected: #6b8f3a;
  --hint: #d9f99d;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); aspect-ratio: 1;
  padding: 10px; border-radius: 6px;
  background: var(--frame);
  box-shadow: 0 30px 60px -30px #000, inset 0 0 0 2px var(--frame-edge), 0 0 0 1px #00000088;
}
.dm-sq { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.dm-sq.light { background: var(--sq-light); }
.dm-sq.dark { background: var(--sq-dark); }
.dm-sq svg { width: 88%; height: 88%; display: block; filter: drop-shadow(0 2px 2px #0006); transition: transform .12s; }

.dm-board.theme-arcade_checkers {
  --frame: #05040d; --frame-edge: #22e4ff; --sq-light: #0b0820; --sq-last: #2b1460; --sq-selected: #3a0f4d; --hint: #22e4ff;
  box-shadow: 0 30px 60px -30px #000, inset 0 0 0 2px #22e4ff, 0 0 26px -6px #22e4ff;
}
.dm-board.theme-arcade_checkers .dm-sq.dark { background: #120a2e; box-shadow: inset 0 0 0 1px #ff2bd655, inset 0 0 10px #ff2bd622; }
.dm-board.theme-arcade_checkers .dm-sq.light { background: linear-gradient(#22e4ff10 1px, transparent 1px) 0 0 / 100% 25%, #07051a; }

.dm-board.theme-ice_checkers {
  --frame: linear-gradient(135deg, #e0f4ff, #7cc4ea 60%, #3b82b6); --frame-edge: #ffffffaa;
  --sq-light: linear-gradient(135deg, #f7fcff, #d9eefb); --sq-dark: linear-gradient(135deg, #5aa7d6, #2c6f9f); --sq-last: #7bc0e6; --sq-selected: #1e5a87; --hint: #ffffff;
}

.dm-board.theme-circuit_checkers {
  --frame: linear-gradient(135deg, #c27a3a, #7a4314); --frame-edge: #ffb36b88;
  --sq-light: #0f3b2c; --sq-last: #1d6b4c; --sq-selected: #0e7a4f; --hint: #7dffb3;
}
.dm-board.theme-circuit_checkers .dm-sq.dark {
  background:
    linear-gradient(90deg, transparent 46%, #d9a05b88 46% 54%, transparent 54%) 0 0 / 100% 100%,
    radial-gradient(circle at 50% 50%, #d9a05b 0 9%, transparent 10%),
    #0a2a1f;
}
.dm-board.theme-circuit_checkers .dm-sq.light { background: radial-gradient(circle at 20% 20%, #7dffb322 0 6%, transparent 7%), #0f3b2c; }

.dm-board.theme-outrun_checkers {
  --frame: linear-gradient(180deg, #ffe94d, #ff7a1a 35%, #ff2bd6 70%, #6d28d9); --frame-edge: #ffffff55;
  --sq-light: #1a0b3d; --sq-last: #7a1d8a; --sq-selected: #a3168f; --hint: #ffe94d;
  box-shadow: 0 30px 60px -30px #000, inset 0 0 0 2px #ffffff55, 0 0 34px -8px #ff2bd6;
}
.dm-board.theme-outrun_checkers .dm-sq.dark { background: linear-gradient(180deg, #ff2bd6, #7c1fa8 60%, #2a0b5c); }
.dm-board.theme-outrun_checkers .dm-sq.light {
  background: linear-gradient(#22e4ff33 1px, transparent 1px) 0 0 / 100% 33%, linear-gradient(90deg, #22e4ff33 1px, transparent 1px) 0 0 / 33% 100%, #140832;
}

.dm-board.theme-throne_checkers {
  --frame: linear-gradient(135deg, #b8860b, #f5c96a 50%, #8a6408); --frame-edge: #f5c96a;
  --sq-light: linear-gradient(135deg, #f4efe6, #d9d2c3); --sq-last: #3d3524; --sq-selected: #5a4a1a; --hint: #f5c96a;
}
.dm-board.theme-throne_checkers .dm-sq.dark {
  background: linear-gradient(115deg, transparent 40%, #ffffff14 42%, transparent 44%), radial-gradient(circle at 30% 30%, #2a2a2a, #050505);
}

.dm-board:is(.theme-arcade_checkers, .theme-circuit_checkers, .theme-outrun_checkers, .theme-throne_checkers) .dm-sq svg.dm-black {
  filter: drop-shadow(0 0 2px #ffffffaa) drop-shadow(0 2px 2px #0008);
}

.dm-sq svg.set-neon_pieces.dm-white, .dm-piece-preview svg.set-neon_pieces.dm-white { filter: drop-shadow(0 0 5px #22e4ff) drop-shadow(0 2px 2px #0008); }
.dm-sq svg.set-neon_pieces.dm-black, .dm-piece-preview svg.set-neon_pieces.dm-black { filter: drop-shadow(0 0 5px #ff2bd6) drop-shadow(0 2px 2px #0008); }
.dm-sq svg.set-magma_pieces.dm-white, .dm-piece-preview svg.set-magma_pieces.dm-white { filter: drop-shadow(0 0 5px #ff9a3d) drop-shadow(0 2px 2px #0008); }
svg.set-magma_pieces .dm-cracks { filter: drop-shadow(0 0 2px #ff6a00); animation: dm-lava 2.4s ease-in-out infinite; }
svg.set-holo_pieces { animation: dm-holo 6s linear infinite; }
svg.set-royal_pieces.dm-white { filter: drop-shadow(0 0 4px #ffd36b99) drop-shadow(0 2px 2px #0007); }
svg.set-pixel_pieces { filter: none !important; image-rendering: pixelated; }
@keyframes dm-lava { 50% { stroke: #ffd36b; opacity: .75; } }
@keyframes dm-holo { to { filter: hue-rotate(360deg) drop-shadow(0 0 4px #ffffff88); } }

.dm-board .dm-sq.dark.last { background: var(--sq-last); }
.dm-sq.taken::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 2px dashed #ffffff88; }
.dm-wrap.my-turn .dm-sq.mine { cursor: pointer; }
.dm-wrap.my-turn .dm-sq.mine:hover svg { transform: translateY(-2px) scale(1.04); }
.dm-board .dm-sq.dark.selected.blocked { background: #5a1a24; box-shadow: inset 0 0 0 3px var(--red, #ff4d6d); }
.dm-hint { margin-top: 10px; padding: 8px 10px; text-align: center; color: var(--text-2); background: #000; box-shadow: 0 0 0 2px var(--border); font-size: .85rem; }
.dm-hint.warn { color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.dm-board .dm-sq.dark.selected { background: var(--sq-selected); box-shadow: inset 0 0 0 3px var(--hint); }
.dm-sq.via::before { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: color-mix(in srgb, var(--hint) 55%, transparent); }
.dm-sq.target { cursor: pointer; }
.dm-sq.target::before { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--hint); box-shadow: 0 0 12px var(--hint); animation: dm-pulse 1.2s ease-in-out infinite; }
.dm-sq.target:hover { filter: brightness(1.2); }
@keyframes dm-pulse { 50% { transform: scale(.8); opacity: .7; } }

.dm-board.mini { padding: 3px; border-radius: 4px; box-shadow: none; }
.dm-board.mini svg { filter: none; }
.replay .dm-board.mini { width: 200px; }
.dm-board.sample { width: 88px; padding: 4px; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); box-shadow: 0 8px 18px -10px #000, inset 0 0 0 1px var(--frame-edge); }
.dm-piece-preview { display: flex; align-items: center; justify-content: center; gap: 2px; }
.shop-preview .dm-piece-preview > svg { width: 44px; height: 44px; }
.dm-piece-preview svg:nth-child(2) { margin-top: -18px; }

@media (prefers-reduced-motion: reduce) {
  svg.set-holo_pieces, svg.set-magma_pieces .dm-cracks, .dm-sq.target::before { animation: none; }
}