.cubeHolder {
    --cube-size: 80vmin;  /* Define the size once */
    --scale-factor: 0.1;
    --pos-top: 75%;
    --pos-left: 25%;
    z-index: 10;
    position: absolute;
    top: var(--pos-top);
    left: var(--pos-left);
    transform: translate(-50%, -50%) scale(var(--scale-factor));
    width: var(--cube-size);
    height: var(--cube-size);
	transition: all 0.5s ease;
}

#cubeHolderA {
    --pos-top: 75%;
    --pos-left: 25%;
}
#cubeHolderB {
    --pos-top: 75%;
    --pos-left: 50%;
}
#cubeHolderC {
    --pos-top: 75%;
    --pos-left: 75%;
}

.cube {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--cube-size);
    width: var(--cube-size);
    transition: transform 0.8s;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 0;
}

.face {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--cube-size);
    width: var(--cube-size);
    border: solid thin saddlebrown;
    background-color: LemonChiffon;
    border-radius: calc(var(--cube-size) * 0.08); /* 5% of cube size */
    /* padding: 30px; */
    padding: 4vmin;
    box-sizing: border-box;
    /* font-size: 125%; */
    font-size: 3vmin;
    overflow: hidden;   /* text that doesn't fit is clipped at the face edge, not drawn out into space */

}

.face p:first-of-type {
    margin-top: 0;
}

.nav-buttons {
    position: absolute;
    bottom: 8px;          /* Distance from bottom edge */
    left: 50%;            /* Move to horizontal center */
    transform: translateX(-50%); /* Center it perfectly */
    
    display: flex;        /* For arranging the buttons horizontally */
    gap: 8px;            /* Space between buttons */
}

.one { 
    transform: translateZ(calc(var(--cube-size) / 2));
}

.two {
    transform: translateX(calc(var(--cube-size) / 2)) rotateY(90deg);
}

.three {
    transform: translateY(calc(var(--cube-size) / -2)) rotateX(90deg);
}

.four {
    transform: translateY(calc(var(--cube-size) / 2)) rotateX(-90deg);
}

.five {
    transform: translateX(calc(var(--cube-size) / -2)) rotateY(-90deg);
}

.six {
    transform: translateZ(calc(var(--cube-size) / -2)) rotateY(180deg);
}

/* Interior planes: same look as a face, but not pushed out to the surface.
   They cross at the center so the die reads as solid when glimpsed at an angle.
   98% size keeps their edges just inside the faces to avoid z-fighting. */
.core {
    position: absolute;
    top: 1%;
    left: 1%;
    width: 98%;
    height: 98%;
    background-color: LemonChiffon;
    border-radius: calc(var(--cube-size) * 0.08);
}

.core-xy { transform: none; }
.core-yz { transform: rotateY(90deg); }
.core-xz { transform: rotateX(90deg); }

.pip {
  position: absolute;
  width: 15%;
  height: 15%;
  background-color: rgba(128, 128, 128, 0.3); /* faint gray */
  border-radius: 50%;
  z-index: 0; /* behind content */
}

/* Position each pip */
.pip-tl { top: 15%; left: 15%; }
.pip-tr { top: 15%; right: 15%; }
.pip-mr { top: 42.5%; right: 15%; }
.pip-ml { top: 42.5%; left: 15%; }
.pip-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pip-bl { bottom: 15%; left: 15%; }
.pip-br { bottom: 15%; right: 15%; }



.p1 {

}

.p2 {

}

.p3 {

}

.p4 {

}

.p5 {

}

.p6 {

}

.p7 {

}

.p8 {

}

.p9 {

}

.p10 {

}

.p11 {

}

.p12 {

}

.p13 {

}

.p14 {

}

.p15 {

}

.p16 {

}

.p17 {

}

.p18 {

}

.LR-corner-image {
    float: right;
    height: 60%;
    width: auto;
    margin-left: 12px;
    
    /* Push image to bottom */
    margin-top: 35%;
    
    shape-outside: margin-box;
    shape-margin: 4px;
}

/* Holding H hides the dice and buttons so the whole map shows (see setPeek in interface.js) */
.peek .cubeHolder,
.peek .button-stack {
    opacity: 0;
    pointer-events: none;
}

.button-stack {
    transition: opacity 0.3s ease;
}