/* Base Styles */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #020617; 
    color: #f8fafc; 
    margin: 0; 
    overflow-x: hidden; 
}

/* Dice Face Grid */
.dice-face { 
    display: grid; 
    grid-template-areas: 
        "a . b" 
        "c d e" 
        "f . g"; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 1fr); 
    gap: 2px; 
    padding: 6px; 
}

.dot { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background-color: white; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Animations */
@keyframes break { 
    0% { transform: scale(1); opacity: 1; } 
    100% { transform: scale(0); opacity: 0; } 
}
.breaking { animation: break 0.6s forwards; }

@keyframes sweep { 
    0% { transform: translateX(0); opacity: 1; } 
    100% { transform: translateX(200%); opacity: 0; } 
}
.sweeping { animation: sweep 0.7s forwards; }

@keyframes shake { 
    10%, 90% { transform: translate3d(-1px, 0, 0); } 
    20%, 80% { transform: translate3d(2px, 0, 0); } 
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 
}
.shake { animation: shake 0.4s both; }

/* Joker Star Shape */
.star { 
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
    background: linear-gradient(135deg, #facc15, #eab308); 
    width: 70%; 
    height: 70%; 
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }

/* Dice Colors & Styles */
.dice-bg-sky { background-color: #0ea5e9; border-color: #7dd3fc; box-shadow: 0 4px 6px -1px rgba(12, 74, 110, 0.4); }
.dice-bg-rose { background-color: #f43f5e; border-color: #fda4af; box-shadow: 0 4px 6px -1px rgba(136, 19, 55, 0.4); }
.dice-bg-emerald { background-color: #10b981; border-color: #6ee7b7; box-shadow: 0 4px 6px -1px rgba(6, 78, 59, 0.4); }
.dice-bg-amber { background-color: #f59e0b; border-color: #fcd34d; box-shadow: 0 4px 6px -1px rgba(120, 53, 15, 0.4); }
.dice-bg-violet { background-color: #7c3aed; border-color: #a78bfa; box-shadow: 0 4px 6px -1px rgba(76, 29, 149, 0.4); }
.dice-bg-orange { background-color: #f97316; border-color: #fdba74; box-shadow: 0 4px 6px -1px rgba(124, 45, 18, 0.4); }
.dice-bg-joker { background-color: #020617; border-color: #eab308; box-shadow: 0 0 15px rgba(234, 179, 8, 0.2); }
.dice-bg-empty { background-color: rgba(30, 41, 59, 0.5); border-color: rgba(51, 65, 85, 0.3); }

/* Common Dice Properties */
.dice-container {
    border-bottom-width: 4px;
    border-style: solid;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-duration: 200ms;
    cursor: grab;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.dice-container:active { cursor: grabbing; }

/* 모바일에서 wpDiscuz 댓글창 좌우 여백 추가 */
@media screen and (max-width: 768px) {
    #wpdcom {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}