/* Custom CSS styles can be added here if needed */

/* --- Logo Animation --- */
.logo {
    font-family: 'Orbitron', sans-serif; /* Using Orbitron for a futuristic feel */
    font-weight: 700;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 10s ease infinite, subtle3D 8s ease-in-out infinite alternate;
    text-shadow: 
        0 0 5px rgba(0, 255, 255, 0.5),
        0 0 10px rgba(0, 255, 255, 0.5),
        0 0 15px rgba(255, 0, 255, 0.5),
        0 0 20px rgba(255, 0, 255, 0.5);
    /* Add perspective for 3D effect */
    transform-style: preserve-3d;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subtle 3D rotation effect */
@keyframes subtle3D {
    0% {
        transform: perspective(500px) rotateX(5deg) rotateY(-5deg);
    }
    100% {
        transform: perspective(500px) rotateX(-5deg) rotateY(5deg);
    }
}

/* Style for active language button */
.lang-btn.active {
    background-color: #2563eb; /* blue-600 */
    font-weight: bold;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
}

/* Ensure iframe container allows absolute positioning of button */
#game-section {
    position: relative;
}

/* Tailwind's prose plugin might need adjustments for specific tags if used extensively */
/* Example: Adjust heading margins if needed */
/* .prose h2 {
    margin-bottom: 1em;
} */

/* Style for the fullscreen button icon */
#fullscreen-btn svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25rem; /* Add space between icon and text */
}

/* General body styling using Tailwind defaults overridden here if necessary */
body {
    /* Example: Adding a subtle background pattern or gradient if needed */
    /* background-image: linear-gradient(to bottom right, #1a202c, #2d3748); */
}

/* Tailwind prose overrides for better readability */
.prose {
    color: #d1d5db; /* gray-300 */
}

.prose h1, .prose h2, .prose h3 {
    color: #60a5fa; /* blue-400 */
    margin-bottom: 0.5em; /* Adjust spacing */
}

.prose a {
    color: #93c5fd; /* blue-300 */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.prose a:hover {
    color: #3b82f6; /* blue-500 */
}

.prose ul > li::before, .prose ol > li::before {
    background-color: #60a5fa; /* blue-400 */
}

.prose blockquote {
    color: #9ca3af; /* gray-400 */
    border-left-color: #60a5fa; /* blue-400 */
}