/* Global CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom Tailwind Colors */
.bg-purple-950 { background-color: #1a0033; }
.bg-purple-900 { background-color: #2b004d; }
.bg-purple-800 { background-color: #3d0066; }
.bg-purple-700 { background-color: #4f0080; }
.text-amber-400 { color: #fbbf24; }
.border-amber-400 { border-color: #fbbf24; }
.focus\:border-amber-400:focus { border-color: #fbbf24; }
.focus\:ring-amber-400:focus { --tw-ring-color: #fbbf24; }
.text-red-900 { color: #8b0000; }
.bg-red-900 { background-color: #8b0000; }
.border-red-700 { border-color: #b91c1c; }

/* Responsive Typography for Headings */
h1 {
    font-size: 2.25rem; /* Mobile */
}
@media (min-width: 768px) {
    h1 {
        font-size: 3.5rem; /* Tablet */
    }
}
@media (min-width: 1024px) {
    h1 {
        font-size: 4.5rem; /* Desktop */
    }
}

h2 {
    font-size: 1.875rem; /* Mobile */
}
@media (min-width: 768px) {
    h2 {
        font-size: 2.5rem; /* Tablet */
    }
}
@media (min-width: 1024px) {
    h2 {
        font-size: 3rem; /* Desktop */
    }
}

.text-3xl {
    font-size: 1.5rem; /* Mobile for smaller headings/logo */
}
@media (min-width: 768px) {
    .text-3xl {
        font-size: 1.875rem; /* Tablet */
    }
}
@media (min-width: 1024px) {
    .text-3xl {
        font-size: 2.25rem; /* Desktop */
    }
}

/* Hero Section Background Animation */
.game-cards-background {
    position: absolute;
    width: 200%; /* Double width to allow seamless loop */
    height: 100%;
    display: flex;
    gap: 2rem;
    animation: slideBackground 60s linear infinite;
}

.game-card {
    min-width: 12rem; /* Ensure cards have a fixed width */
    height: 16rem;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
    opacity: 0.6;
    filter: brightness(0.8);
}

/* Adjust number of cards and their positions for a dense, flowing background */
.game-cards-background img:nth-child(1) { top: 10%; left: 0%; transform: rotate(5deg); }
.game-cards-background img:nth-child(2) { top: 50%; left: 15%; transform: rotate(-8deg); }
.game-cards-background img:nth-child(3) { top: 25%; left: 30%; transform: rotate(3deg); }
.game-cards-background img:nth-child(4) { top: 70%; left: 45%; transform: rotate(-6deg); }
.game-cards-background img:nth-child(5) { top: 15%; left: 60%; transform: rotate(7deg); }
.game-cards-background img:nth-child(6) { top: 60%; left: 75%; transform: rotate(-4deg); }
.game-cards-background img:nth-child(7) { top: 30%; left: 90%; transform: rotate(2deg); }
.game-cards-background img:nth-child(8) { top: 80%; left: 105%; transform: rotate(-9deg); }
.game-cards-background img:nth-child(9) { top: 40%; left: 120%; transform: rotate(6deg); }

@keyframes slideBackground {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hero Text Animation */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-up.delay-100 { animation-delay: 0.1s; }
.animate-fade-in-up.delay-200 { animation-delay: 0.2s; }
.animate-fade-in-up.delay-300 { animation-delay: 0.3s; }
.animate-fade-in-up.delay-400 { animation-delay: 0.4s; }
.animate-fade-in-up.delay-500 { animation-delay: 0.5s; }
.animate-fade-in-up.delay-600 { animation-delay: 0.6s; }

.animate-fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
    opacity: 0;
    transform: translateX(20px);
    animation: fadeInRight 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Rotating Text for Hero */
.rotating-text-hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.rotating-text-visible {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Mobile Navigation */
#mobileNav {
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    padding-top: 5rem; /* Space for close button */
}

/* Game Card Images */
.game-card-item img {
    height: 16rem; /* Fixed height for consistency */
    object-fit: contain;
}

/* Game Modal */
#gameModal {
    display: none; /* Hidden by default */
    overflow: hidden; /* Prevent scroll on modal itself */
}

#gameModal.active {
    display: flex;
}

#gameIframe {
    width: 100%;
    height: 100%;
}

/* FAQ Accordion */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}
.faq-content.active {
    max-height: 500px; /* Arbitrary large value for smooth transition */
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.faq-icon {
    transition: transform 0.3s ease-in-out;
}
.faq-toggle[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

/* Form elements */
input[type="text"], input[type="email"], textarea {
    background-color: #4f0080; /* purple-700 */
    color: #f3f4f6; /* gray-100 */
    border: 1px solid #4f0080; /* purple-700 */
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: #fbbf24; /* amber-400 */
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5); /* ring-amber-400 with opacity */
}

/* Ensure buttons don't have underlines */
button {
    text-decoration: none !important;
}

/* Prevent horizontal scroll on mobile */
body {
    overflow-x: hidden;
}

/* Word break for emails/links */
.word-break\: break-all { word-break: break-all; }
/* Parent container styles for terms and conditions box */
.termsCaveBox {
    margin-top: 40px; /* Top spacing for the entire box */
    padding: 24px; /* Internal padding on all sides */
    /* You might want to add background-color, border, or border-radius here if needed */
    /* background-color: #f9f9f9; */
    /* border: 1px solid #eee; */
    /* border-radius: 8px; */
}

/* Heading 1 styles within termsCaveBox */
.termsCaveBox h1 {
    font-size: 32px; /* Moderate size for a main heading */
    line-height: 1.3; /* Improved readability */
    font-weight: 700; /* Bold */
    margin-bottom: 24px; /* Space below the heading */
}

/* Heading 2 styles within termsCaveBox */
.termsCaveBox h2 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Heading 3 styles within termsCaveBox */
.termsCaveBox h3 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Heading 4 styles within termsCaveBox */
.termsCaveBox h4 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Heading 5 styles within termsCaveBox */
.termsCaveBox h5 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Paragraph styles within termsCaveBox */
.termsCaveBox p {
    font-size: 16px; /* Standard body text size */
    line-height: 1.6; /* Good readability for paragraphs */
    margin-bottom: 16px; /* Space between paragraphs */
}

/* Unordered list styles within termsCaveBox */
.termsCaveBox ul {
    list-style-type: disc; /* Default bullet style */
    padding-left: 24px; /* Indent for bullet points */
    margin-bottom: 16px; /* Space after the entire list */
}

/* List item styles within termsCaveBox */
.termsCaveBox li {
    font-size: 16px; /* Consistent font size with paragraphs */
    line-height: 1.6; /* Consistent line height with paragraphs */
    margin-bottom: 8px; /* Space between individual list items */
}

/* Remove bottom margin for the last list item to prevent extra space */
.termsCaveBox li:last-child {
    margin-bottom: 0;
}