.ecr-gameboard{width:100%;user-select:none}
.ecr-gameboard__board{
  position:relative;width:100%;height:650px;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#fff;
  border-radius:14px;overflow:hidden;border:2px solid rgba(0,0,0,.12)
}
.ecr-gameboard__tokens{
  position:absolute;
  inset:0;
  z-index:6;
  isolation:isolate;
}

.ecr-gameboard__token{ z-index:1; }

/* Make sure tokens render ABOVE the glass layer
.ecr-gameboard__token{
  position: absolute;
  z-index: 1;
} */

.ecr-gameboard__token{
  position:absolute;width:64px;height:64px;cursor:grab;touch-action:none;z-index:1
}


.ecr-gameboard__token:active{cursor:grabbing}
.ecr-gameboard__token img{
  width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))
}
.ecr-gameboard__token.is-active{
  outline: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,.75);
  border-radius: 14px;
}
/* 
.ecr-gameboard__dice{
  position:absolute;right:14px;bottom:14px;display:flex;gap:10px;align-items:center;
  background:rgba(255,255,255,.85);border-radius:14px;padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);z-index:10
} */
.ecr-gameboard__dice-face{
  width:76px;height:76px;border-radius:14px;background:#fff;display:grid;place-items:center;
  border:2px solid rgba(0,0,0,.12);cursor:pointer;overflow:hidden
}
.ecr-gameboard__dice-face img{width:100%;height:100%;object-fit:contain;display:block}
.ecr-gameboard__dice-fallback{font-size:28px;font-weight:800;color:#111}
.ecr-gameboard__dice-meta{font-size:13px;line-height:1.2;color:#111}
.ecr-gameboard__controls{margin-top:10px;display:flex;gap:10px}
.ecr-gameboard__controls button{
  padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);
  background:#fff;cursor:pointer
}



/* --- CSS Dice (pips) --- */
.ecr-dice {
  position: relative;
  border-radius: 14px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

.ecr-dice__pip {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #111; /* pip color (can be overridden by Elementor control) */
  opacity: 0;       /* hidden by default; JS will show the right ones */
  transform: translate(-50%, -50%);
}

/* pip positions */
.ecr-dice__pip[data-pos="tl"] { left: 25%; top: 25%; }
.ecr-dice__pip[data-pos="tr"] { left: 75%; top: 25%; }
.ecr-dice__pip[data-pos="ml"] { left: 25%; top: 50%; }
.ecr-dice__pip[data-pos="c"]  { left: 50%; top: 50%; }
.ecr-dice__pip[data-pos="mr"] { left: 75%; top: 50%; }
.ecr-dice__pip[data-pos="bl"] { left: 25%; top: 75%; }
.ecr-dice__pip[data-pos="br"] { left: 75%; top: 75%; }

/* roll animation feel */
.ecr-dice.is-rolling {
  animation: ecrDiceWobble 0.12s linear infinite;
}
@keyframes ecrDiceWobble {
  0% { transform: rotate(-2deg) scale(0.99); }
  50% { transform: rotate(2deg) scale(1.01); }
  100% { transform: rotate(-2deg) scale(0.99); }
}


.ecr-gameboard__turnhud{
  position:absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;

  padding: 10px 16px;
  border-radius: 999px;

  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ecr-gameboard__turnhud-text{
  display:block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  white-space: nowrap;
}

.ecr-gameboard__dice,
.ecr-gameboard__dice2{
  position: static;
  right: auto;
  bottom: auto;
  padding: 10px;
  background: rgba(255,255,255,.85);
  border-radius: 14px;
  /* border: 1px solid rgba(0,0,0,.12); */
  display:flex;
  align-items:center;
}

/* Image dice face: match coded dice border/shadow */
.ecr-gameboard__dice2-face{
  width:76px;
  height:76px;
  border-radius:14px;
  background:#fff;

  display:grid;
  place-items:center;

  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);

  cursor:pointer;
  overflow:hidden;
}

.ecr-gameboard__dice2-face img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}


.ecr-gameboard__dice2-fallback{
  font-size:22px;
  font-weight:800;
  color:#111;
}

.ecr-gameboard__dice2-face.is-rolling{
  animation:ecrDiceWobble 0.12s linear infinite;
}

.ecr-gameboard__dicewrap{
  position:absolute;
  right:14px;
  bottom:14px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index:10;
}



.ecr-boardgame__token{
  background: transparent !important;
  border-radius: 14px !important;
  overflow: hidden; /* makes corners actually round */
}

/* Make image inherit the rounding */
.ecr-boardgame__token img{
  border-radius: inherit !important;
  background: transparent !important;
}

/* Optional: if the "grayish" is actually the drop-shadow halo, reduce/remove it */
.ecr-boardgame__token img{
  /* filter: none !important; */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)) !important;
}