/* 1. GLOBAL VARIABLES & RESET */
:root {
    --red-bg-primary: #F13939;   /* The lighter red ray */
    --red-bg-secondary: #C12E2E; /* The darker red ray */
    --blue-footer: #2C317D;      /* The footer background */
    --yellow-btn: #F5D525;       /* The CTA button */
    --white: #ffffff;
    --black-stroke: #2B2B2B;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Rubik', sans-serif;
    color: var(--white);
    overflow-x: hidden; /* Prevents horizontal scrollbar */
}

/* Container to align content nicely */
.container {
    width: 100%;
    max-width: 1200px; /* Limits width on big desktop screens */
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2. HERO SECTION */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Takes up full screen height */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 50px;
    overflow: hidden;
}

/* NATIVE CSS SUNBURST 
   This uses a repeating conic gradient to create the rays */
.sunburst-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts it behind the content */
    background: repeating-conic-gradient(
        from 0deg at 50% 40%, /* Center point of burst (x, y) */
        var(--red-bg-primary) 0deg 15deg,
        var(--red-bg-secondary) 15deg 30deg
    );
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.hero-image {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* Keeps phones behind the title */
}

.title-wrapper {
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 2; /* Ensures title stays on top of the phones */
    
    /* PULLS TITLE UP: Increase this number to overlap more */
    margin-top: -60px; 
    
    /* TIGHTENS GAP TO SUBTITLE: Keep this very low or zero */
    margin-bottom: 0; 
}

.game-title-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible; 
}

.game-title-svg .svg-text {
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    fill: white;
    font-size: 64px;
    stroke: var(--black-stroke);
    stroke-width: 18px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

.subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    /* Removed margin-top to keep it tight to the title above */
    margin-top: 5px; 
    margin-bottom: 25px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.svg-text-top {
    font-size: 50px;
}

.svg-text-bottom {
    font-size: 50px;
}

.cta-button {
    background-color: var(--yellow-btn);
    color: #373D9C;
    font-weight: 800;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    margin-bottom: 30px;
    box-shadow: 0 4px 0 #C4AA1E; /* Little 3D effect on button */
    transition: transform 0.1s;
}

.cta-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #C4AA1E;
}

.app-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.app-buttons img {
    height: 45px; /* Adjust based on your button asset size */
}

/* 3. FOOTER SECTION */
.footer {
    background-color: var(--blue-footer);
    padding: 40px 0;
    text-align: left;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 40px;
    height: 40px;
}

.brand-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.brand-text p {
    font-size: 0.8rem;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

.footer-apps {
    justify-content: flex-start; /* Align left in footer */
}

.footer-email {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 10px;
}

/* 4. PRIVACY PAGE STYLES */
.privacy-page {
    background-color: #f4f4f4;
    color: #333;
}
.privacy-header {
    background-color: var(--blue-footer);
    padding: 20px 0;
}
.privacy-header a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
.privacy-content {
    padding: 60px 20px;
    min-height: 60vh;
}
.privacy-content h1 {
    margin-bottom: 20px;
}
.privacy-content p {
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 5. MOBILE RESPONSIVENESS */
/* These rules apply if screen is smaller than 768px (Tablets/Phones) */
@media (max-width: 768px) {

    .title-wrapper {
        max-width: 340px;
        margin-top: -40px; /* Slightly less overlap on small screens */
    }
    
    .hero-image {
        max-width: 100%;
        padding: 0 10px;
    }

    .subtitle {
        font-size: 1.1rem;
        margin-top: 0;
    }
    
    /* Ensure footer aligns left properly on mobile (matches screenshot) */
    .footer-content {
        align-items: flex-start; 
    }
}

/* Privacy Page Specifics */
.privacy-page {
    background-color: #ffffff; /* Clean white background for reading */
    color: #333;
}

.privacy-content {
    max-width: 800px; /* Thinner for readability */
    padding: 60px 20px;
}

.privacy-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--blue-footer);
}

.privacy-content h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: var(--blue-footer);
}

.privacy-content p, .privacy-content li {
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 1rem;
}

.privacy-content ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.privacy-content a {
    color: var(--red-bg-primary);
    text-decoration: underline;
}