/* V323: supplied two-image cup with dice sandwiched between back and front. */
body.board-view .board-wrap > .playbar,
body.board-view .playbar,
body.board-view:not(.classic-mode):not(.pawn-status-hidden) .playbar {
  display:flex!important;justify-content:center!important;align-items:center!important;
  background:transparent!important;background-image:none!important;
  box-shadow:none!important;border:0!important;border-radius:0!important;
  backdrop-filter:none!important;padding:0!important;margin:0!important;
  gap:8px!important;overflow:visible!important;
}
body.board-view .playbar.playbar-empty{display:none!important}
body.board-view .playbar [hidden], body.board-view .dice-cup-stage[hidden],
body.board-view .cup-roll-animation[hidden], body.board-view .playbar #rollBtn[hidden]{display:none!important}
body.board-view .dice-cup-stage{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:min(310px,100%)!important;height:316px!important;min-height:316px!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;background:none!important;overflow:visible!important;
}
body.board-view .playbar #rollBtn.roll-cup-button{
  display:flex!important;position:relative!important;align-items:center!important;justify-content:center!important;
  width:258px!important;height:300px!important;min-height:0!important;
  border:0!important;border-radius:0!important;padding:0!important;margin:0!important;
  background:transparent!important;box-shadow:none!important;filter:none!important;
  color:transparent!important;font-size:0!important;text-shadow:none!important;
  line-height:0!important;cursor:pointer!important;opacity:1!important;
}
body.board-view .playbar #rollBtn.roll-cup-button::before,
body.board-view .playbar #rollBtn.roll-cup-button::after{display:none!important;content:none!important}
body.board-view .playbar #rollBtn.roll-cup-button:disabled{opacity:.85!important}
body.board-view .cup-roll-animation{
  position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important;
  width:258px!important;height:300px!important;min-height:300px!important;
  background:none!important;box-shadow:none!important;overflow:visible!important;
}
/* The back, dice and front share an identical 254×300 coordinate space. */
body.board-view .cup-layers{
  position:relative!important;display:block!important;flex:none!important;
  width:254px!important;height:300px!important;overflow:visible!important;
  transform-origin:center 70%!important;
}
body.board-view .cup-layers > img{
  position:absolute!important;left:0!important;top:0!important;
  width:254px!important;height:300px!important;
  max-width:none!important;max-height:none!important;
  object-fit:fill!important;display:block!important;opacity:1!important;
  filter:none!important;border:0!important;box-shadow:none!important;
  transform:none!important;pointer-events:none!important;
}
body.board-view .cup-layers .cup-back-layer{z-index:1!important}
body.board-view .cup-layers .cup-front-layer{z-index:4!important}
body.board-view .cup-roll-animation .roll-cup-ghost{
  position:absolute!important;left:0!important;top:0!important;bottom:auto!important;
  width:254px!important;height:300px!important;max-width:none!important;max-height:none!important;
  transform:none!important;translate:none!important;scale:1!important;
  z-index:4!important;opacity:1!important;visibility:visible!important;
  background:none!important;animation:none!important;
}
body.board-view .cup-motion-layers .dice{
  position:absolute!important;top:32px!important;left:50%!important;bottom:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:12px!important;min-width:0!important;width:max-content!important;
  padding:0!important;margin:0!important;
  z-index:2!important;pointer-events:none!important;
  opacity:0!important;visibility:hidden!important;
  transform:translate(-50%,112px) scale(.7);
  animation:none!important;
}
body.board-view .cup-motion-layers .die{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:58px!important;height:58px!important;flex:0 0 58px!important;
  font-size:30px!important;border-radius:12px!important;box-sizing:border-box!important;
  background:white!important;box-shadow:0 7px 13px #0005!important;
  rotate:0deg!important;transform:none;animation:none!important;
}
body.board-view .cup-motion-layers .die .dice-svg{width:100%;height:100%}
/* Shake the complete cup (back + front), never expose dice during shake. */
body.board-view .dice-cup-stage[data-state="shake"] .cup-motion-layers{
  animation:none!important;
}
@keyframes v323CupShake{
  0%{transform:translateX(-5px) rotate(-3deg)}
  100%{transform:translateX(5px) rotate(3deg)}
}
/* The dice start INSIDE, masked by infront.png, and move through the rim. */
body.board-view .dice-cup-stage[data-state="roll"] .cup-motion-layers .dice{
  opacity:1!important;visibility:visible!important;
  animation:v323DiceRise var(--cup-dice-duration,1150ms) linear both!important;
}
@keyframes v323DiceRise{
  0%{transform:translate(-50%,112px) scale(.7);opacity:0}
  12%{transform:translate(-50%,93px) scale(.73);opacity:1}
  28%{transform:translate(-50%,65px) scale(.8);opacity:1}
  50%{transform:translate(-50%,10px) scale(.9);opacity:1}
  75%{transform:translate(-50%,-48px) scale(1);opacity:1}
  100%{transform:translate(-50%,-94px) scale(1);opacity:1}
}
body.board-view .dice-cup-stage[data-state="roll"] .cup-motion-layers .die:first-child{
  animation:v323DieSpinA var(--cup-dice-duration,1150ms) ease-out both!important;
}
body.board-view .dice-cup-stage[data-state="roll"] .cup-motion-layers .die:last-child{
  animation:v323DieSpinB var(--cup-dice-duration,1150ms) ease-out both!important;
}
@keyframes v323DieSpinA{0%{transform:rotate(-65deg)}75%{transform:rotate(290deg)}100%{transform:rotate(360deg)}}
@keyframes v323DieSpinB{0%{transform:rotate(75deg)}75%{transform:rotate(-290deg)}100%{transform:rotate(-360deg)}}
/* When the sound finishes, dice freeze just above cup while cup remains. */
body.board-view .dice-cup-stage[data-state="settled"] .cup-motion-layers .dice{
  top:-62px!important;left:50%!important;
  opacity:1!important;visibility:visible!important;
  transform:translateX(-50%)!important;
  animation:none!important;
}
body.board-view .dice-cup-stage[data-state="settled"] .cup-motion-layers .die{
  transform:none!important;animation:none!important;rotate:0deg!important;
}
body.board-view #rollToStartOverlay .rts-roll{display:none!important}
@media(max-width:760px){
  body.board-view .dice-cup-stage{height:288px!important;min-height:288px!important;width:min(290px,100%)!important}
  body.board-view .playbar #rollBtn.roll-cup-button,
  body.board-view .cup-roll-animation{height:276px!important;min-height:276px!important;width:235px!important}
  body.board-view .cup-layers{width:235px!important;height:278px!important}
  body.board-view .cup-layers>img,
  body.board-view .cup-roll-animation .roll-cup-ghost{width:235px!important;height:278px!important}
  body.board-view .cup-motion-layers .die{width:52px!important;height:52px!important;flex-basis:52px!important}
  body.board-view .cup-motion-layers .dice{gap:10px!important}
  body.board-view .dice-cup-stage[data-state="settled"] .cup-motion-layers .dice{top:-55px!important}
}
@media(prefers-reduced-motion:reduce){
  body.board-view .dice-cup-stage[data-state="shake"] .cup-motion-layers{animation:none!important}
  body.board-view .dice-cup-stage[data-state="roll"] .cup-motion-layers .dice{animation:v323GentleRise var(--cup-dice-duration,1150ms) ease-out both!important}
  body.board-view .dice-cup-stage[data-state="roll"] .cup-motion-layers .die{animation:none!important}
  @keyframes v323GentleRise{0%{transform:translate(-50%,112px);opacity:0}100%{transform:translate(-50%,-94px);opacity:1}}
}