@charset "utf-8";

.dice-scene {
	width: 100px;
	height: 100px;
	perspective: 1000px;
	margin: 40px auto;
}

.dice-cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(45deg);
	transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}

.face {
	position: absolute;
	width: 100px;
	height: 100px;
	background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e0e0e0 100%);
	border: 1px solid #bbb;
	border-radius: 15px;
	display: flex;
	padding: 15px;
	box-sizing: border-box;
	backface-visibility: hidden;
	box-shadow: inset 0 0 15px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.2);
}

.dot {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #333;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
}

/* 면별 트랜스폼 배치 */
.f1 {
	transform: rotateY(0deg) translateZ(50px);
	justify-content: center;
	align-items: center;
}

.f1 .dot {
	background-color: #d90429;
	width: 22px;
	height: 22px;
} /* 1은 빨강 */
    
.f6 {
	transform: rotateY(180deg) translateZ(50px);
	justify-content: space-between;
}
    
.f2 {
	transform: rotateX(90deg) translateZ(50px);
	justify-content: space-between;
}

.f2 .dot:nth-child(2) {
	align-self: flex-end;
}
    
.f5 {
	transform: rotateX(-90deg) translateZ(50px);
	justify-content: space-between;
}

.f5 .column:nth-child(2) {
	justify-content: center;
}
    
.f3 {
	transform: rotateY(-90deg) translateZ(50px);
	justify-content: space-between;
}

.f3 .dot:nth-child(2) {
	align-self: center;
}

.f3 .dot:nth-child(3) {
	align-self: flex-end;
}
    
.f4 {
	transform: rotateY(90deg) translateZ(50px);
	justify-content: space-between;
}

.column {
	display: flex; flex-direction: column;
	justify-content: space-between;
}

/* 애니메이션 및 메시지 (이전과 동일) */
.rolling-active {
	animation: real-roll 0.2s infinite linear;
}

@keyframes real-roll {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); }
}

.result-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
	font-weight: 900;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
}

/* 게임 횟수 초과 메시지 전용 */
.result-overlay.error-msg {
    font-size: 1.1rem !important;
    line-height: 1.6;
    text-align: center;
    width: auto !important;
    min-width: 280px;
    max-width: 90%;
    white-space: pre-line !important;
    word-break: keep-all !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.show-result {
	animation: pop-fade 1.5s forwards;
}

@keyframes pop-fade {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
	30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

.win-text {
	color: #ffeb3b;
	text-shadow: 0 0 15px #198754;
	-webkit-text-stroke: 1.5px #198754;
}

.jackpot-text {
	color: #ffffff;
	text-shadow: 0 0 20px #ffc107, 0 0 40px #ff9800;
	-webkit-text-stroke: 1.5px #ff9800;
}
    
.loss-text {
	color: #ffffff;
	text-shadow: 0 0 15px #dc3545;
	-webkit-text-stroke: 1.5px #dc3545;
}

.alert-text {
	color: #ffeb3b;
	font-size: 1.5rem !important;
	text-shadow: 0 0 10px #000;
}

.btn-check:checked + .btn-outline-dark {
	background-color: #212529; color: #fff;
}

/* 숫자 예측 주사위 버튼 전체 스타일 */
.dice-select-btn {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #fff !important;
    border: 2px solid #eee !important;
    border-radius: 10px !important;
    padding: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

/* 마우스 호버 시: 테두리가 사라지지 않도록 강제 설정 */
.dice-select-btn:hover {
    border-color: #bbb !important;
    background-color: #fcfcfc !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

/* 3x3 그리드 생성 */
.dice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    gap: 2px;
    pointer-events: none;
}

/* 점 기본 틀 */
.grid-dot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 활성화된 점 모양 */
.grid-dot.active::before {
    content: "";
    display: block;
    width: 80%;
    height: 80%;
    background-color: #333;
    border-radius: 50%;
    transition: background-color 0.2s;
}

/* 1번 주사위 빨간색 */
.dice-grid.g1 .grid-dot.active::before {
    background-color: #d90429;
    width: 90%;
    height: 90%;
}

/* 체크(선택) 시 스타일 */
.btn-check:checked + .dice-select-btn {
    border-color: #212529 !important;
    background-color: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* 체크 시 점 색상 변화 */
.btn-check:checked + .dice-select-btn .grid-dot.active::before {
    background-color: #000;
}

/* 체크 시에도 1번 빨간색은 유지 */
.btn-check:checked + .dice-select-btn .dice-grid.g1 .grid-dot.active::before {
    background-color: #d90429;
}

/* 포커스 시 발생하는 파란 테두리 제거 */
.dice-select-btn:focus, .dice-select-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* 베팅 금액 버튼 전용 스타일 - 주사위 스타일과 분리 */
.amount-btn-area .amt-select-label {
    background-color: #fff !important;
    border: 2px solid #eee !important;
    color: #666 !important;
    font-size: 0.85rem;
    border-radius: 8px !important;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 베팅 버튼 호버 */
.amount-btn-area .amt-select-label:hover {
    border-color: #bbb !important;
    background-color: #fcfcfc !important;
}

/* 베팅 버튼 선택 시 (Checked) */
.amount-btn-area .btn-check:checked + .amt-select-label {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
	border-color: var(--bs-emphasis-color) !important;
}

/* 주사위 버튼 크기 고정 보장 */
.dice-select-btn {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    min-width: 45px;
}