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

.dice-neo-wrapper {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1000px;
    margin: 20px auto;
    border: 3px solid #000000;
    border-radius: 12px;
    box-shadow: 8px 8px 0px #000000;
    padding: 25px;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

.dice-neo-wrapper * { box-sizing: border-box; }

/* HEADER */
.dice-header {
    display: flex; justify-content: space-between; align-items: center;
    background: #ffdac1; padding: 15px 20px; border-radius: 12px;
    border: 3px solid #000000; box-shadow: 4px 4px 0px #000000; margin-bottom: 25px;
}
.dice-header h2 { margin: 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; color: #000; }
.btn-sound { background: #fff; border: 3px solid #000; border-radius: 50%; width: 45px; height: 45px; font-size: 1.2rem; cursor: pointer; box-shadow: 2px 2px 0px #000; transition: 0.1s; display: flex; align-items: center; justify-content: center; }
.btn-sound:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }

/* TABS (CHẾ ĐỘ) */
.dice-tabs { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.dice-tab {
    flex: 1; text-align: center; padding: 12px; font-weight: 900; font-size: 1.1rem;
    border: 3px solid #000; border-radius: 8px; background: #e9ecef; color: #000;
    cursor: pointer; box-shadow: 3px 3px 0px #000; transition: all 0.1s; text-transform: uppercase;
}
.dice-tab.active { background: #b5ead7; box-shadow: 1px 1px 0px #000; transform: translate(2px, 2px); }

/* BẢNG ĐIỀU KHIỂN */
.dice-controls {
    display: flex; gap: 20px; background: #f9f9f9; padding: 20px;
    border: 3px solid #000; border-radius: 8px; margin-bottom: 25px; align-items: flex-end; flex-wrap: wrap;
}
.dice-group { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 200px; }
.dice-group label { font-weight: 900; font-size: 1.05rem; color: #000; }
.dice-select, .dice-input {
    width: 100%; padding: 12px; font-size: 1.1rem; font-weight: 900; border-radius: 8px; 
    border: 3px solid #000; background: #fff; color: #000; outline: none; box-shadow: 2px 2px 0px #000;
}

/* KHU VỰC ĐỔ XÚC XẮC (ARENA) */
.flipper-wrapper {
    width: 100%; min-height: 400px; background-color: #F6F3EB; 
    border-radius: 8px; border: 3px solid #000; position: relative;
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden; perspective: 1000px; padding-top: 20px; cursor: pointer;
}
.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(0,0,0,0.6); font-weight: 900; font-size: 1.1rem; text-transform: uppercase; pointer-events: none; }

/* KẾT QUẢ ĐIỂM */
.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 #000; margin-bottom: 5px; -webkit-text-stroke: 1px #000; }
.sub-text { font-family: system-ui, sans-serif; font-size: 1.2rem; font-weight: 900; background-color: #fff; padding: 6px 15px; border-radius: 20px; color: #000; border: 3px solid #000; box-shadow: 2px 2px 0px #000; }

/* NÚT TUNG */
.btn-roll-big {
    width: 100%; cursor: pointer; font-size: 1.5rem; font-weight: 900; margin-top: 25px;
    padding: 15px; background-color: #b5ead7; border: 3px solid #000;
    border-radius: 8px; box-shadow: 5px 5px 0px #000; text-transform: uppercase; color: #000;
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-roll-big:active:not(:disabled) { transform: translate(5px, 5px); box-shadow: 0px 0px 0px #000; }
.btn-roll-big:disabled { background-color: #e0e0e0; cursor: not-allowed; box-shadow: 5px 5px 0px #000; }
.btn-roll-big.btn-sim { background-color: #ffca3a; }

/* CSS XÚC XẮC 3D (Cho D6) */
.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 #000; 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: #000; border-radius: 50%; width: 100%; height: 100%; }
.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; }

/* CSS XÚC XẮC 2D (Cho D4, D8, D10, D12, D20) */
.dice-poly {
    width: 80px; height: 80px; background: #fff; border: 4px solid #000; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; position: relative;
    box-shadow: inset -4px -4px 0px rgba(0,0,0,0.1), 4px 4px 0px #000;
    font-family: 'Bungee', sans-serif; font-size: 35px; color: #000; transition: 0.1s;
}
.dice-poly::after {
    content: attr(data-type); position: absolute; top: -10px; right: -10px;
    background: #ff595e; color: #fff; font-size: 12px; font-family: system-ui; padding: 2px 6px;
    border: 2px solid #000; border-radius: 8px; font-weight: 900;
}
@keyframes shakeDice { 
    0% { transform: rotate(0deg) scale(1); } 
    25% { transform: rotate(15deg) scale(1.1); } 
    50% { transform: rotate(0deg) scale(1); } 
    75% { transform: rotate(-15deg) scale(1.1); } 
    100% { transform: rotate(0deg) scale(1); } 
}
.shaking { animation: shakeDice 0.2s infinite; }

/* KHU VỰC GIẢ LẬP XÁC SUẤT */
.sim-arena {
    width: 100%; min-height: 400px; background-color: #fff; padding: 25px;
    border-radius: 8px; border: 3px solid #000; display: none; flex-direction: column;
}
.sim-arena.active { display: flex; }
.sim-stats { margin-bottom: 20px; font-weight: 900; font-size: 1.2rem; color: #000; text-align: center; border-bottom: 3px dashed #000; padding-bottom: 15px;}
.bar-row { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; }
.bar-label { font-weight: 900; width: 60px; font-size: 1.1rem; color: #000; }
.bar-track { flex: 1; height: 25px; background: #eee; border: 2px solid #000; border-radius: 6px; position: relative; overflow: hidden; }
.bar-fill { height: 100%; background: #06d6a0; width: 0%; transition: width 0.5s ease-out; }
.bar-value { font-weight: 900; width: 80px; text-align: right; font-size: 1.1rem; color: #000; }

@media (max-width: 600px) {
    .dice-group { min-width: 100%; }
    .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); }
}