/* Damas · tablero de madera pixel (casillas dos-damas-cas-*), piezas dos-damas-p/d, marcas y animaciones.
   Capas dentro de .dm-marco: tabla (casillas) → marcas (última jugada, selección, destinos) → piezas → efectos → botones. */
.dm { --cel: max(32px, min(68px, calc((100vw - 120px) / 8), calc((100vh - 380px) / 8))); --pad: 20px;
      display: flex; flex-direction: column; align-items: center; gap: 8px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dm-marco { position: relative; padding: var(--pad); border: 3px solid var(--cq-ink); border-radius: 16px;
            background: #8a5a30 repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px, rgba(60, 30, 10, .08) 9px 11px, transparent 11px 17px);
            box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #b4793f, inset 0 -6px 0 #6e4524, inset 0 4px 0 #c08a52; }
.dm-tabla { position: relative; width: calc(var(--cel) * 8); height: calc(var(--cel) * 8); border: 3px solid #3d2414; margin: -3px;
            box-shadow: 0 0 0 2px #c08a52; }
.dm-tabla svg { display: block; width: 100%; height: 100%; }
.dm-marcas, .dm-piezas, .dm-efectos, .dm-casillas { position: absolute; left: var(--pad); top: var(--pad); width: calc(var(--cel) * 8); height: calc(var(--cel) * 8); }
.dm-marcas { z-index: 1; pointer-events: none; }
.dm-piezas { z-index: 2; pointer-events: none; }
.dm-efectos { z-index: 3; pointer-events: none; }
.dm-casillas { z-index: 4; }
.dm-m, .dm-p, .dm-cas, .dm-ef { position: absolute; left: calc(var(--c) * var(--cel)); top: calc(var(--r) * var(--cel)); width: var(--cel); height: var(--cel); }

/* marcas */
.dm-m { display: grid; place-items: center; }
.dm-desde { background: rgba(255, 207, 74, .22); box-shadow: inset 0 0 0 3px rgba(255, 207, 74, .55); }
.dm-paso { background: rgba(255, 207, 74, .18); }
.dm-hasta { background: rgba(255, 207, 74, .34); box-shadow: inset 0 0 0 3px #ffcf4a; }
.dm-sel { background: rgba(255, 239, 170, .42); box-shadow: inset 0 0 0 4px #ffe27a, inset 0 0 0 6px rgba(31, 34, 64, .45); }
.dm-sel-paso { box-shadow: inset 0 0 0 3px #ffe27a; }
.dm-dest::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: #ffe27a; border: 3px solid var(--cq-ink); }
.dm-dest-ayuda::after { display: none; }
.dm-dest-ayuda svg { width: calc(var(--cel) * .62); height: calc(var(--cel) * .62); animation: dm-late 1s steps(2) infinite; }

/* piezas */
.dm-p { padding: calc(var(--cel) * .07); line-height: 0; filter: drop-shadow(0 3px 0 rgba(31, 24, 20, .45)); transition: transform .15s; }
.dm-p svg { width: 100%; height: 100%; }
.dm-elegida { transform: translateY(-9%) scale(1.08); filter: drop-shadow(0 8px 0 rgba(31, 24, 20, .4)); }
.dm-mueve { animation: dm-bote 1.1s steps(2) infinite; }
.dm-mueve::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 9%; border-radius: 50%; background: rgba(255, 226, 122, .9);
                   box-shadow: 0 0 0 2px var(--cq-ink); z-index: -1; }
.dm-vuela { z-index: 5; filter: drop-shadow(0 10px 0 rgba(31, 24, 20, .35)); }
.dm-comida { z-index: 1; }
.dm-gana { animation: dm-gana .55s steps(2) infinite; }

/* efectos: polvo al comer, corona que cae, chispas */
.dm-ef { display: grid; place-items: center; }
.dm-polvo i, .dm-chispas i { position: absolute; left: 46%; top: 46%; width: 8%; height: 8%; background: #fff2c6; box-shadow: 0 0 0 2px var(--cq-ink);
                             animation: dm-polvo .6s ease-out forwards; }
.dm-chispas i { background: #ffe27a; animation-duration: .8s; animation-delay: .35s; opacity: 0; }
.dm-polvo i:nth-child(1), .dm-chispas i:nth-child(1) { --dx: -260%; --dy: -220%; }
.dm-polvo i:nth-child(2), .dm-chispas i:nth-child(2) { --dx: 260%; --dy: -240%; }
.dm-polvo i:nth-child(3), .dm-chispas i:nth-child(3) { --dx: -240%; --dy: 220%; }
.dm-polvo i:nth-child(4), .dm-chispas i:nth-child(4) { --dx: 250%; --dy: 230%; }
.dm-corona svg { width: calc(var(--cel) * .8); height: auto; animation: dm-corona 1.1s cubic-bezier(.3, 0, .6, 1) forwards; filter: drop-shadow(0 3px 0 rgba(31, 34, 64, .4)); }

/* botones (casillas jugables) */
.dm-cas { border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 4px; }
.dm-cas:hover { background: rgba(255, 255, 255, .13); }
.dm-cas:focus-visible { outline: 3px solid #ffe27a; outline-offset: -3px; box-shadow: inset 0 0 0 6px rgba(31, 34, 64, .7); }
.dm.espera .dm-cas { cursor: default; }
.dm.espera .dm-cas:hover { background: none; }

/* marco: clavos y coordenadas */
.dm-clavo { position: absolute; width: 10px; height: 10px; background: #ffd66b; border: 2px solid var(--cq-ink); box-shadow: inset -2px -2px 0 #c7922a, inset 2px 2px 0 #fff3c4; }
.dm-c1 { left: 3px; top: 3px; } .dm-c2 { right: 3px; top: 3px; } .dm-c3 { left: 3px; bottom: 3px; } .dm-c4 { right: 3px; bottom: 3px; }
.dm-coords { position: absolute; inset: 0; pointer-events: none; font: 800 12px/1 var(--cq-body, sans-serif); color: #ffe9c4; text-shadow: 1px 1px 0 #3d2414; }
.dm-cc, .dm-cf { position: absolute; width: var(--cel); text-align: center; }
.dm-cc { left: calc(var(--pad) + var(--i) * var(--cel)); bottom: 3px; }
.dm-cf { width: var(--pad); left: 0; top: calc(var(--pad) + var(--i) * var(--cel) + var(--cel) / 2 - 6px); }

/* bandejas de piezas comidas */
.dm-bandeja { display: flex; align-items: center; gap: 0; min-height: 34px; width: calc(var(--cel) * 8 + var(--pad) * 2); padding: 3px 10px; border-radius: 12px;
              border: 3px solid var(--cq-ink); background: var(--j-l); box-shadow: 3px 3px 0 var(--j-d); }
.dm-band-t { font-weight: 800; font-size: 14px; color: var(--cq-ink); margin-right: 10px; white-space: nowrap; }
.dm-band-p { line-height: 0; margin-right: -9px; }
.dm-band-p svg { width: 24px; height: 24px; }
.dm-ayuda { min-height: 30px; margin: 2px 0 0; font-weight: 800; font-size: 16px; text-align: center; color: var(--cq-ink); }
.dm-ayuda.on, .dm-ayuda.fija { display: inline-block; background: var(--cq-yellow-l); border: 3px solid var(--cq-ink); border-radius: 999px; padding: 4px 14px; }
.dm-ayuda.on { background: var(--cq-coral-l); animation: dm-sacude .4s; }

/* configuración */
.dm-conf { width: min(620px, 100%); background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg, 22px); box-shadow: var(--cq-sh-lg, 8px 8px 0 #1f2240);
           padding: 24px 26px 22px; text-align: center; }
.dm-conf-arte { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: -6px 0 6px; line-height: 0; }
.dm-conf > p { color: var(--cq-ink2); font-size: 17px; margin: 6px 0 14px; }
.dm-espera { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; }
.dm-op { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 14px 16px; margin: 10px 0;
         background: var(--cq-bg, #fbf8f2); border: 3px solid var(--cq-ink); border-radius: 16px; }
.dm-op b { display: block; font: 800 19px/1.15 var(--cq-head); }
.dm-op small { display: block; color: var(--cq-ink2); font-size: 15px; line-height: 1.35; margin-top: 3px; }
.dm-op .cq-chips { flex: none; flex-wrap: nowrap; }
.dm-op .cq-chip { min-width: 58px; min-height: 44px; }

/* reglas con dibujos */
.dm-reglas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 10px; }
.dm-reglas figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px; border: 3px solid var(--cq-ink);
                    border-radius: 14px; background: var(--cq-bg, #fbf8f2); font-size: 15px; line-height: 1.35; }
.dm-reglas .cq-px { line-height: 0; }

@keyframes dm-bote { 50% { transform: translateY(-5%); } }
@keyframes dm-late { 50% { transform: scale(1.12); } }
@keyframes dm-gana { 50% { transform: translateY(-10%) scale(1.08); filter: brightness(1.2) drop-shadow(0 6px 0 rgba(31, 24, 20, .4)); } }
@keyframes dm-polvo { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
@keyframes dm-corona { 0% { transform: translateY(-160%) scale(.8); opacity: 0; } 35% { opacity: 1; } 60% { transform: translateY(-18%) scale(1.1); }
                       75% { transform: translateY(-30%) scale(1); } 90% { transform: translateY(-18%); opacity: 1; } 100% { transform: translateY(-18%); opacity: 0; } }
@keyframes dm-sacude { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (min-width: 1000px) {
  .dm { --cel: max(40px, min(66px, calc((100vw - 480px) / 8), calc((100vh - 330px) / 8)));
        display: grid; grid-template-columns: 170px auto 170px; grid-template-areas: "arriba marco abajo" "ayuda ayuda ayuda"; gap: 10px 18px; justify-items: center; }
  .dm-marco { grid-area: marco; }
  .dm-bandeja { width: 170px; flex-wrap: wrap; align-content: flex-start; padding: 8px 10px 10px 12px; row-gap: 4px; }
  .dm-band-t { flex-basis: 100%; margin: 0 0 2px; white-space: normal; }
  .dm-band-p svg { width: 28px; height: 28px; }
  .dm-arriba { grid-area: arriba; align-self: start; }
  .dm-abajo { grid-area: abajo; align-self: end; }
  .dm-ayuda { grid-area: ayuda; }
}
@media (max-width: 760px) {
  .dm { --pad: 17px; --cel: max(30px, min(calc((100vw - 68px) / 8), calc((100vh - 330px) / 8))); gap: 6px; }
  .dm-marco { border-radius: 12px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #b4793f, inset 0 -4px 0 #6e4524; }
  .dm-coords { font-size: 10px; }
  .dm-cc { bottom: 2px; }
  .dm-cf { top: calc(var(--pad) + var(--i) * var(--cel) + var(--cel) / 2 - 5px); }
  .dm-clavo { width: 7px; height: 7px; border-width: 2px; box-shadow: none; }
  .dm-c1 { left: 2px; top: 2px; } .dm-c2 { right: 2px; top: 2px; } .dm-c3 { left: 2px; bottom: 2px; } .dm-c4 { right: 2px; bottom: 2px; }
  .dm-bandeja { min-height: 30px; padding: 2px 8px; }
  .dm-band-t { font-size: 13px; }
  .dm-band-p svg { width: 20px; height: 20px; }
  .dm-ayuda { font-size: 14.5px; }
  .dm-conf { padding: 18px 14px; }
  .dm-op { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .dm-op .cq-chips { justify-content: flex-start; }
  .dm-reglas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-mueve, .dm-gana, .dm-dest-ayuda svg, .dm-ayuda.on { animation: none !important; }
  .dm-ef { display: none; }
}