/* ============================================================
   Damas — tema sunset.
   ============================================================ */

.sj-game-host:has(.dms) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
  --dms-light:         #f4f1f9;     /* casas claras */
  --dms-dark:          #5d4e75;     /* casas escuras sunset-violeta */
  --dms-light-edge:    #d9d3e8;
  --dms-dark-edge:     #463a59;
  --dms-piece-p1:      #ffffff;     /* player */
  --dms-piece-p1-edge: #b9b3c8;
  --dms-piece-p2:      #2d2438;     /* CPU */
  --dms-piece-p2-edge: #1a1424;
  --dms-king-accent:   #ffd93d;
  --dms-hint-move:     rgba(34, 197, 94, 0.55);   /* verde — movimento simples */
  --dms-hint-capture:  rgba(255, 92, 51, 0.65);   /* laranja-vermelho — captura */
  --dms-selected:      rgba(107, 91, 255, 0.45);
}
.sj-game-host:has(.dms),
body:has(.sj-game-stage) .sj-game-host:has(.dms) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.dms) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.dms {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

/* ============ Board ============ */
.dms-board-wrap {
  /* --cell setado pelo JS conforme stage */
  display: grid;
}
.dms-board {
  display: grid;
  grid-template-columns: repeat(8, var(--cell, 60px));
  grid-template-rows:    repeat(8, var(--cell, 60px));
  gap: 0;
  padding: 8px;
  background: linear-gradient(160deg, #3d2f55 0%, #1f1733 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    0 10px 30px rgba(45, 36, 56, 0.30);
  position: relative;
  touch-action: manipulation;
}
.dms-board.is-locked,
.dms-board.is-cpu-turn { cursor: default; }

/* Cada casa (clara/escura) */
.dms-cell {
  width: var(--cell, 60px);
  height: var(--cell, 60px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.dms-cell.is-light {
  background: linear-gradient(135deg, var(--dms-light) 0%, var(--dms-light-edge) 100%);
}
.dms-cell.is-dark {
  background: linear-gradient(135deg, var(--dms-dark) 0%, var(--dms-dark-edge) 100%);
  cursor: pointer;
}
.dms-cell.is-dark.is-disabled { cursor: default; }

/* Highlights de seleção/destinos */
.dms-cell.is-selected::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 14%;
  background: var(--dms-selected);
  box-shadow: inset 0 0 0 3px rgba(107, 91, 255, 0.85);
  pointer-events: none;
  z-index: 1;
}
.dms-cell.is-target-move::after,
.dms-cell.is-target-capture::after {
  content: '';
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: dms-pulse 1.4s ease-in-out infinite;
}
.dms-cell.is-target-move::after    { background: var(--dms-hint-move); }
.dms-cell.is-target-capture::after { background: var(--dms-hint-capture); }
@keyframes dms-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* ============ Peças ============ */
.dms-piece {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: calc(var(--cell, 60px) * 0.42);
  font-weight: 700;
  color: var(--dms-king-accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  z-index: 3;
  transition: transform 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;     /* clique vai pra dms-cell */
}
.dms-piece.p1 {
  background: radial-gradient(circle at 35% 30%,
    var(--dms-piece-p1) 0%, var(--dms-piece-p1-edge) 90%);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.20),
    inset 0 3px 6px rgba(255, 255, 255, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.35);
  border: 2px solid #6b5bff;
}
.dms-piece.p2 {
  background: radial-gradient(circle at 35% 30%,
    #4a3d5e 0%, var(--dms-piece-p2) 75%, var(--dms-piece-p2-edge) 100%);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.55),
    inset 0 3px 6px rgba(255, 255, 255, 0.18),
    0 2px 5px rgba(0, 0, 0, 0.35);
  border: 2px solid #1a1424;
}
.dms-piece.is-king {
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    inset 0 3px 6px rgba(255, 255, 255, 0.45),
    0 0 0 2px var(--dms-king-accent),
    0 2px 8px rgba(255, 217, 61, 0.55);
}
.dms-piece.p1:not(.is-king) { color: transparent; }    /* sem ícone em peões */
.dms-piece.p2:not(.is-king) { color: transparent; }
.dms-piece.is-moving {
  transform: translate(var(--mx, 0), var(--my, 0));
}
.dms-piece.is-captured {
  animation: dms-capture 320ms ease-in forwards;
}
@keyframes dms-capture {
  0%   { transform: scale(1);    opacity: 1; }
  60%  { transform: scale(1.25); opacity: 0.6; }
  100% { transform: scale(0.2);  opacity: 0; }
}

/* Indicador "vez da CPU" */
.dms-board.is-cpu-turn { filter: saturate(0.85); }

/* ============ Mobile ============ */
@media (max-width: 600px) {
  .dms { gap: 10px; padding: 12px; }
  .dms-board { padding: 6px; }
}