body {
    margin: 0;
    padding: 0;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    background-color: #fff8e1;
    /* 따뜻하고 연한 노란색 (여름 느낌) */
    overflow: hidden;
    user-select: none;
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.background-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, #fff8e1 20%, #fff8e1 80%, transparent 80%, transparent),
        radial-gradient(circle, transparent 20%, #fff8e1 20%, #fff8e1 80%, transparent 80%, transparent) 50px 50px,
        linear-gradient(#ffe082 4px, transparent 4px) 0 -2px,
        linear-gradient(90deg, #ffe082 4px, #fff8e1 4px) -2px 0;
    background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
    opacity: 0.3;
    z-index: -1;
}

#title-text {
    margin-top: 30px;
    font-size: 40px;
    color: #ff4081;
    text-shadow: 2px 2px 4px rgba(255, 64, 129, 0.3);
    transition: color 0.5s;
}

/* Machine */
#machine {
    position: absolute;
    top: 50px;
    /* starts high */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    transition: transform 1s ease-in-out;
}

#machine-top {
    width: 200px;
    height: 250px;
    background: linear-gradient(135deg, #00bcd4, #00838f);
    border-radius: 40px 40px 10px 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    border: 5px solid #00acc1;
}

#shave-btn {
    margin-top: -20px;
    padding: 15px 30px;
    font-size: 24px;
    font-weight: bold;
    background: #ff5252;
    color: white;
    border: 4px solid #d32f2f;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
    z-index: 11;
}

#shave-btn:active {
    transform: translateY(5px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Bowl & Ice */
#bowl-container {
    position: absolute;
    bottom: 250px;
    width: 300px;
    height: 150px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#ice-mound {
    position: absolute;
    bottom: 60px;
    /* Inside the bowl */
    width: 0px;
    height: 0px;
    background-color: white;
    border-radius: 50%;
    /* 텍스처 느낌 (빙수 입자) */
    background-image: radial-gradient(#e0f7fa 10%, transparent 20%), radial-gradient(#e0f7fa 10%, transparent 20%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.05);
    transition: width 0.3s, height 0.3s, background-color 1s;
    overflow: hidden;
    /* For decorations to clip nicely if needed, though they are inside */
}

#bowl-front {
    position: absolute;
    bottom: 0;
    width: 250px;
    height: 100px;
    background: #4dd0e1;
    border-radius: 10px 10px 125px 125px;
    /* 반원 볼 형태 */
    border: 4px solid #0097a7;
    border-top: none;
    box-shadow: 0 15px 25px rgba(0, 151, 167, 0.3);
    z-index: 6;
    /* 얼음 위를 덮음 */
}

/* Decorating Palette */
#palette {
    position: absolute;
    bottom: 20px;
    width: 80%;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.5s, opacity 0.5s;
    z-index: 20;
}

#palette.hidden {
    transform: translateY(200px);
    opacity: 0;
    pointer-events: none;
}

.palette-title {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}

.tray {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.draggable-item {
    cursor: grab;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 10px;
    border: 2px dashed #ccc;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    transition: transform 0.2s;
}

.draggable-item:hover {
    transform: scale(1.1);
    border-color: #ff4081;
}

.draggable-item:active {
    cursor: grabbing;
}

/* Custom looks for items in tray and on body */
.syrup {
    background: #ff80ab;
    color: white;
    border-style: solid;
}

.decor-eye {
    width: 20px;
    height: 40px;
    background: black;
    border-radius: 50%;
    color: transparent;
    border: none;
}

.decor-mouth {
    width: 30px;
    height: 15px;
    background: #d32f2f;
    border-radius: 0 0 30px 30px;
    color: transparent;
    border: none;
}

.decor-blush {
    width: 40px;
    height: 20px;
    background: #ff5252;
    border-radius: 50%;
    opacity: 0.8;
    color: transparent;
    border: none;
}

/* Placed Decorations on the Ice */
.placed-decor {
    position: absolute;
    transform: translate(-50%, -50%);
    /* Center strictly on pointer drop */
    pointer-events: none;
    /* 드롭 후에는 터치 불가 */
}

/* General UI */
.btn {
    padding: 15px 30px;
    font-size: 24px;
    font-weight: bold;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
    transition: transform 0.1s;
}

.btn.hidden {
    display: none;
}

.btn:hover {
    background: #388e3c;
    transform: scale(1.05);
}

.back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #9e9e9e;
    font-size: 18px;
    padding: 10px 20px;
}

/* Snow Particles (during shaving) */
.snow-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation: fall 1s linear forwards;
    z-index: 4;
}

/* Confetti (Finish) */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    animation: fall-spin 2s linear forwards;
    z-index: 30;
}

@keyframes fall {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(150px) scale(0.5);
        opacity: 0;
    }
}

@keyframes fall-spin {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(600px) rotate(360deg);
        opacity: 0;
    }
}