#game_box { position: relative; overflow: hidden; margin: auto; width: min(100%, 880px); height: 693px; background: url(img/game_background.webp) no-repeat 50% / cover; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }

#cupBox { position: relative; width: min(100%, 300px); aspect-ratio: 5 / 6; }
#cupBox:before { content: ""; position: absolute; right: 0; bottom: -110px; width: 658px; aspect-ratio: 329 / 191; background: url(img/cup_shadow.webp) no-repeat 50%; opacity: .5; }

#cup-top, #cup-base { position: absolute; left: 50%; transform: translateX(-50%); will-change: transform; backface-visibility: hidden; }
#cup-base { width: min(95%, 260px); bottom: -20px; }
#cup-top { width: min(95%, 260px); bottom: 20px; z-index: 20; }

.shake { animation: shakeCup .25s infinite var(--ease); transform-origin: 50% 100%; }
.openCup { animation: openCup .6s forwards ease-out; }

/* diceArea */
#diceArea { position: absolute; width: 55%; height: 60%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-content: center; align-content: center; bottom: 0; left: 50%; transform: translateX(-50%); }
.dice { width: 100%; aspect-ratio: 1/1; opacity: 0; transform: scale(.2); transition: all .35s ease; }

/* rollBtn */
#rollBtn { position: relative; margin: -10px 0 5%; background: none; border: none; cursor: pointer; }

/* win_box */
#win_box .win_area { width: min(90vw, 262px); aspect-ratio: 131 / 124; background-image: url(img/win_background.webp); }
#win_box .win_area::before { background-image: url(img/win_light.webp); }
#win_box .win_area .txt::before { bottom: 0; left: 3%; }
#win_box .win_area .txt::after { bottom: -6%; }
#win_box .bottom_btn { bottom: -20%; }

/* Animations */
@keyframes shakeCup { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 25% { transform: translateX(-52%) translateY(-10px) rotate(-2deg); } 70% { transform: translateX(-48%) translateY(-7px) rotate(2deg); } }
@keyframes openCup { 0% { bottom: 20px; transform: translateX(-50%) rotate(0deg); } 70% { bottom: 60%; transform: translateX(-60%) rotate(-15deg); } 100% { bottom: 55%; transform: translateX(-70%) rotate(-25deg); filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); } }

@media screen and (max-width: 980px) {
	#game_box { height: 550px; }
}