/* --- damas: tablero de madera-sticker, fichas-moneda apiladas, panel de scrapbook --- */
.damas { --turn: var(--tomato); display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 30px; align-items: start; -webkit-tap-highlight-color: transparent; }
.dm-board { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.damas button { touch-action: manipulation; min-height: 44px; }

/* ---- tablero ---- */
.dm-stage { display: grid; place-items: center; }
.dm-frame {
  position: relative; width: min(100%, calc(100vh - 110px)); min-width: 300px; padding: 30px;
  background:
    repeating-linear-gradient(98deg, #0000 0 22px, #8a4b2112 22px 25px, #0000 25px 41px, #fff3 41px 43px),
    #dd9a5c;
  border: 4px solid var(--ink); border-radius: 26px; box-shadow: var(--shadow-lg);
  transform: rotate(-.6deg);
}
.dm-frame::before { /* cinta de papel arriba */
  content: ''; position: absolute; top: -15px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(2deg); z-index: 3;
  background: #ffe28acc; border-left: 2px dashed #0002; border-right: 2px dashed #0002;
}
.dm-ranks, .dm-files { position: absolute; display: flex; font-family: var(--pixel); font-size: .95rem; color: #4a2a12; pointer-events: none; }
.dm-ranks { left: 0; top: 30px; bottom: 30px; width: 30px; flex-direction: column; }
.dm-files { left: 30px; right: 30px; bottom: 0; height: 30px; }
.dm-ranks span, .dm-files span { flex: 1; display: grid; place-items: center; }

.dm-board { position: relative; width: 100%; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 #1f1a1755; background: var(--ink); }
.dm-cells { position: absolute; inset: 0; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); border-radius: 5px; overflow: hidden; }
.dm-cell { position: relative; }
.dm-cell.light { background: #fbe7c6; }
.dm-cell.dark {
  background:
    repeating-linear-gradient(72deg, #0000 0 7px, #5a2d0f1c 7px 9px, #0000 9px 15px, #ffffff14 15px 16px),
    #b7713c;
  box-shadow: inset 2px 2px 0 #ffffff26, inset -2px -2px 0 #0000001f;
}
.dm-cell.last::after { content: ''; position: absolute; inset: 0; background: var(--sun); opacity: .38; }
.dm-cell.lastTo::after { opacity: .6; }
.dm-cell.from::before { content: ''; position: absolute; inset: 7%; border: 3px dashed var(--ink); border-radius: 10px; opacity: .55; }
.dm-cell.pick { cursor: pointer; }
@media (hover: hover) { .dm-cell.pick:hover { box-shadow: inset 0 0 0 4px var(--mint); } }
.dm-cell:has(.dm-dot) { cursor: pointer; }

.dm-dot {
  position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; margin: -17% 0 0 -17%; z-index: 3; pointer-events: none;
  background: var(--mint); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink), inset 3px 3px 0 #ffffff80;
  animation: dm-dot-in .35s var(--ease-pop) both, dm-dot 1.2s ease-in-out .35s infinite;
}
.dm-dot.cap { background: var(--sun); }
@media (hover: hover) { .dm-cell:hover .dm-dot { background: var(--sheet); transform: scale(1.25); } }
@keyframes dm-dot-in { from { transform: scale(0); } }
@keyframes dm-dot { 50% { transform: scale(1.18); } }

/* ---- fichas ---- */
.dm-pcs, .dm-fx { position: absolute; inset: 0; pointer-events: none; }
.dm-pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; transition: transform .28s var(--ease-pop); z-index: 1; }
.dm-pc.moving { z-index: 6; }
.dm-pc.dying { z-index: 5; }

.dm-coin { --th: 7px; --edge: color-mix(in srgb, var(--c) 62%, #1f1a17); position: absolute; left: 12%; top: calc(11% - var(--th) / 2); width: 76%; aspect-ratio: 1; display: block; transition: transform .25s var(--ease-pop), opacity .25s, filter .25s; }
.dm-coin.king { --th: 13px; }
.dm-coin > span { position: absolute; inset: 0; border-radius: 50%; }
.dm-sh { background: var(--ink); transform: translate(3px, calc(var(--th) + 3px)); }
.dm-edge {
  border: 3px solid var(--ink); transform: translateY(var(--th));
  background: repeating-linear-gradient(90deg, var(--edge) 0 5px, color-mix(in srgb, var(--edge) 70%, #000) 5px 7px);
}
.dm-coin.king .dm-edge { /* dos monedas apiladas */
  background:
    linear-gradient(#0000 calc(100% - var(--th) / 2 - 2px), var(--ink) 0 calc(100% - var(--th) / 2 + 1px), #0000 0),
    repeating-linear-gradient(90deg, var(--edge) 0 5px, color-mix(in srgb, var(--edge) 70%, #000) 5px 7px);
}
.dm-face {
  display: grid; place-items: center; background: var(--c); border: 3px solid var(--ink);
  box-shadow: inset -3px -4px 0 #0000002b;
}
.dm-face::before { content: ''; position: absolute; inset: 17%; border-radius: 50%; border: 3px solid #1f1a1740; box-shadow: inset 2px 2px 0 #ffffff33; }
.dm-face::after { content: ''; position: absolute; left: 17%; top: 11%; width: 28%; height: 17%; border-radius: 50%; background: #fff; opacity: .7; transform: rotate(-32deg); }
.dm-crown { display: none; position: relative; z-index: 1; width: 64%; overflow: visible; transform: rotate(-6deg); }
.dm-coin.king .dm-crown { display: block; }
.dm-coin.king .dm-face::before { border-color: var(--sun); border-style: dashed; opacity: .9; }
.dm-crown-sh { fill: var(--ink); }
.dm-crown-body { fill: var(--sun); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.dm-gem { fill: var(--bubble); stroke: var(--ink); stroke-width: 2.2; }
.dm-crown-shine { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: .8; }
.dm-coin.crowned .dm-crown { animation: dm-crown .7s var(--ease-pop) both; }
@keyframes dm-crown { 0% { transform: translateY(-60%) scale(0) rotate(-40deg); } 60% { transform: translateY(4%) scale(1.25) rotate(8deg); } }

/* elegir, comer obligatorio, vista previa */
.dm-pc::before {
  content: ''; position: absolute; left: 8%; top: 12%; width: 84%; aspect-ratio: 1; border-radius: 50%;
  background: var(--sun); border: 3px dashed var(--ink); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ease-pop);
}
.dm-pc.must::before { opacity: 1; transform: scale(1); background: color-mix(in srgb, var(--tomato) 30%, var(--sun)); animation: dm-ring 1s ease-in-out infinite; }
.dm-pc.must .dm-coin { animation: dm-pulse 1s ease-in-out infinite; }
.dm-pc.sel::before, .dm-pc.lift::before { opacity: 1; transform: scale(1.04); background: var(--mint); animation: none; }
.dm-pc.sel .dm-coin, .dm-pc.lift .dm-coin { --th: 9px; transform: translateY(-14%) scale(1.06); animation: none; }
.dm-pc.sel .dm-coin.king, .dm-pc.lift .dm-coin.king { --th: 15px; }
.dm-pc.doomed .dm-coin { opacity: .45; filter: grayscale(.7); transform: scale(.85) rotate(-8deg); }
@keyframes dm-pulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9%) scale(1.07); } }
@keyframes dm-ring { 50% { transform: scale(1.12) rotate(20deg); } }

/* efectos */
.dm-poof { position: absolute; width: 12.5%; height: 12.5%; pointer-events: none; z-index: 7; }
.dm-poof svg { width: 100%; height: 100%; overflow: visible; }
.dm-burst { fill: var(--sun); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: dm-burst .6s var(--ease-pop) forwards; }
@keyframes dm-burst { 0% { transform: scale(0); } 45% { transform: scale(1.1) rotate(15deg); opacity: 1; } 100% { transform: scale(1.3) rotate(25deg); opacity: 0; } }
.dm-puff { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.5; animation: dm-puff .7s ease-out forwards; }
@keyframes dm-puff {
  0% { transform: scale(.3); }
  45% { transform: translate(calc(var(--dx) * .8), calc(var(--dy) * .8)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}
.dm-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.dm-confetti i {
  position: absolute; width: var(--w); height: var(--h); background: var(--bg); border: 1.5px solid var(--ink); border-radius: 2px;
  animation: dm-conf var(--t) cubic-bezier(.2, .6, .4, 1) var(--d) both;
}
@keyframes dm-conf {
  0% { transform: translate(0, 0) rotate(0) scale(.4); }
  30% { transform: translate(calc(var(--dx) * .6), var(--up)) rotate(calc(var(--r) * .4)) scale(1); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--fall)) rotate(var(--r)); opacity: 0; }
}
.dm-confetti.rain i { animation-name: dm-rain; animation-timing-function: linear; }
@keyframes dm-rain {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(var(--dx), var(--up)) rotate(calc(var(--r) * .5)); }
  100% { transform: translate(calc(var(--dx) * -.5), var(--fall)) rotate(var(--r)); }
}

/* ---- panel ---- */
.dm-side { display: flex; flex-direction: column; gap: 18px; }
.dm-card {
  position: relative; padding: 12px 14px; background: var(--sheet); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .35s var(--ease-pop), background-color .3s, box-shadow .3s;
}
.dm-card.turn { background: color-mix(in srgb, var(--c) 20%, var(--sheet)); transform: rotate(-1.3deg); box-shadow: var(--shadow-lg); }
.dm-who { display: flex; align-items: center; gap: 12px; }
.dm-av { position: relative; flex: none; width: 50px; height: 56px; }
.dm-av .dm-coin { left: 0; top: 0; width: 46px; --th: 6px; }
.dm-card.turn .dm-av .dm-coin { animation: dm-bob 1.4s ease-in-out infinite; }
@keyframes dm-bob { 50% { transform: translateY(-4px) rotate(-8deg); } }
.dm-name { flex: 1; min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }
.dm-name b { font-weight: 800; font-size: 1.1rem; }
.dm-name small { color: var(--ink-soft); font-weight: 600; }
.dm-cname { display: block; font-family: var(--pixel); font-size: .85rem; margin-top: 2px; }
.dm-tray {
  display: flex; flex-wrap: wrap; align-items: center; min-height: 46px; margin-top: 10px; padding: 7px 10px 9px 8px;
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--r-sm); box-shadow: inset 3px 3px 0 #1f1a1714;
}
.dm-empty { color: var(--ink-soft); font-weight: 600; padding-left: 4px; }
.dm-mini { position: relative; width: 28px; height: 30px; margin-right: -6px; }
.dm-mini:nth-child(odd) { transform: rotate(-8deg); } .dm-mini:nth-child(even) { transform: rotate(6deg) translateY(-1px); }
.dm-mini .dm-coin { left: 0; top: 0; width: 26px; --th: 3px; }
.dm-mini .dm-coin.king { --th: 5px; }
.dm-mini .dm-face, .dm-mini .dm-edge { border-width: 2px; }
.dm-mini .dm-face::before { border-width: 2px; }
.dm-mini .dm-sh { transform: translate(1.5px, calc(var(--th) + 1.5px)); }
.dm-mini.fresh { animation: dm-fresh .5s var(--ease-pop) calc(var(--d) + var(--j) * 0ms) both; }
@keyframes dm-fresh { from { transform: translateY(-30px) scale(0) rotate(-90deg); } }

.dm-tape {
  position: absolute; top: -14px; right: -8px; z-index: 2; padding: 3px 14px 4px; white-space: nowrap;
  font-family: var(--display); font-size: .95rem; color: var(--ink); line-height: 1.2;
  background: #ffe28ae6; border-left: 2px dashed #1f1a1730; border-right: 2px dashed #1f1a1730;
  box-shadow: 2px 2px 0 #1f1a1724; transform: rotate(5deg); animation: dm-tape .45s var(--ease-pop) both;
}
@keyframes dm-tape { from { transform: rotate(-12deg) scale(.4); opacity: 0; } }

.dm-mid {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--sheet);
  border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow-lg);
  border-left: 12px solid var(--turn); transition: border-color .3s, transform .35s var(--ease-pop);
}
.damas.mine .dm-mid { transform: rotate(.8deg); }
.dm-status { margin: 0; min-height: 2.3em; display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 1.25rem; line-height: 1.15; color: var(--ink-soft); }
.damas.mine .dm-status { color: var(--ink); font-size: 1.45rem; }
.dm-last { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink-soft); text-align: center; }
.dm-last:empty, .dm-quiet:empty { display: none; }
.dm-last b { font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.dm-lastdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); margin-right: 6px; vertical-align: -1px; }
.dm-chip { display: inline-block; padding: 0 8px; border-radius: 99px; background: var(--sun); border: 2px solid var(--ink); font-size: .82rem; color: var(--ink); font-weight: 800; }
.dm-offer {
  padding: 12px; background: var(--sun); border: var(--stroke); border-radius: var(--r-sm); box-shadow: var(--shadow); text-align: center;
  animation: dm-offer .5s var(--ease-pop) both;
}
.dm-offer[hidden] { display: none; }
.dm-offer p { margin: 0 0 10px; font-weight: 800; }
.dm-offer .row { justify-content: center; gap: 8px; }
.dm-offer .row button { flex: 1; min-width: 0; padding: 9px 8px; }
@keyframes dm-offer { from { transform: scale(.5) rotate(-6deg); opacity: 0; } }
.dm-btns { display: flex; flex-direction: column; gap: 10px; }
.dm-btns:empty { display: none; }
.dm-btns button { width: 100%; }
.dm-quiet { margin: 0; text-align: center; font-family: var(--pixel); font-size: .9rem; color: var(--ink-soft); }

/* fin de partida */
.dm-win h2 { margin: 10px 0 6px; }
.dm-win > .muted { margin: 0 0 18px; font-weight: 700; }
.dm-trophy { display: flex; justify-content: center; height: 130px; align-items: center; }
.dm-trophy .dm-coin { position: relative; left: auto; top: auto; width: 104px; --th: 16px; animation: dm-trophy .8s .15s var(--ease-pop) both; }
.dm-trophy .dm-coin .dm-face, .dm-trophy .dm-coin .dm-edge { border-width: 4px; }
.dm-trophy.draw .dm-coin { width: 88px; }
.dm-trophy.draw .a { transform: rotate(-12deg) translateX(10px); }
.dm-trophy.draw .b { transform: rotate(10deg) translateX(-10px); animation-delay: .3s; }
@keyframes dm-trophy { from { transform: scale(0) rotate(-40deg); } }

@media (max-width: 1000px) {
  .damas { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
  .dm-frame { padding: 24px; }
  .dm-ranks { top: 24px; bottom: 24px; width: 24px; }
  .dm-files { left: 24px; right: 24px; height: 24px; }
}
/* tablet en vertical / angosto: tablero arriba a lo ancho; abajo el estado y los dos jugadores lado a lado */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1180px) {
  .damas { grid-template-columns: 1fr; gap: 22px; }
  .dm-frame { width: min(100%, calc(100dvh - 380px)); }
  .dm-frame { padding: 24px; }
  .dm-ranks { top: 24px; bottom: 24px; width: 24px; }
  .dm-files { left: 24px; right: 24px; height: 24px; }
  .dm-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "mid mid" "them me"; gap: 16px; }
  .dm-mid { grid-area: mid; }
  .dm-them { grid-area: them; } .dm-me { grid-area: me; }
  .dm-status { min-height: 0; }
}
@media (max-width: 480px) {
  .dm-side { grid-template-columns: 1fr; grid-template-areas: "mid" "me" "them"; }
}