body {
    background-color: #1a1a1a;
    color: #f0f0f0;
    font-family: 'Noto Sans KR', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

#game-container {
    background-color: #2a2a2a;
    border: 2px solid #444;
    border-radius: 15px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    text-align: center;
}

#game-title {
    color: #ff9800;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#scene-image-container {
    width: 100%;
    height: 400px;
    background-color: #000;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
    border: 1px solid #555;
}

#effect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    transition: background-color 0.2s;
}

#gate-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 10;
    transition: opacity 1s;
}

.gate-door {
    width: 50%;
    height: 100%;
    background-color: #3e2723; /* Dark wood color */
    border: 2px solid #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0; /* Hide emoji if any */
    transition: transform 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-sizing: border-box;
    background-image: 
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,0,0,0.5) 40px, rgba(0,0,0,0.5) 44px),
        url('./Gem몬스터성문1.png'); /* Fallback or texture overlay if needed, but best to use img if possible. Let's stick to simple texture for now or use the image as background if it tiles well. Actually, user provided gate image. Let's use it properly in game.js or here? 
        The prompt said "Gem몬스터성문1.png" is the gate. Let's use it as background-image for the container behind checks or just use CSS wood texture for doors opening. 
        Wait, "Gem몬스터성문1.png" works best as the CLOSED state. 
        Let's make .gate-door have the image split. */
    background-size: 200% 100%; /* Split image across two doors */
    background-position: left;
    background-repeat: no-repeat;
}

.gate-door.left {
    border-right: 2px solid #000;
    transform-origin: left center;
    background-image: url('./Gem몬스터성문1.png');
    background-position: 0% center;
    background-size: 200% 100%; /* Show left half */
}

.gate-door.right {
    border-left: 2px solid #000;
    transform-origin: right center;
    background-image: url('./Gem몬스터성문1.png');
    background-position: 100% center;
    background-size: 200% 100%; /* Show right half */
}

/* Removed individual .left .right border/transform rules as they are merged above for clarity with background images */

#gate-container.open .gate-door.left {
    transform: perspective(1000px) rotateY(-80deg) translateX(-20%);
}

#gate-container.open .gate-door.right {
    transform: perspective(1000px) rotateY(80deg) translateX(20%);
}

#gate-container.gone {
    opacity: 0;
    pointer-events: none;
}

#scene-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#scene-content.hidden {
    opacity: 0;
}

/* Wait, opacity 0 doesn't hide it from layout, but it's flexed. 
   We want the gate to cover it. The gate has z-index 10 and absolute position.
   So scene-content is always there, just behind.
   So .hidden on scene-content is not strictly necessary for visibility if gate covers it,
   but good for cross-fading if we wanted.
   Actually, let's keep it simple.
*/

#scene-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.5s ease;
    opacity: 1;
}

#scene-image.hidden {
    opacity: 0;
}

/* Animation Classes */
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.zoom-in {
    animation: zoomIn 10s ease-out forwards;
}

.pop-in {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 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); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes zoomIn {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#scene-image:hover {
    transform: scale(1.1) rotate(5deg);
}

#story-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    min-height: 80px;
}

.choice-btn {
    background-color: #4a4a4a;
    color: white;
    border: none;
    padding: 12px 24px;
    margin: 8px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    width: 100%;
    max-width: 400px;
}

.choice-btn:hover {
    background-color: #5a5a5a;
    transform: translateY(-2px);
}

.choice-btn:active {
    transform: translateY(0);
}

#dice-container {
    margin: 1rem 0;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#dice-container.hidden {
    visibility: hidden;
}

#dice {
    font-size: 6rem;
    animation: bounce 0.5s infinite alternate;
    line-height: 1;
}

#dice.rolling {
    animation: spin 0.2s infinite linear;
}

#dice-result {
    font-size: 2rem;
    font-weight: bold;
    color: #ff9800;
    margin-top: 15px;
    text-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

/* Title Screen Overlay */
#title-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.5s;
}

#title-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

#start-btn {
    font-size: 1.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(45deg, #ff9800, #ff5722);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: bold;
    animation: pulse 2s infinite;
}

#start-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.6);
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 87, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}