/* A real six-sided CSS cube, shared by every dice game. No images or frame traffic. */
.salon-dice {
  --die-size:52px; --die-half:calc(var(--die-size)/2);
  position:relative; width:calc(var(--die-size)*1.9); height:calc(var(--die-size)*1.9);
  display:grid; place-items:center; perspective:650px; pointer-events:none;
}
.dice-toss, .dice-view, .dice-cube { width:var(--die-size); height:var(--die-size); transform-style:preserve-3d; }
.dice-toss { position:relative; }
.dice-view { transform:rotateX(-18deg) rotateY(24deg); }
.dice-cube { transform:rotateX(var(--dice-x)) rotateY(var(--dice-y)); }
.dice-side {
  position:absolute; inset:0; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); gap:8%; padding:16%;
  border:2px solid #f2e2c4; border-radius:19%; backface-visibility:hidden;
  background:linear-gradient(145deg,#fffdf5 0%,#f6ead2 42%,#d9c39d 100%);
  box-shadow:inset 0 0 0 2px #fff9e8,inset 0 -5px 7px #84663d40,0 2px 5px #160c11aa;
}
.dice-side::before { content:""; position:absolute; inset:4px; border:1px solid #c5a87388; border-radius:14%; box-shadow:inset 0 0 12px #fff7dc88; pointer-events:none; }
.dice-side i { display:block; border-radius:50%; background:radial-gradient(circle at 32% 27%,#c86e59 0 8%,#8f2f32 32%,#4d1e2a 78%); box-shadow:inset 0 2px 3px #2b1018aa,0 1px 0 #fffaf0; }
.dice-side-1 { transform:translateZ(var(--die-half)); }
.dice-side-6 { transform:rotateY(180deg) translateZ(var(--die-half)); }
.dice-side-2 { transform:rotateX(90deg) translateZ(var(--die-half)); }
.dice-side-5 { transform:rotateX(-90deg) translateZ(var(--die-half)); }
.dice-side-3 { transform:rotateY(90deg) translateZ(var(--die-half)); }
.dice-side-4 { transform:rotateY(-90deg) translateZ(var(--die-half)); }
.dice-shadow { position:absolute; width:70%; height:22%; bottom:9%; border-radius:50%; background:radial-gradient(ellipse,#170d13aa,transparent 70%); transform:rotate(-8deg); }
.dice-wait { color:var(--accent); font-size:24px; letter-spacing:4px; }
.salon-dice.is-rolling .dice-cube { animation:dice-tumble var(--dice-duration) cubic-bezier(.13,.5,.4,1) both; animation-delay:var(--dice-delay); }
.salon-dice.is-rolling .dice-toss { animation:dice-bounce var(--dice-duration) linear both; animation-delay:var(--dice-delay); }
.salon-dice.is-rolling .dice-shadow { animation:dice-contact var(--dice-duration) linear both; animation-delay:var(--dice-delay); }
@keyframes dice-tumble {
  0% { transform:rotateX(calc(var(--dice-x) - 1440deg)) rotateY(calc(var(--dice-y) - 1800deg)) rotateZ(calc(var(--dice-z) - 540deg)) scale(.78); }
  18% { transform:rotateX(calc(var(--dice-x) - 1130deg)) rotateY(calc(var(--dice-y) - 1460deg)) rotateZ(calc(var(--dice-z) - 410deg)) scale(.88); }
  45% { transform:rotateX(calc(var(--dice-x) - 720deg)) rotateY(calc(var(--dice-y) - 900deg)) rotateZ(calc(var(--dice-z) - 180deg)) scale(1.04); }
  72% { transform:rotateX(calc(var(--dice-x) - 360deg)) rotateY(calc(var(--dice-y) - 450deg)) rotateZ(calc(var(--dice-z) - 36deg)) scale(.97); }
  90% { transform:rotateX(calc(var(--dice-x) - 12deg)) rotateY(calc(var(--dice-y) - 8deg)) rotateZ(calc(var(--dice-z) + 5deg)) scale(1.015); }
  100% { transform:rotateX(var(--dice-x)) rotateY(var(--dice-y)) rotateZ(var(--dice-z)) scale(1); }
}
@keyframes dice-bounce {
  0% { transform:translate3d(-22%,0,0) rotateZ(-28deg) scale(.85); }
  22% { transform:translate3d(-6%,-48%,35px) rotateZ(18deg); }
  52% { transform:translate3d(13%,8%,0) rotateZ(-12deg) scale(1.05,.95); }
  70% { transform:translate3d(5%,-16%,12px) rotateZ(7deg); }
  84% { transform:translate3d(0,3%,0) rotateZ(-3deg); }
  93% { transform:translate3d(0,-4%,0); }
  100% { transform:none; }
}
@keyframes dice-contact { 0%,52%,84%,100% { opacity:1; scale:1; } 22% { opacity:.4; scale:.65; } 70% { opacity:.7; scale:.8; } }






.board-center .salon-dice { --die-size:clamp(24px,6dvh,48px); }
@media (prefers-reduced-motion:reduce) {
  body:not([data-dice-animation="on"]) .salon-dice.is-rolling :is(.dice-cube,.dice-toss,.dice-shadow) { animation:none; }
}
body[data-dice-animation="off"] .salon-dice.is-rolling :is(.dice-cube,.dice-toss,.dice-shadow) { animation:none; }
/* An explicit choice in the app can enable dice motion on a remote desktop. */
body[data-dice-animation="on"] .salon-dice.is-rolling :is(.dice-cube,.dice-toss,.dice-shadow) { animation-duration:var(--dice-duration) !important; }