.tool-container {
    text-align: center;
    padding: 2rem;
}

.tool-container h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.intro-text {
    font-size: 1.1rem;
    color: var(--text-secondary-color);
    margin-bottom: 2rem;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}


.dice-container {
    width: 100px;
    height: 100px;
    perspective: 600px;
    margin: 3rem auto;
}

.dice {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid var(--primary-color);
    background: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color);
}

.face::before {
    font-family: sans-serif;
}

/* Zar yüzleri ve noktaları */
.front  { transform: translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.top    { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
.right  { transform: rotateY(90deg) translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }

.front::before  { content: '⚀'; } /* 1 */
.back::before   { content: '⚅'; } /* 6 */
.top::before    { content: '⚂'; } /* 2 */
.bottom::before { content: '⚄'; } /* 5 */
.right::before  { content: '⚃'; } /* 4 */
.left::before   { content: '⚂'; } /* 3 - Unicode'da 3 yok, 2 kullandık, CSS ile düzelteceğiz */

/* 3 ve diğerleri için özel stiller */
.face {
    background-size: 100% 100%;
}
.face.front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='8' fill='%231a1a1a'/%3E%3C/svg%3E"); }
.face.back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='25' cy='50' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='50' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='25' cy='75' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%231a1a1a'/%3E%3C/svg%3E"); }
.face.top { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%231a1a1a'/%3E%3C/svg%3E"); }
.face.bottom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='25' cy='75' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%231a1a1a'/%3E%3C/svg%3E"); }
.face.right { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='25' cy='75' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%231a1a1a'/%3E%3C/svg%3E"); }
.face.left { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%231a1a1a'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%231a1a1a'/%3E%3C/svg%3E"); }

[data-theme="dark"] .face {
    border-color: var(--secondary-color);
}
[data-theme="dark"] .face {
    background-color: var(--surface-color);
}
[data-theme="dark"] .face.front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='8' fill='%23e0e0e0'/%3E%3C/svg%3E"); }
[data-theme="dark"] .face.back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='25' cy='50' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='50' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='25' cy='75' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%23e0e0e0'/%3E%3C/svg%3E"); }
[data-theme="dark"] .face.top { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%23e0e0e0'/%3E%3C/svg%3E"); }
[data-theme="dark"] .face.bottom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='25' cy='75' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%23e0e0e0'/%3E%3C/svg%3E"); }
[data-theme="dark"] .face.right { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='25' cy='75' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%23e0e0e0'/%3E%3C/svg%3E"); }
[data-theme="dark"] .face.left { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='25' cy='25' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23e0e0e0'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%23e0e0e0'/%3E%3C/svg%3E"); }

.face::before {
    content: '';
}