/**
 * シンプルなサイコロスタイル
 */

/* 3Dコンテナ */
.wts-dice-3d-css {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px 20px;
    flex-wrap: wrap;
}

/* サイコロのラッパー */
.wts-dice-wrapper {
    perspective: 1000px;
    display: inline-block;
}

/* サイコロ本体 */
.wts-dice-cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.wts-dice-cube.rolling {
    animation: diceRoll 2s ease-out;
}

@keyframes diceRoll {
    0% { transform: rotateX(0) rotateY(0); }
    100% { transform: rotateX(720deg) rotateY(720deg); }
}

/* サイコロの面 */
.wts-dice-face {
    position: absolute;
    width: 100px;
    height: 100px;
    background: white;
    border: 2px solid #333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-weight: bold;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* D6サイコロの面の配置 */
.wts-dice-face.face-1 { transform: rotateY(0deg) translateZ(50px); }
.wts-dice-face.face-2 { transform: rotateY(90deg) translateZ(50px); }
.wts-dice-face.face-3 { transform: rotateY(180deg) translateZ(50px); }
.wts-dice-face.face-4 { transform: rotateY(-90deg) translateZ(50px); }
.wts-dice-face.face-5 { transform: rotateX(90deg) translateZ(50px); }
.wts-dice-face.face-6 { transform: rotateX(-90deg) translateZ(50px); }

/* ドットスタイル */
.wts-dice-dots {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 15px;
}

.wts-dice-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #333;
    border-radius: 50%;
}

/* 1の面のドット配置 */
.wts-dice-dots.dots-1 .wts-dice-dot:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 2の面のドット配置 */
.wts-dice-dots.dots-2 .wts-dice-dot:nth-child(1) {
    top: 20%;
    left: 20%;
}
.wts-dice-dots.dots-2 .wts-dice-dot:nth-child(2) {
    bottom: 20%;
    right: 20%;
}

/* 3の面のドット配置 */
.wts-dice-dots.dots-3 .wts-dice-dot:nth-child(1) {
    top: 20%;
    left: 20%;
}
.wts-dice-dots.dots-3 .wts-dice-dot:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.wts-dice-dots.dots-3 .wts-dice-dot:nth-child(3) {
    bottom: 20%;
    right: 20%;
}

/* 4の面のドット配置 */
.wts-dice-dots.dots-4 .wts-dice-dot:nth-child(1) { top: 20%; left: 20%; }
.wts-dice-dots.dots-4 .wts-dice-dot:nth-child(2) { top: 20%; right: 20%; }
.wts-dice-dots.dots-4 .wts-dice-dot:nth-child(3) { bottom: 20%; left: 20%; }
.wts-dice-dots.dots-4 .wts-dice-dot:nth-child(4) { bottom: 20%; right: 20%; }

/* 5の面のドット配置 */
.wts-dice-dots.dots-5 .wts-dice-dot:nth-child(1) { top: 20%; left: 20%; }
.wts-dice-dots.dots-5 .wts-dice-dot:nth-child(2) { top: 20%; right: 20%; }
.wts-dice-dots.dots-5 .wts-dice-dot:nth-child(3) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wts-dice-dots.dots-5 .wts-dice-dot:nth-child(4) { bottom: 20%; left: 20%; }
.wts-dice-dots.dots-5 .wts-dice-dot:nth-child(5) { bottom: 20%; right: 20%; }

/* 6の面のドット配置 */
.wts-dice-dots.dots-6 .wts-dice-dot:nth-child(1) { top: 20%; left: 20%; }
.wts-dice-dots.dots-6 .wts-dice-dot:nth-child(2) { top: 20%; right: 20%; }
.wts-dice-dots.dots-6 .wts-dice-dot:nth-child(3) { top: 50%; left: 20%; transform: translateY(-50%); }
.wts-dice-dots.dots-6 .wts-dice-dot:nth-child(4) { top: 50%; right: 20%; transform: translateY(-50%); }
.wts-dice-dots.dots-6 .wts-dice-dot:nth-child(5) { bottom: 20%; left: 20%; }
.wts-dice-dots.dots-6 .wts-dice-dot:nth-child(6) { bottom: 20%; right: 20%; }

/* 結果表示の回転 */
.wts-dice-cube.show-1 { transform: rotateX(0) rotateY(0); }
.wts-dice-cube.show-2 { transform: rotateX(0) rotateY(-90deg); }
.wts-dice-cube.show-3 { transform: rotateX(0) rotateY(180deg); }
.wts-dice-cube.show-4 { transform: rotateX(0) rotateY(90deg); }
.wts-dice-cube.show-5 { transform: rotateX(-90deg) rotateY(0); }
.wts-dice-cube.show-6 { transform: rotateX(90deg) rotateY(0); }

/* D6以外のサイコロ（シンプル版） */
.wts-dice-other {
    width: 100px;
    height: 100px;
    background: white;
    border: 3px solid #333;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s;
}

.wts-dice-other.rolling {
    animation: otherRoll 1s ease-out;
}

@keyframes otherRoll {
    0% { transform: rotate(0) scale(1); }
    50% { transform: rotate(180deg) scale(0.9); }
    100% { transform: rotate(360deg) scale(1); }
}

.wts-dice-other.show-result {
    animation: bounce 0.5s ease-out;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}