* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
    cursor: url('assets/web/Cursor.webp?v=2') 0 0, default;
}

/* Custom cursor class added to scene when hovering an object */
.scene.custom-cursor {
    cursor: url('assets/web/Cursor_touch.webp?v=2') 0 0, pointer;
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Crucial: CSS pointer events ignore transparency, so we disable it */
    user-select: none;
    -webkit-user-drag: none;
}

.monster-container {
    position: absolute;
    pointer-events: none;
    /* So they don't block clicks */
    overflow: hidden;
    /* Clips them so they never poke out of the window bounds */
}

.monster {
    position: absolute;
    width: 20%;
    /* Small relative scale so 12 fit comfortably */
    height: auto;
    object-fit: contain;
    transform-origin: center;
    pointer-events: auto; /* enable clicks */
    cursor: inherit; /* inherit scene custom cursor so Cursor_touch.webp shows on hover */
    z-index: 1; /* base z-index so hovering brings it up */
}

/* --- PC Browser Overlay --- */
.overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    /* Darkens the room to focus on the window */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    /* Ignore clicks while hidden */
    transition: opacity 0.3s ease;
}

.overlay-container.visible {
    opacity: 1;
    pointer-events: auto;
    /* Catch clicks when visible */
}

.browser-window {
    position: relative;
    width: 80vw;
    aspect-ratio: 16 / 10;
    max-width: 1600px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    /* Floats the window */
    background-color: transparent;
}

.browser-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Invisible Close Button */
.close-btn {
    position: absolute;
    /* Mapped closely to the top-right corner drawing */
    top: 1%;
    right: 1.5%;
    width: 7%;
    height: 10%;
    cursor: pointer;

    /* background-color: rgba(255, 0, 0, 0.3); */
    /* Uncomment this if you need to debug alignment */
    z-index: 10;
}

/* Future Memos Content Box */
.memos-content {
    position: absolute;
    /* Reduced dimensions to sit comfortably inside the beige area without touching the borders */
    top: 14%;
    left: 4%;
    width: 92%;
    height: 80%;
    background: transparent;
    border-radius: 15px;
    /* Larger smooth corners to hide sharp box edges */
    overflow: hidden;
    /* Prevent overflow */
}

.memos-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #1e1e1e;
    /* Match Memos dark mode background */
    color-scheme: dark;
    /* Render dark UI components to match Memos */
}

/* --- Monster Popup Overlay --- */
#monster-popup-image {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    /* Optional shadow to help it pop out distinctly */
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}