/* ========================================
   TreasureHuntSpin - CSS Styles
   Blue/Purple & Gold/Amber Theme
   ======================================== */

/* Root Variables */
:root {
    /* Primary Colors - Blue/Purple */
    --midnightDeep: #0a0a1a;
    --shadowedNavy: #12122a;
    --velvetPurple: #1a1a3e;
    --mysticIndigo: #252550;
    --twilightBlue: #2d2d6b;
    --gentleViolet: #3d3d8a;
    --softPeriwinkle: #4a4a9d;

    /* Accent Colors - Gold/Amber */
    --richGold: #FFD700;
    --amberGlow: #FFA500;
    --goldenBronze: #B8860B;
    --honeyYellow: #FFC107;
    --sunsetOrange: #FF8C00;
    --antiqueBrass: #CD853F;

    /* Text Colors */
    --textPrimary: #f0f0f5;
    --textSecondary: #b0b0c0;
    --textMuted: #707080;
    --textGold: #FFD700;
    --textAmber: #FFA500;

    /* Background Gradients */
    --bgMain: linear-gradient(135deg, var(--midnightDeep) 0%, var(--shadowedNavy) 50%, var(--velvetPurple) 100%);
    --bgCard: linear-gradient(145deg, var(--velvetPurple) 0%, var(--mysticIndigo) 100%);
    --btnPrimary: linear-gradient(135deg, var(--richGold) 0%, var(--amberGlow) 100%);
    --btnSecondary: linear-gradient(135deg, var(--gentleViolet) 0%, var(--twilightBlue) 100%);

    /* Shadows */
    --shadowSoft: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadowGold: 0 4px 20px rgba(255, 215, 0, 0.3);
    --shadowAmber: 0 4px 20px rgba(255, 165, 0, 0.3);
    --shadowDeep: 0 8px 40px rgba(0, 0, 0, 0.6);

    /* Spacing */
    --containerMaxWidth: 1200px;
    --sectionSpacing: 80px 0;
    --borderRadius: 12px;

    /* Fonts */
    --fontHeading: 'Libre Franklin', sans-serif;
    --fontBody: 'Source Serif 4', serif;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fontBody);
    background: var(--bgMain);
    background-attachment: fixed;
    color: var(--textPrimary);
    line-height: 1.6;
    min-height: 100vh;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fontHeading);
    font-weight: 700;
    line-height: 1.2;
}

/* Container */
.treasureContainer {
    max-width: var(--containerMaxWidth);
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   Cookie Popup
   ======================================== */
.treasureCookiePopup {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 500px;
    margin: 0 auto;
    z-index: 9999;
    animation: treasureSlideUp 0.5s ease-out;
}

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

.treasureCookieContent {
    background: var(--bgCard);
    padding: 25px;
    border-radius: var(--borderRadius);
    box-shadow: var(--shadowDeep);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.treasureCookieTitle {
    color: var(--textGold);
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.treasureCookieText {
    color: var(--textSecondary);
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.treasureCookieButtons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.treasureCookieBtn {
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.treasureCookieBtnAccept {
    background: var(--btnPrimary);
    color: var(--midnightDeep);
}

.treasureCookieBtnAccept:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadowGold);
}

.treasureCookieBtnLink {
    background: transparent;
    color: var(--textGold);
    border: 1px solid var(--goldenBronze);
}

.treasureCookieBtnLink:hover {
    background: rgba(255, 215, 0, 0.1);
}

/* ========================================
   Header
   ======================================== */
.treasureHeader {
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.treasureHeaderContainer {
    max-width: var(--containerMaxWidth);
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.treasureLogoSection {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.treasureLogoIcon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.treasureLogoText {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--richGold) 0%, var(--amberGlow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.treasureNavigation {
    display: flex;
    align-items: center;
    gap: 30px;
}

.treasureNavLink {
    color: var(--textPrimary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.treasureNavLink:hover {
    color: var(--textGold);
}

.treasureNavLink::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--btnPrimary);
    transition: width 0.3s ease;
}

.treasureNavLink:hover::after {
    width: 100%;
}

.treasureNavActive {
    color: var(--textGold);
}

.treasureNavActive::after {
    width: 100%;
}

.treasureNavButton {
    background: var(--btnPrimary);
    color: var(--midnightDeep);
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadowGold);
}

.treasureNavButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

/* ========================================
   Burger Menu
   ======================================== */
.treasureBurger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.treasureBurgerLine {
    width: 100%;
    height: 3px;
    background: var(--richGold);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.treasureBurgerActive .treasureBurgerLine:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.treasureBurgerActive .treasureBurgerLine:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.treasureBurgerActive .treasureBurgerLine:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* Navigation Mobile State */
.treasureNavMobileOpen {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 300px;
    height: 100vh;
    background: linear-gradient(180deg, var(--velvetPurple) 0%, var(--midnightDeep) 100%);
    padding: 100px 30px 30px;
    gap: 20px;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    animation: treasureSlideIn 0.3s ease-out;
}

@keyframes treasureSlideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.treasureNavMobileOpen .treasureNavLink,
.treasureNavMobileOpen .treasureNavButton {
    width: 100%;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.treasureNavMobileOpen .treasureNavLink::after {
    display: none;
}

/* Overlay for mobile menu */
.treasureMenuOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    animation: treasureFadeIn 0.3s ease-out;
}

.treasureMenuOverlayActive {
    display: block;
}

@keyframes treasureFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Prevent body scroll when menu is open */
.treasureBodyLocked {
    overflow: hidden;
}

/* ========================================
   Hero Section
   ======================================== */
.treasureHero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.treasureHero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('img/bg.png') center/cover no-repeat;
    z-index: 0;
}

.treasureHeroOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 10, 26, 0.3) 0%, rgba(10, 10, 26, 0.8) 100%);
    z-index: 1;
}

.treasureHeroContent {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;
}

.treasureHeroTitle {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--richGold) 0%, var(--amberGlow) 50%, var(--richGold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
    animation: treasureGlow 3s ease-in-out infinite;
}

@keyframes treasureGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
}

.treasureHeroSubtitle {
    font-size: 1.3rem;
    color: var(--textSecondary);
    margin-bottom: 40px;
    line-height: 1.8;
}

.treasureHeroButtons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   Buttons
   ======================================== */
.treasureBtn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.treasureBtnPrimary {
    background: var(--btnPrimary);
    color: var(--midnightDeep);
    box-shadow: var(--shadowGold);
}

.treasureBtnPrimary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
}

.treasureBtnSecondary {
    background: var(--btnSecondary);
    color: var(--textPrimary);
    border: 2px solid var(--richGold);
}

.treasureBtnSecondary:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-3px);
}

.treasureBtnGame {
    background: var(--btnPrimary);
    color: var(--midnightDeep);
    box-shadow: var(--shadowGold);
}

.treasureBtnGame:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
}

.treasureBtnCTA {
    background: var(--btnPrimary);
    color: var(--midnightDeep);
    padding: 18px 50px;
    font-size: 1.2rem;
    box-shadow: var(--shadowGold);
}

.treasureBtnCTA:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 35px rgba(255, 215, 0, 0.6);
}

/* ========================================
   Section Styles
   ======================================== */
.treasureSectionTitle {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    background: linear-gradient(135deg, var(--richGold) 0%, var(--amberGlow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* About Section */
.treasureAbout {
    padding: var(--sectionSpacing);
}

.treasureAboutText {
    font-size: 1.2rem;
    color: var(--textSecondary);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    line-height: 2;
}

/* Stats Section */
.treasureStats {
    padding: var(--sectionSpacing);
    background: rgba(18, 18, 42, 0.5);
}

.treasureStatsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.treasureStatCard {
    background: var(--bgCard);
    padding: 40px 30px;
    border-radius: var(--borderRadius);
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.treasureStatCard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadowGold);
    border-color: var(--richGold);
}

.treasureStatNumber {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--btnPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.treasureStatLabel {
    font-size: 1.1rem;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Features Section */
.treasureFeatures {
    padding: var(--sectionSpacing);
}

.treasureFeaturesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.treasureFeatureCard {
    background: var(--bgCard);
    padding: 35px;
    border-radius: var(--borderRadius);
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.treasureFeatureCard:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadowGold);
    border-color: var(--richGold);
}

.treasureFeatureTitle {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--textGold);
    margin-bottom: 15px;
}

.treasureFeatureText {
    color: var(--textSecondary);
    line-height: 1.8;
}

/* Games Section */
.treasureGames {
    padding: var(--sectionSpacing);
}

.treasureGameCard {
    display: flex;
    gap: 40px;
    align-items: center;
    background: var(--bgCard);
    padding: 40px;
    border-radius: var(--borderRadius);
    border: 1px solid rgba(255, 215, 0, 0.2);
    flex-wrap: wrap;
}

.treasureGameImage {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    border-radius: var(--borderRadius);
    overflow: hidden;
    box-shadow: var(--shadowSoft);
}

.treasureGamePlaceholder {
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
    display: block;
}

.treasureGameInfo {
    flex: 1;
    min-width: 300px;
}

.treasureGameTitle {
    font-size: 2rem;
    font-weight: 700;
    color: var(--textGold);
    margin-bottom: 20px;
}

.treasureGameDescription {
    color: var(--textSecondary);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* CTA Section */
.treasureCTA {
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(18, 18, 42, 0.8) 0%, rgba(10, 10, 26, 0.9) 100%);
}

.treasureCTATitle {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: var(--btnPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.treasureCTAText {
    font-size: 1.3rem;
    color: var(--textSecondary);
    margin-bottom: 40px;
}

/* ========================================
   Contact Page
   ======================================== */
.treasureContactPage {
    padding: 60px 20px;
    min-height: 60vh;
}

.treasureContactTitle {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    background: var(--btnPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.treasureContactSubtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--textSecondary);
    margin-bottom: 50px;
}

.treasureContactGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px;
}

.treasureContactInfo {
    background: var(--bgCard);
    padding: 40px;
    border-radius: var(--borderRadius);
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.treasureContactInfoTitle {
    font-size: 1.8rem;
    color: var(--textGold);
    margin-bottom: 30px;
}

.treasureContactItem {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.treasureContactItem:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateX(5px);
}

.treasureContactIcon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}

.treasureContactLabel {
    color: var(--textGold);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.treasureContactValue {
    color: var(--textSecondary);
    font-size: 1rem;
}

.treasureContactFormWrapper {
    background: var(--bgCard);
    padding: 40px;
    border-radius: var(--borderRadius);
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.treasureContactFormTitle {
    font-size: 1.8rem;
    color: var(--textGold);
    margin-bottom: 30px;
}

.treasureContactForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.treasureFormField {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.treasureFormLabel {
    color: var(--textPrimary);
    font-size: 0.95rem;
    font-weight: 500;
}

.treasureFormInput,
.treasureFormTextarea {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    color: var(--textPrimary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.treasureFormInput:focus,
.treasureFormTextarea:focus {
    outline: none;
    border-color: var(--richGold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.treasureFormTextarea {
    resize: vertical;
    font-family: inherit;
}

.treasureBtnForm {
    background: var(--btnPrimary);
    color: var(--midnightDeep);
    padding: 15px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.treasureBtnForm:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadowGold);
}

/* Success Message */
.treasureSuccessMessage {
    display: none;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 200, 100, 0.05) 100%);
    border: 2px solid var(--richGold);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin-top: 25px;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.2);
}

.treasureSuccessIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.treasureSuccessIcon svg {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.treasureSuccessTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--richGold);
    margin-bottom: 10px;
}

.treasureSuccessText {
    font-size: 1.1rem;
    color: var(--softGray);
    line-height: 1.6;
}

/* Success message animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ========================================
   Game Page
   ======================================== */
.treasureGamePage {
    padding: 40px 0;
}

.treasureGameFrameWrapper {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: var(--borderRadius);
    margin-bottom: 60px;
}

.treasureGameFrameContainer {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--borderRadius);
    overflow: hidden;
    box-shadow: var(--shadowDeep);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.treasureGameFrame {
    width: 100%;
    height: 100%;
    border: none;
}

.treasureGameBackSection {
    text-align: center;
}

/* ========================================
   Legal Pages
   ======================================== */
.treasureLegalPage {
    padding: 60px 20px;
    min-height: 60vh;
}

.treasureLegalTitle {
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    background: var(--btnPrimary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.treasureLegalUpdated {
    text-align: center;
    color: var(--textMuted);
    margin-bottom: 50px;
}

.treasureLegalContent {
    max-width: 900px;
    margin: 0 auto;
}

.treasureLegalSectionTitle {
    font-size: 1.6rem;
    color: var(--textGold);
    margin: 40px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.treasureLegalSubsectionTitle {
    font-size: 1.3rem;
    color: var(--textAmber);
    margin: 25px 0 10px;
}

.treasureLegalText {
    color: var(--textSecondary);
    line-height: 1.8;
    margin-bottom: 15px;
}

.treasureLegalList {
    list-style: none;
    margin: 15px 0;
    padding-left: 20px;
}

.treasureLegalList li {
    color: var(--textSecondary);
    margin: 10px 0;
    padding-left: 25px;
    position: relative;
}

.treasureLegalList li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--textGold);
    font-size: 1.5rem;
    line-height: 1;
}

.treasureCookieTable {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
}

.treasureCookieTable th,
.treasureCookieTable td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.treasureCookieTable th {
    background: rgba(255, 215, 0, 0.1);
    color: var(--textGold);
    font-weight: 600;
}

.treasureCookieTable td {
    color: var(--textSecondary);
}

.treasureCookieTable tr:hover {
    background: rgba(255, 215, 0, 0.05);
}

/* ========================================
   Footer
   ======================================== */
.treasureFooter {
    background: rgba(5, 5, 15, 0.95);
    border-top: 1px solid rgba(255, 215, 0, 0.15);
    padding: 50px 20px 20px;
    margin-top: 80px;
}

.treasureFooterContainer {
    max-width: var(--containerMaxWidth);
    margin: 0 auto;
}

.treasureFooter18 {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 215, 0, 0.05);
    border: 2px solid var(--richGold);
    border-radius: var(--borderRadius);
}

.treasure18Text {
    color: var(--textSecondary);
    font-size: 1rem;
    max-width: 600px;
    text-align: center;
}

.treasureFooterLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.treasureFooterLink {
    color: var(--textSecondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.treasureFooterLink:hover {
    color: var(--textGold);
}

.treasureFooterBottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
}

.treasureCopyright {
    color: var(--textMuted);
    font-size: 0.9rem;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
    .treasureHeaderContainer {
        position: relative;
    }

    .treasureBurger {
        display: flex;
    }

    .treasureNavigation {
        display: none;
    }

    .treasureHeroTitle {
        font-size: 2.5rem;
    }

    .treasureHeroSubtitle {
        font-size: 1rem;
    }

    .treasureSectionTitle {
        font-size: 1.8rem;
    }

    .treasureGameCard {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .treasureGameImage {
        min-width: 100%;
        max-width: 400px;
    }

    .treasureContactGrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .treasureContactPage {
        padding: 40px 15px;
    }

    .treasureContactTitle {
        font-size: 2rem;
    }

    .treasureContactSubtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .treasureContactInfo,
    .treasureContactFormWrapper {
        padding: 25px;
    }

    .treasureContactInfoTitle,
    .treasureContactFormTitle {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .treasureContactItem {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .treasureContactIcon {
        width: 45px;
        height: 45px;
    }

    .treasureContactLabel {
        font-size: 0.85rem;
    }

    .treasureContactValue {
        font-size: 0.95rem;
    }

    .treasureFormInput,
    .treasureFormTextarea {
        padding: 12px;
        font-size: 0.95rem;
    }

    .treasureBtnForm {
        padding: 12px;
        font-size: 1rem;
    }

    .treasureSuccessMessage {
        padding: 20px;
        margin-top: 20px;
    }

    .treasureSuccessTitle {
        font-size: 1.3rem;
    }

    .treasureSuccessText {
        font-size: 1rem;
    }

    .treasureCookiePopup {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .treasureFooter18 {
        flex-direction: column;
        text-align: center;
    }

    .treasureStatNumber {
        font-size: 2.5rem;
    }

    .treasureCTATitle {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .treasureHeroTitle {
        font-size: 2rem;
    }

    .treasureBtn {
        padding: 12px 25px;
        font-size: 1rem;
    }

    .treasureGameFrameContainer {
        aspect-ratio: 4 / 3;
    }

    /* Contact page specific styles for very small screens */
    .treasureContactPage {
        padding: 30px 10px;
    }

    .treasureContactTitle {
        font-size: 1.6rem;
    }

    .treasureContactSubtitle {
        font-size: 0.9rem;
    }

    .treasureContactInfo,
    .treasureContactFormWrapper {
        padding: 20px;
    }

    .treasureContactItem {
        padding: 12px;
    }

    .treasureContactIcon {
        width: 40px;
        height: 40px;
    }

    .treasureContactIcon svg {
        width: 20px;
        height: 20px;
    }

    .treasureFormInput,
    .treasureFormTextarea {
        padding: 10px;
        font-size: 0.9rem;
    }

    .treasureBtnForm {
        padding: 10px;
        font-size: 0.95rem;
    }

    .treasureSuccessMessage {
        padding: 15px;
        margin-top: 15px;
    }

    .treasureSuccessTitle {
        font-size: 1.2rem;
    }

    .treasureSuccessText {
        font-size: 0.95rem;
    }

    .treasureSuccessIcon svg {
        width: 40px;
        height: 40px;
    }
}