/* Layout stays on the existing arcade board; only transform/opacity change during playback. */
.arcade-board .physics-toss-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 320px;
  min-height: 320px;
  padding: 0;
  gap: 0;
  animation: none;
}
.physics-toss-stage > [hidden] {
  display: none !important;
}
.rigid-scene {
  position: relative;
  height: 300px;
  width: 100%;
  perspective: 900px;
  contain: layout paint;
  pointer-events: none;
  isolation: isolate;
}
.rigid-world {
  position: absolute;
  left: 50%;
  top: 76%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-55deg);
}
.toss-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.toss-face {
  position: absolute;
  left: -30px;
  top: -30px;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: 1px solid #bcae94;
  background: linear-gradient(135deg, #fffdf4, #e5d6ba);
  backface-visibility: hidden;
  box-shadow: inset 0 0 5px #90795255;
}
.toss-face svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #293329;
}
.toss-face-0 {
  transform: translateZ(30px);
}
.toss-face-1 {
  transform: rotateY(180deg) translateZ(30px);
}
.toss-face-2 {
  transform: rotateY(90deg) translateZ(30px);
  background: #c6b69c;
}
.toss-face-3 {
  transform: rotateY(-90deg) translateZ(30px);
  background: #e3d4b9;
}
.toss-face-4 {
  transform: rotateX(90deg) translateZ(30px);
  background: #fff5e0;
}
.toss-face-5 {
  transform: rotateX(-90deg) translateZ(30px);
  background: #cebea1;
}
.toss-coin-face {
  position: absolute;
  left: -52px;
  top: -52px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 5px double #f4d77c;
  outline: 1px solid #86602b;
  background: radial-gradient(circle at 30% 25%, #ffedaf, #d4a645 65%, #8c622c);
  color: #60421f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 5px #bc913a;
}
.toss-coin-face span {
  font:
    46px Georgia,
    serif;
  line-height: 1;
}
.toss-coin-face small {
  font:
    6px Georgia,
    serif;
  letter-spacing: 2px;
  margin-top: 7px;
}
.coin-side-0 {
  transform: translateZ(5px);
}
.coin-side-1 {
  transform: rotateY(180deg) translateZ(5px);
}
.toss-rim {
  position: absolute;
  left: -5px;
  top: -10.5px;
  width: 10px;
  height: 21px;
  background: repeating-linear-gradient(0deg, #a87827 0 2px, #e5bc5a 2px 4px);
  backface-visibility: hidden;
}
.toss-shadow {
  position: absolute;
  left: -38px;
  top: -38px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #04150ec9, transparent 70%);
  pointer-events: none;
}
.toss-colors {
  width: 56px;
  height: 56px;
  left: -28px;
  top: -28px;
  border-radius: 50%;
  border: 1px solid #ffffff77;
  box-shadow: inset -7px -9px 12px #0006;
}
.toss-color-0 {
  background: radial-gradient(circle at 30% 25%, #ffc8b5, #e86057 40%, #802b3d);
}
.toss-color-1 {
  background: radial-gradient(circle at 30% 25%, #d7eeff, #5c9be5 40%, #274d8a);
}
.toss-color-2 {
  background: radial-gradient(circle at 30% 25%, #dbffe7, #58c18d 40%, #276744);
}
.toss-selected {
  outline: 3px solid #eac983;
  outline-offset: 4px;
}
.coin-stage.physics-toss-stage > strong {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.arcade-board .snail-runner {
  left: 0;
  transition: none;
  animation: none;
  transform-origin: 50% 90%;
}
.arcade-board #range-marker[data-physics] {
  transition: none;
}
.plinko-bins.physics-bins {
  margin-inline: 7.5%;
  margin-top: -3.235%;
  gap: 0;
}
.physics-bins > span {
  margin-inline: 1.5px;
}
.plinko-dividers {
  fill: none;
  stroke: #bcaa7c;
  stroke-width: 2;
  opacity: 0.6;
}
.plinko-contact {
  fill: #ffe4a2 !important;
}
.plinko-tail {
  fill: #ecd096;
  opacity: 0.3;
  pointer-events: none;
}
@media (max-width: 480px) {
  .arcade-board .physics-toss-stage {
    height: 285px;
    min-height: 285px;
  }
  .rigid-scene {
    height: 270px;
  }
}