@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

.tool-container {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 900px; margin: 20px auto;
    border: 3px solid #111111; border-radius: 12px;
    box-shadow: 6px 6px 0px #111111; padding: 20px; background: #fff;
}

.top-bar {
    background: #ffdac1; padding: 10px 20px; border-radius: 8px;
    display: flex; flex-wrap: wrap; gap: 15px; align-items: center;
    border: 3px solid #111111; box-shadow: 4px 4px 0px #111111;
    margin-bottom: 20px; justify-content: center;
}

.bar-text { color: #111111; font-weight: 900; font-size: 1.1rem; margin: 0; }

.top-bar select {
    padding: 8px 25px; font-size: 1.1rem; font-weight: bold; border-radius: 6px; 
    border: 2px solid #111111; background: #ffffff; color: #111111; 
    cursor: pointer; outline: none; box-shadow: 2px 2px 0px #111111;
}

.flipper-wrapper {
    width: 100%; min-height: 400px; background-color: #F6F3EB; 
    border-radius: 8px; border: 3px solid #111111; position: relative;
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden; perspective: 1000px; padding-top: 20px; cursor: pointer;
}
.flipper-wrapper:active { background-color: #f0ebd9; }

.dice-arena {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 40px;
    padding: 40px; width: 100%; margin-top: 20px;
}

.hint-click {
    position: absolute; bottom: 15px; color: rgba(114, 83, 73, 0.6);
    font-weight: bold; font-size: 1.1rem; text-transform: uppercase; pointer-events: none;
}

.bottom-action { margin-top: 20px; }
.btn-roll-big {
    width: 100%; cursor: pointer; font-size: 1.5rem; font-weight: 900;
    padding: 15px; background-color: #b5ead7; border: 3px solid #111111;
    border-radius: 8px; box-shadow: 5px 5px 0px #111111; text-transform: uppercase; color: #111111;
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-roll-big:active { transform: translate(5px, 5px); box-shadow: 0px 0px 0px #111111; }
.btn-roll-big:disabled { background-color: #ddd; cursor: not-allowed; transform: none; box-shadow: 5px 5px 0px #111111; }

.dice {
    width: 80px; height: 80px; position: relative; transform-style: preserve-3d;
    transition: transform 2s cubic-bezier(0.1, 0.8, 0.2, 1);
    transform: rotateX(-15deg) rotateY(15deg); pointer-events: none;
}

.face {
    position: absolute; width: 100%; height: 100%; background: #ffffff;
    border: 3px solid #111111; border-radius: 12px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1); display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 6px; padding: 10px;
    box-sizing: border-box; backface-visibility: hidden;
}

.dot { background-color: #111111; border-radius: 50%; width: 100%; height: 100%; box-shadow: inset 0 3px 5px rgba(0,0,0,0.3); }

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

.face-1 .dot { grid-area: 2 / 2; background-color: #e05a47; }
.face-2 .dot:nth-child(1) { grid-area: 1 / 1; } .face-2 .dot:nth-child(2) { grid-area: 3 / 3; }
.face-3 .dot:nth-child(1) { grid-area: 1 / 1; } .face-3 .dot:nth-child(2) { grid-area: 2 / 2; } .face-3 .dot:nth-child(3) { grid-area: 3 / 3; }
.face-4 .dot:nth-child(1) { grid-area: 1 / 1; } .face-4 .dot:nth-child(2) { grid-area: 1 / 3; } .face-4 .dot:nth-child(3) { grid-area: 3 / 1; } .face-4 .dot:nth-child(4) { grid-area: 3 / 3; }
.face-5 .dot:nth-child(1) { grid-area: 1 / 1; } .face-5 .dot:nth-child(2) { grid-area: 1 / 3; } .face-5 .dot:nth-child(3) { grid-area: 2 / 2; } .face-5 .dot:nth-child(4) { grid-area: 3 / 1; } .face-5 .dot:nth-child(5) { grid-area: 3 / 3; }
.face-6 .dot:nth-child(1) { grid-area: 1 / 1; } .face-6 .dot:nth-child(2) { grid-area: 1 / 3; } .face-6 .dot:nth-child(3) { grid-area: 2 / 1; } .face-6 .dot:nth-child(4) { grid-area: 2 / 3; } .face-6 .dot:nth-child(5) { grid-area: 3 / 1; } .face-6 .dot:nth-child(6) { grid-area: 3 / 3; }

.result-board {
    position: absolute; top: 15px; left: 0; width: 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center; pointer-events: none;
    z-index: 10; transition: opacity 0.3s;
}
.result-board.hidden { opacity: 0; }
.main-text { font-family: 'Bungee', sans-serif !important; font-size: 50px; color: #e05a47; text-shadow: 3px 3px 0px #fff; margin-bottom: 5px; }
.sub-text { font-family: system-ui, sans-serif; font-size: 1.2rem; font-weight: 900; background-color: rgba(255, 255, 255, 0.85); padding: 6px 15px; border-radius: 20px; color: #111111; border: 2px solid #111111; }

.history-box { margin-top: 25px; padding: 15px; background-color: #f9f9f9; border: 2px dashed #111111; border-radius: 8px; }
.history-box h4 { margin: 0 0 10px 0; font-size: 1.1rem; }
.history-box ul { list-style: none; padding: 0; margin: 0; }
.history-box li { font-size: 1.05rem; padding: 8px 0; border-bottom: 1px solid #ccc; font-weight: bold; color: #333; }
.history-box li:last-child { border-bottom: none; }

@media (max-width: 600px) {
    .btn-roll-big { font-size: 1.2rem; }
    .dice { width: 60px; height: 60px; }
    .face-1 { transform: translateZ(30px); } .face-2 { transform: rotateX(-90deg) translateZ(30px); } .face-3 { transform: rotateY(90deg) translateZ(30px); }
    .face-4 { transform: rotateY(-90deg) translateZ(30px); } .face-5 { transform: rotateX(90deg) translateZ(30px); } .face-6 { transform: rotateY(180deg) translateZ(30px); }
}