body {
    font-family: 'Inter', sans-serif;
}

.btn {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    cursor: pointer;
    margin: 0.5rem;
    text-align: center;
    border: 2px solid transparent;
}

.btn:hover:not(:disabled):not(.btn-disabled) { /* Ensure hover doesn't apply to .btn-disabled */
    background-color: #2563eb; /* blue-600 */
    transform: translateY(-1px);
}

.btn:active:not(:disabled):not(.btn-disabled) { /* Ensure active doesn't apply to .btn-disabled */
    transform: translateY(0px);
}

.btn-green {
    background-color: #10b981; /* green-500 */
}

.btn-green:hover:not(:disabled):not(.btn-disabled) {
    background-color: #059669; /* green-700 */
}

.btn-secondary {
    background-color: #6b7280; /* gray-500 */
}
.btn-secondary:hover:not(:disabled):not(.btn-disabled) {
    background-color: #4b5563; /* gray-600 */
}

.btn-back { /* Style for the back button */
    background-color: #ef4444; /* red-500 */
}
.btn-back:hover:not(:disabled) {
    background-color: #dc2626; /* red-600 */
}

/* Style for disabled buttons (applied to <a> tags) */
.btn-disabled {
    background-color: #4b5563; /* gray-600 or slate-600 */
    color: #9ca3af;           /* gray-400 or slate-400 for text */
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;      /* Prevents click events on the <a> tag */
}
/* Ensure hover on .btn-disabled doesn't change its appearance */
.btn-disabled:hover {
    background-color: #4b5563; /* Keep the same background */
    transform: none; /* No lift effect */
}


.content-card {
    background-color: #1f2937; /* slate-800 */
    color: #e5e7eb;           /* slate-200 */
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    text-align: center;
    width: 100%;
    max-width: 64rem; /* Increased max-width for iframe content */
}

.footer-text {
    color: #6b7280; /* gray-500 */
    font-size: 0.875rem; /* text-sm */
}

/* Styles for the iframe container and iframe itself */
#gameDisplayContainer {
    width: 100%;
    height: 70vh; /* Example: 70% of viewport height */
    margin-top: 1.5rem; /* my-6 */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden; /* To contain the iframe's rounded corners if any */
}

#gameFrame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5rem; /* rounded-lg */
}