/* Mini 2D die preview */
.miniDie {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: #f5f0e0;
	border: 2px solid #c8bfa0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	padding: 5px;
	gap: 3px;
	flex-shrink: 0;
	box-sizing: border-box;
}

.miniDie .pip {
	background: #1a1a1a;
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

/* === 3D DICE === */

.diceArea {
	--die-size: 9vh;
	--die-half: 4.5vh;
	position: absolute;
	top: 50%;
	left: 25%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: 1.2vh;
	align-items: center;
	z-index: 200;
	pointer-events: none;
}

.die-slot {
	width: var(--die-size);
	height: var(--die-size);
	perspective: 30vh;
	flex-shrink: 0;
	display: none;
}

.die-slot.used {
	filter: grayscale(0.85);
	opacity: 0.35;
}

.die-bounce {
	width: 100%;
	height: 100%;
	transform-origin: center bottom;
}

.die {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.die.rolling {
	transition: none;
}

.die .face {
	position: absolute;
	width: var(--die-size);
	height: var(--die-size);
	background: #f5f0e0;
	border-radius: 1.2vh;
	border: 0.15vh solid #c8bfa0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	padding: 1.2vh;
	gap: 0.4vh;
	box-shadow: inset 0 0 0.5vh rgba(0,0,0,0.12);
	backface-visibility: hidden;
}

.die .face-1 { transform: rotateY(0deg)   translateZ(var(--die-half)); }
.die .face-2 { transform: rotateX(-90deg) translateZ(var(--die-half)); }
.die .face-3 { transform: rotateY(90deg)  translateZ(var(--die-half)); }
.die .face-4 { transform: rotateY(-90deg) translateZ(var(--die-half)); }
.die .face-5 { transform: rotateX(90deg)  translateZ(var(--die-half)); }
.die .face-6 { transform: rotateY(180deg) translateZ(var(--die-half)); }

.pip {
	background: #1a1a1a;
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

.die.show-1 { transform: rotateX(0deg)   rotateY(0deg); }
.die.show-2 { transform: rotateX(90deg)  rotateY(0deg); }
.die.show-3 { transform: rotateX(0deg)   rotateY(-90deg); }
.die.show-4 { transform: rotateX(0deg)   rotateY(90deg); }
.die.show-5 { transform: rotateX(-90deg) rotateY(0deg); }
.die.show-6 { transform: rotateX(0deg)   rotateY(180deg); }

@keyframes die-shake {
	0%, 100% { transform: rotate(0deg)  translate(0, 0); }
	12%       { transform: rotate(-7deg) translate(-4%, 2%); }
	25%       { transform: rotate(5deg)  translate(3%, -4%); }
	37%       { transform: rotate(-6deg) translate(-3%, 1%); }
	50%       { transform: rotate(8deg)  translate(4%, 3%); }
	62%       { transform: rotate(-4deg) translate(-2%, -3%); }
	75%       { transform: rotate(6deg)  translate(3%, 2%); }
	87%       { transform: rotate(-3deg) translate(-2%, 1%); }
}

.die-bounce.shaking {
	animation: die-shake 0.45s ease-in-out infinite;
}

@keyframes die-land {
	0%   { transform: scale(1.25) translateY(-10%); }
	55%  { transform: scale(0.88) translateY(6%); }
	75%  { transform: scale(1.06) translateY(-2%); }
	90%  { transform: scale(0.97) translateY(1%); }
	100% { transform: scale(1)    translateY(0); }
}

.die-bounce.landing {
	animation: die-land 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

body.black .die .face {
	background: #1e1e1e;
	border-color: #444;
	box-shadow: inset 0 0 0.5vh rgba(255,255,255,0.06);
}

body.black .pip {
	background: #e8e0d0;
}

@media (max-width:567px) {
	.diceArea { --die-size: 7vh; --die-half: 3.5vh; }
}