/* dice.css - 주사위 롤러 전용 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 0;
    margin: 0;
}

.container {
    text-align: center;
    background: white;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 95vw;
    height: 95vh;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow 0.3s;
}

.container h1 {
    color: #333;
    margin-bottom: 8px;
    font-size: 1.5rem;
    flex-shrink: 0;
    padding-top: 35px;
}

/* 뒤로가기 버튼 */
.back-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #667eea;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    z-index: 10;
}

.back-btn:hover {
    background: #764ba2;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* 주사위 개수 선택 */
.dice-count-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.count-btn {
    padding: 8px 0;
    font-size: 0.85rem;
    flex: 1 0 calc(33.33% - 6px);
    border-radius: 30px;
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.count-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.count-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

/* 메인 콘텐츠 영역 */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.dice-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dice-section h2 {
    display: none;
}

.dice-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.result-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 3px solid #667eea;
    padding-top: 10px;
}

.result-section h2 {
    display: none;
}

.results-wrapper {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* 3D 주사위 컨테이너 */
.dice-container {
    perspective: 1000px;
    transform: rotateX(-20deg) rotateY(-25deg);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

/* 1개일 때 */
.dice-container.large {
    width: 130px;
    height: 130px;
    perspective: 650px;
}

/* 2개일 때 */
.dice-container.small {
    width: 120px;
    height: 120px;
    perspective: 600px;
}

/* 3개일 때 */
.dice-container.smaller {
    width: 90px;
    height: 90px;
    perspective: 450px;
}

/* 4개 이상일 때 */
.dice-container.tiny {
    width: 75px;
    height: 75px;
    perspective: 375px;
}

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

.dice.rolling {
    transition: transform 0.8s ease-in-out;
}

.dice-face {
    position: absolute;
    background: white;
    border: 2px solid #667eea;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.dice-face::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,240,240,0.9) 100%);
    border-radius: 15px;
    z-index: -1;
}

.dot {
    background: #667eea;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 1개일 때 크기 */
.dice-container.large .dice-face {
    width: 100px;
    height: 100px;
    padding: 14px;
}

.dice-container.large .dot {
    width: 14px;
    height: 14px;
}

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

/* 2개일 때 크기 */
.dice-container.small .dice-face {
    width: 85px;
    height: 85px;
    padding: 13px;
}

.dice-container.small .dot {
    width: 12px;
    height: 12px;
}

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

/* 3개일 때 크기 */
.dice-container.smaller .dice-face {
    width: 65px;
    height: 65px;
    padding: 10px;
    border-radius: 8px;
}

.dice-container.smaller .dot {
    width: 9px;
    height: 9px;
}

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

/* 4개 이상일 때 크기 */
.dice-container.tiny .dice-face {
    width: 55px;
    height: 55px;
    padding: 8px;
    border-radius: 7px;
}

.dice-container.tiny .dot {
    width: 8px;
    height: 8px;
}

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

/* Dot patterns */
.face-1 .dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.face-2 .dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.face-2 .dot:nth-child(2) { position: absolute; bottom: 25%; right: 25%; }

.face-3 .dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.face-3 .dot:nth-child(2) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.face-3 .dot:nth-child(3) { position: absolute; bottom: 25%; right: 25%; }

.face-4 .dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.face-4 .dot:nth-child(2) { position: absolute; top: 25%; right: 25%; }
.face-4 .dot:nth-child(3) { position: absolute; bottom: 25%; left: 25%; }
.face-4 .dot:nth-child(4) { position: absolute; bottom: 25%; right: 25%; }

.face-5 .dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.face-5 .dot:nth-child(2) { position: absolute; top: 25%; right: 25%; }
.face-5 .dot:nth-child(3) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.face-5 .dot:nth-child(4) { position: absolute; bottom: 25%; left: 25%; }
.face-5 .dot:nth-child(5) { position: absolute; bottom: 25%; right: 25%; }

.face-6 .dot:nth-child(1) { position: absolute; top: 25%; left: 30%; }
.face-6 .dot:nth-child(2) { position: absolute; top: 25%; right: 30%; }
.face-6 .dot:nth-child(3) { position: absolute; top: 50%; left: 30%; transform: translateY(-50%); }
.face-6 .dot:nth-child(4) { position: absolute; top: 50%; right: 30%; transform: translateY(-50%); }
.face-6 .dot:nth-child(5) { position: absolute; bottom: 25%; left: 30%; }
.face-6 .dot:nth-child(6) { position: absolute; bottom: 25%; right: 30%; }

/* 힌트 텍스트 */
#hint {
    display: block;
    text-align: center;
    color: #999;
    font-size: 0.95rem;
    padding: 8px 0;
    flex-shrink: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* 차징 & 리빌 상태 */
.container.charging {
    cursor: grabbing;
}

.container.reveal {
    transition: box-shadow 0.3s;
}

/* 결과 표시 */
.result-display {
    background: white;
    border: 3px solid #667eea;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.result-display.large {
    width: 100px;
    height: 100px;
    padding: 14px;
}

.result-display.small {
    width: 85px;
    height: 85px;
    padding: 13px;
}

.result-display.smaller {
    width: 65px;
    height: 65px;
    padding: 10px;
}

.result-display.tiny {
    width: 55px;
    height: 55px;
    padding: 8px;
    border-radius: 7px;
}

.result-display.show {
    opacity: 1;
    transform: scale(1);
}

.result-display.impact {
    animation: impactPulse 0.8s cubic-bezier(0.17, 0.67, 0.29, 1.2);
}

@keyframes impactPulse {
    0% {
        transform: scale(0.3) rotate(-10deg);
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.9);
        filter: brightness(2);
    }
    20% {
        transform: scale(1.4) rotate(3deg);
        box-shadow: 0 0 60px 30px rgba(118, 75, 162, 0.6),
                    0 0 120px 60px rgba(102, 126, 234, 0.3);
        filter: brightness(1.5);
    }
    40% {
        transform: scale(0.9) rotate(-2deg);
        filter: brightness(1.1);
    }
    60% {
        transform: scale(1.1) rotate(1deg);
        box-shadow: 0 0 30px 10px rgba(102, 126, 234, 0.4);
    }
    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        filter: brightness(1);
    }
}

.result-section.shake {
    animation: screenShake 0.4s ease-out;
}

@keyframes screenShake {
    0% { transform: translate(0, 0); }
    15% { transform: translate(-4px, 2px); }
    30% { transform: translate(4px, -2px); }
    45% { transform: translate(-3px, 1px); }
    60% { transform: translate(3px, -1px); }
    75% { transform: translate(-1px, 1px); }
    100% { transform: translate(0, 0); }
}

/* 이펙트 */
.shockwave {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(102, 126, 234, 0.6);
    animation: shockwaveExpand 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes shockwaveExpand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        border-width: 4px;
    }
    100% {
        width: 250px;
        height: 250px;
        opacity: 0;
        border-width: 1px;
    }
}

.glow-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    pointer-events: none;
    animation: glowBurst 0.6s ease-out forwards;
}

@keyframes glowBurst {
    0% {
        box-shadow: inset 0 0 30px rgba(102, 126, 234, 0.8),
                    0 0 40px rgba(118, 75, 162, 0.8),
                    0 0 80px rgba(102, 126, 234, 0.4);
        background: rgba(102, 126, 234, 0.2);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(102, 126, 234, 0),
                    0 0 0 rgba(118, 75, 162, 0),
                    0 0 0 rgba(102, 126, 234, 0);
        background: rgba(102, 126, 234, 0);
    }
}

.star-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: starBurst 0.6s ease-out forwards;
}

@keyframes starBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

.result-display::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,240,240,0.9) 100%);
    border-radius: 15px;
    z-index: -1;
}

/* 결과 도트 */
.result-dot {
    background: #667eea;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.result-display.large .result-dot {
    width: 14px;
    height: 14px;
}

.result-display.small .result-dot {
    width: 12px;
    height: 12px;
}

.result-display.smaller .result-dot {
    width: 9px;
    height: 9px;
}

.result-display.tiny .result-dot {
    width: 8px;
    height: 8px;
}

/* Result dot patterns */
.pattern-1 .result-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.pattern-2 .result-dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.pattern-2 .result-dot:nth-child(2) { position: absolute; bottom: 25%; right: 25%; }

.pattern-3 .result-dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.pattern-3 .result-dot:nth-child(2) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pattern-3 .result-dot:nth-child(3) { position: absolute; bottom: 25%; right: 25%; }

.pattern-4 .result-dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.pattern-4 .result-dot:nth-child(2) { position: absolute; top: 25%; right: 25%; }
.pattern-4 .result-dot:nth-child(3) { position: absolute; bottom: 25%; left: 25%; }
.pattern-4 .result-dot:nth-child(4) { position: absolute; bottom: 25%; right: 25%; }

.pattern-5 .result-dot:nth-child(1) { position: absolute; top: 25%; left: 25%; }
.pattern-5 .result-dot:nth-child(2) { position: absolute; top: 25%; right: 25%; }
.pattern-5 .result-dot:nth-child(3) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pattern-5 .result-dot:nth-child(4) { position: absolute; bottom: 25%; left: 25%; }
.pattern-5 .result-dot:nth-child(5) { position: absolute; bottom: 25%; right: 25%; }

.pattern-6 .result-dot:nth-child(1) { position: absolute; top: 25%; left: 30%; }
.pattern-6 .result-dot:nth-child(2) { position: absolute; top: 25%; right: 30%; }
.pattern-6 .result-dot:nth-child(3) { position: absolute; top: 50%; left: 30%; transform: translateY(-50%); }
.pattern-6 .result-dot:nth-child(4) { position: absolute; top: 50%; right: 30%; transform: translateY(-50%); }
.pattern-6 .result-dot:nth-child(5) { position: absolute; bottom: 25%; left: 30%; }
.pattern-6 .result-dot:nth-child(6) { position: absolute; bottom: 25%; right: 30%; }

/* 캔버스 & 플래시 */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

#flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.15s;
}

/* 컨페티 */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.confetti {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    background: #667eea;
    animation: confettiFall 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) translateX(0) rotateZ(0deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(20px) rotateZ(180deg) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(-15px) rotateZ(360deg) scale(0.9);
        opacity: 0.9;
    }
    75% {
        transform: translateY(75vh) translateX(10px) rotateZ(540deg) scale(0.7);
        opacity: 0.5;
    }
    100% {
        transform: translateY(105vh) translateX(-5px) rotateZ(720deg) scale(0.3);
        opacity: 0;
    }
}