.dice-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.dice-preset-btn {
    flex: 1; min-width: 60px; padding: 10px 6px; border-radius: 10px;
    border: 1.5px solid var(--border); background: var(--card2);
    color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
    text-align: center; transition: border-color .15s, color .15s;
}
.dice-preset-btn:hover, .dice-preset-btn.sel {
    border-color: #8b5cf6; color: #8b5cf6;
    background: rgba(139,92,246,.08);
}
.dice-preset-btn i { display: block; font-size: 22px; margin-bottom: 4px; }

.dice-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.dice-row label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.dice-row input {
    width: 70px; padding: 8px; border-radius: 8px; text-align: center;
    border: 1.5px solid var(--border); background: var(--card2);
    color: var(--text); font-size: 15px; font-weight: 700; outline: none;
}
.dice-row input:focus { border-color: #8b5cf6; }

.dice-roll-btn {
    width: 100%; padding: 13px; border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff; border: none; font-size: 16px; font-weight: 800;
    cursor: pointer; transition: opacity .15s; letter-spacing: .5px;
}
.dice-roll-btn:hover { opacity: .88; }
.dice-roll-btn:disabled { opacity: .5; cursor: default; }

/* نتيجة الرمي */
.dice-result-wrap { display: none; text-align: center; padding: 20px 10px; }
.dice-faces { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dice-face {
    width: 52px; height: 52px; border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff; font-size: 22px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(139,92,246,.4);
    animation: diceFlip .4s ease;
}
@keyframes diceFlip {
    0%   { transform: rotateY(0deg) scale(.6); opacity: 0; }
    60%  { transform: rotateY(180deg) scale(1.1); }
    100% { transform: rotateY(360deg) scale(1); opacity: 1; }
}
.dice-sum { font-size: 28px; font-weight: 900; color: #8b5cf6; }
.dice-sum-label { font-size: 13px; color: var(--muted); margin-top: 2px; }
.dice-again-btn {
    margin-top: 14px; padding: 10px 24px; border-radius: 10px;
    background: none; border: 1.5px solid #8b5cf6; color: #8b5cf6;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.dice-again-btn:hover { background: rgba(139,92,246,.1); }