#dice-tool {
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-family: sans-serif;
    background: #fff;
    padding: 5px 25px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* Scene */
#dice-tool .dice-scene {
    width: 120px;
    height: 120px;
    margin: 30px auto;
    perspective: 600px;
}

/* Cube */
#dice-tool .dice-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.5s ease;
}

/* Faces */
#dice-tool .dice-face {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border: 1px solid #ddd;
}

/* 3D positions */
#dice-tool .dice-front  { transform: rotateY(0deg) translateZ(60px); }
#dice-tool .dice-back   { transform: rotateY(180deg) translateZ(60px); }
#dice-tool .dice-right  { transform: rotateY(90deg) translateZ(60px); }
#dice-tool .dice-left   { transform: rotateY(-90deg) translateZ(60px); }
#dice-tool .dice-top    { transform: rotateX(90deg) translateZ(60px); }
#dice-tool .dice-bottom { transform: rotateX(-90deg) translateZ(60px); }

/* Config */
#dice-tool .dice-config {
    margin-bottom: 20px;
}

#dice-tool select {
    width: 100%;
    padding: 10px;
}

/* Buttons */
#dice-tool .dice-buttons {
    display: flex;
    gap: 10px;
}

#dice-tool .dice-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}

#dice-tool .dice-btn:hover {
    text-decoration: none;
}

#dice-tool .dice-roll {
    background: green;
    color: #fff;
}

#dice-tool .dice-reset {
    background: red;
    color: #fff;
}

/* Result */
#dice-tool-result {
    margin-top: 15px;
    font-weight: bold;
}