/* --- Core Modal Styles --- */

#core-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* Slightly darker for better focus */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease-in-out;
    backdrop-filter: blur(3px); /* Blurs the game behind the modal */
}

#core-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#core-modal-container {
    position: relative;
    /* width and height are set by JS to match native resolution */
    
    /* 
      Use the --modal-scale variable provided by JS. 
      Default to 1 if the variable isn't set yet.
    */
    transform: scale(var(--modal-scale, 1));
    
    /* Transition the transform property for smooth scaling during window resize */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    border-radius: 10px; /* Matches iframe radius */
}

#core-modal-overlay.hidden #core-modal-container {
    /* 
      When hidden, slide down AND use the current scale.
      This ensures the animation is smooth even after a resize.
    */
    transform: translateY(50px) scale(var(--modal-scale, 1));
}

#core-modal-overlay iframe {
    /* The iframe fills the scaled container */
    width: 100%;
    height: 100%;
    border: 1px solid #555;
    border-radius: 10px;
    background-color: #1e1e1e;
    display: block; 
    box-sizing: border-box;
}

#core-modal-close {
    position: absolute;
    /* Scale the button's position/size relative to the container's scale */
    top: calc(10px / var(--modal-scale, 1));
    right: calc(10px / var(--modal-scale, 1));
    width: calc(36px / var(--modal-scale, 1));
    height: calc(36px / var(--modal-scale, 1));
    font-size: calc(28px / var(--modal-scale, 1));
    
    background-color: #fff;
    color: #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1001;
    
    /* Animate the button's properties as the scale changes */
    transition: 
        top 0.4s, right 0.4s, width 0.4s, height 0.4s, font-size 0.4s,
        background-color 0.2s, transform 0.2s;
}

#core-modal-close:hover {
    background-color: #f0f0f0;
    color: #d00;
}