/* Ensure the modal is a full-screen overlay, always on top */
#jokerfun-game-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 99999 !important;
    background: radial-gradient(circle, #6450A7, #2C202C) !important; /* Radial gradient background */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

#jokerfun-game-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
}

#jokerfun-game-modal.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- Loading Indicator Styling --- */
#jokerfun-loading-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #eab308;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 100000;
    display: none;
}

#jokerfun-loading-bar::before,
#jokerfun-loading-bar::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 4px solid transparent;
}

#jokerfun-loading-bar::before {
    width: 60px;
    height: 60px;
    top: 10px;
    left: 10px;
    border-top-color: #ef4444;
    animation: spin 1.5s linear infinite reverse;
}

#jokerfun-loading-bar::after {
    width: 40px;
    height: 40px;
    top: 20px;
    left: 20px;
    border-top-color: #10b981;
    animation: spin 2s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ensure the inner container for the game also takes full space */
#jokerfun-game-modal > div:first-child {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Ensure the game content area and its iframe fill their parent */
#jokerfun-game-content {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    display: none;
    padding: 2rem !important;
    box-sizing: border-box !important;
}

#jokerfun-game-content iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* Close button positioning and styling (FIXED TAILWIND CLASSES HERE) */
#jokerfun-close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100001;
    cursor: pointer;
    line-height: 1; /* For cleaner 'x' button */

    /* Correct CSS properties corresponding to former Tailwind classes */
    color: #ffffff; /* text-white */
    font-size: 1.875rem; /* text-3xl (approx 30px) */
    font-weight: 700; /* font-bold */
    padding: 0.5rem; /* p-2 (approx 8px) */
    background-color: #dc2626; /* bg-red-600 */
    border-radius: 9999px; /* rounded-full */
}

/* Hover effect for the close button */
#jokerfun-close-modal:hover {
    background-color: #b91c1c; /* hover:bg-red-700 (a darker red) */
}

/* CSS to prevent body scroll when modal is active */
body.jokerfun-modal-open {
    overflow: hidden !important;
}

/* Specific styles for interacty iframes if they use padding hacks */
/* These styles should be applied if Interacty's embed changes, or if you want to ensure it works. */
/* The general idea is to make sure the iframe fills its parent div for full screen */
.interacty_padding {
    position: relative;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.interacty_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.interacty_wrapper iframe {
    border: none;
    width: 100%;
    height: 100%;
}