/* make sure cube’s face-change transition is active when not spinning */
#cube {
  transition-property: transform;
  transition-timing-function: ease; /* or ease-out */
  /* transition-duration set by JS only for the final step */
}

/* The outer holder reserves the scaled layout space */
#diecontainer {
  /* Use the cube’s native 190×190 and scale it here */
  width: calc(150px * var(--die-scale));
  height: calc(150px * var(--die-scale));
  margin: 0 auto;
  perspective: 800px;
  overflow: visible;
  position: fixed;   /* or absolute if you want it relative to another container */
  top: 8;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 2000; 
  cursor: pointer;
}

/* Scale the visual content while keeping internal math untouched */
#diecontainer .cube-container {
  width: 150px;   /* native size */
  height: 150px;  /* native size */
  transform: scale(var(--die-scale));
  transform-origin: center center;
}

/* If you spin #diecontainer (as in your current roll), spin composes fine with the child’s scale */
#diecontainer.spin {
  animation-name: d20-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* animation-duration set via JS */
}

/* for sidebar collapse button */
@keyframes mr-stroke{
    0%   { stroke-dashoffset: 295; stroke-dasharray: 25 270; }
    50%  { stroke-dashoffset: 68;  stroke-dasharray: 59 236; }
    65%  { stroke-dashoffset: 59;  stroke-dasharray: 59 236; }
    100% { stroke-dashoffset: 68;  stroke-dasharray: 59 236; }
}
@keyframes mr-stroke-rev{
    0%   { stroke-dashoffset: 68;  stroke-dasharray: 59 236; }
    50%  { stroke-dashoffset: 290; stroke-dasharray: 25 270; }
    65%  { stroke-dashoffset: 295; stroke-dasharray: 25 270; }
    100% { stroke-dashoffset: 290; stroke-dasharray: 25 270; }
}

.cube-container {
    -webkit-perspective: 1000;
    perspective: 1000;
    margin: -50px 0 0 -45px; /* half of 190 */
}

  #cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    -webkit-transform:  translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg );
        transform:  translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg );
    -webkit-transition: -webkit-transform 1s ease-in-out;
        transition: transform 1s ease-in-out;
  }

#cube figure,
#cube_figure {
  width: 159px;
  height: 158px;
  display: block;
  position: absolute;

  /* CSS var first, fallback points from /css/ to /dice/ */
  background-image: var(--dice-skin, url('../dice/brown.png'));
  background-position: top center;
  background-repeat: no-repeat;

  font-size: 60px;
  line-height: 150px;
  text-align: center;
  text-shadow: #000 -1px -1px 0, #fff 1px 1px 0;
  color: #f1f1f1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

    .dieFont {
        font-size: 64px !important;
        text-align: center !important;
    }

    /* top 5 point */
    #cube .face01  { -webkit-transform: rotateY(  36deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY(  36deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face06  { -webkit-transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); }
    #cube .face08  { -webkit-transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px ); }
    #cube .face04  { -webkit-transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px ); }
    #cube .face10  { -webkit-transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ(   0deg ) translateZ( 120px ); }

    /* bottom 5 point */
    #cube .face18  { -webkit-transform: rotateY(   0deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); transform: rotateY(   0deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); }
    #cube .face16  { -webkit-transform: rotateY(  72deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); transform: rotateY(  72deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); }
    #cube .face11  { -webkit-transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face20  { -webkit-transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face14  { -webkit-transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ(  60deg ) translateZ( 120px ); }

    /* middle point down */
    #cube .face13  { -webkit-transform: rotateY(  36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY(  36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face09  { -webkit-transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); }
    #cube .face02  { -webkit-transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); }
    #cube .face05  { -webkit-transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px ); }
    #cube .face17  { -webkit-transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px ); }

    /* middle point up */
    #cube .face12  { -webkit-transform: rotateY(   0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY(   0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); }
    #cube .face19  { -webkit-transform: rotateY(  72deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY(  72deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face03  { -webkit-transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face07  { -webkit-transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ(   0deg ) translateZ( 120px ); }
    #cube .face15  { -webkit-transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px ); }

    #cube.show-1   { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(  -38deg ) rotateZ(   35deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(  -38deg ) rotateZ(   35deg ); }
    #cube.show-2   { -webkit-transform: translateZ( -60px ) rotateY(  170deg ) rotateX(  5deg ) rotateZ(  -60deg ); transform: translateZ( -60px ) rotateY(  170deg ) rotateX(  5deg ) rotateZ(  -60deg ); }
    #cube.show-3   { -webkit-transform: translateZ( -60px ) rotateY( -144deg ) rotateX(   -8deg ) rotateZ(   -6deg ); transform: translateZ( -60px ) rotateY( -144deg ) rotateX(   -8deg ) rotateZ(   -6deg ); }
    #cube.show-4   { -webkit-transform: translateZ( -60px ) rotateY(   76deg ) rotateX(  135deg ) rotateZ(  -62deg ); transform: translateZ( -60px ) rotateY(   76deg ) rotateX(  135deg ) rotateZ(  -62deg ); }
    #cube.show-5   { -webkit-transform: translateZ( -60px ) rotateY(  118deg ) rotateX(  -53deg ) rotateZ(  -35deg ); transform: translateZ( -60px ) rotateY(  118deg ) rotateX(  -53deg ) rotateZ(  -35deg ); }
    #cube.show-6   { -webkit-transform: translateZ( -60px ) rotateY(  -75deg ) rotateX(  135deg ) rotateZ(   65deg ); transform: translateZ( -60px ) rotateY(  -75deg ) rotateX(  135deg ) rotateZ(   65deg ); }
    #cube.show-7   { -webkit-transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  187deg ) rotateZ(  185deg ); transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  187deg ) rotateZ(  185deg ); }
    #cube.show-8   { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -153deg ) rotateZ(   75deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -153deg ) rotateZ(   75deg ); }
    #cube.show-9   { -webkit-transform: translateZ( -60px ) rotateY(  -73deg ) rotateX( -175deg ) rotateZ(   15deg ); transform: translateZ( -60px ) rotateY(  -73deg ) rotateX( -175deg ) rotateZ(   15deg ); }
    #cube.show-10  { -webkit-transform: translateZ( -60px ) rotateY(   51deg ) rotateX(  -42deg ) rotateZ(  -41deg ); transform: translateZ( -60px ) rotateY(   51deg ) rotateX(  -42deg ) rotateZ(  -41deg ); }
    #cube.show-11  { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -220deg ) rotateZ(  -37deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX( -220deg ) rotateZ(  -37deg ); }
    #cube.show-12  { -webkit-transform: translateZ( -60px ) rotateY(  -10deg ) rotateX(   -4deg ) rotateZ( -120deg ); transform: translateZ( -60px ) rotateY(  -10deg ) rotateX(   -4deg ) rotateZ( -120deg ); }
    #cube.show-13  { -webkit-transform: translateZ( -60px ) rotateY(   35deg ) rotateX(  4deg ) rotateZ( -177deg ); transform: translateZ( -60px ) rotateY(   35deg ) rotateX(  4deg ) rotateZ( -177deg ); }
    #cube.show-14  { -webkit-transform: translateZ( -60px ) rotateY( -296deg ) rotateX(   72deg ) rotateZ(   30deg ); transform: translateZ( -60px ) rotateY( -296deg ) rotateX(   72deg ) rotateZ(   30deg ); }
    #cube.show-15  { -webkit-transform: translateZ( -60px ) rotateY( -238deg ) rotateX(  129deg ) rotateZ(   40deg ); transform: translateZ( -60px ) rotateY( -238deg ) rotateX(  129deg ) rotateZ(   40deg ); }
    #cube.show-16  { -webkit-transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ(  113deg ); transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ(  113deg ); }
    #cube.show-17  { -webkit-transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  8deg ) rotateZ(  175deg ); transform: translateZ( -60px ) rotateY(  -37deg ) rotateX(  8deg ) rotateZ(  175deg ); }
    #cube.show-18  { -webkit-transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(   25deg ) rotateZ(  288deg ); transform: translateZ( -60px ) rotateY(  -50deg ) rotateX(   25deg ) rotateZ(  288deg ); }
    #cube.show-19  { -webkit-transform: translateZ( -60px ) rotateY(  -72deg ) rotateX(  4deg ) rotateZ(  352deg ); transform: translateZ( -60px ) rotateY(  -72deg ) rotateX(  4deg ) rotateZ(  352deg ); }
    #cube.show-20  { -webkit-transform: translateZ( -60px ) rotateY(   50deg ) rotateX( -220deg ) rotateZ(   38deg ); transform: translateZ( -60px ) rotateY(   50deg ) rotateX( -220deg ) rotateZ(   38deg ); }



#diecontainer.spin {
  animation-name: d20-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* duration is set inline from JS per step */
}

@keyframes d20-spin {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(720deg); } /* 1x X, 2x Y per cycle */
}

/* (optional) make sure cube’s face transition is what you want */
#cube {
  transition-property: transform;
  transition-timing-function: ease; /* or ease-out; JS sets duration per step */
}

/* continuous linear spin applied directly to #cube */
#cube.spinning {
  animation-name: d20-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* duration is set inline by JS for each step */
  will-change: transform;
}

@keyframes d20-spin {
  from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to   { transform: rotateX(360deg) rotateY(720deg) rotateZ(0deg); }
}

.criticalHit {
  position: absolute;
  top: 55px;
  left: 85px;
  width: 200px;
  height: 35px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;         
  display: inline-block;        
  transform: translateZ(0);  
}

.criticalInner {
  transform: skewX(-15deg); /* Skews the div horizontally */
  transform-origin: bottom left;
}

.criticalHit.crit-visible { opacity: 1; }

/* centered, symmetric shake + zoom (3D to avoid subpixel bias) */
@keyframes shake-zoom-centered {
  0%   { transform: translate3d(0,0,0) scale(1); }
  10%  { transform: translate3d(-8px,-4px,0) scale(1.10) rotate(-2deg); }
  20%  { transform: translate3d( 8px, 4px,0) scale(0.95) rotate( 2deg); }
  30%  { transform: translate3d(-7px, 6px,0) scale(1.10) rotate(-3deg); }
  40%  { transform: translate3d( 7px,-6px,0) scale(0.92) rotate( 3deg); }
  50%  { transform: translate3d(-6px, 5px,0) scale(1.08) rotate(-2deg); }
  60%  { transform: translate3d( 6px,-5px,0) scale(0.96) rotate( 2deg); }
  70%  { transform: translate3d(-5px, 4px,0) scale(1.05) rotate(-1.5deg); }
  80%  { transform: translate3d( 5px,-4px,0) scale(0.98) rotate( 1.5deg); }
  90%  { transform: translate3d(-3px, 2px,0) scale(1.03) rotate(-1deg); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

.criticalHit.shake {
  animation: shake-zoom-centered 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .criticalHit, .criticalHit.shake {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Wrap (optional but recommended) */
.crit-wrap {
  display: inline-block;          /* stable box */
  position: relative;
  line-height: 1;                 /* avoid extra vertical wiggle */
}

/* Badge itself */
.criticalHit {
  position: fixed !important;
  top: 10px;
  left: 65px;
  width: 150px;
  z-index: 9999;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  opacity: 0;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  transform: translateZ(0);
  transition: opacity .25s ease;
  border-color: var(--primary-800);
}

/* Visible state */
.criticalHit.crit-visible {
  opacity: 1;
}


.criticalHit.crit-visible { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); }
.criticalHit.shake { box-shadow: 0 0 0 1px rgba(0,0,0); }