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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #1a0b3d 0%, #2d1b69 25%, #0f172a 50%, #1e293b 75%, #1a0b3d 100%);
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Star Field Background */
.star-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.stars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        25px 5px white, 50px 25px white, 75px 15px white, 100px 35px white,
        125px 10px white, 150px 30px white, 175px 20px white, 200px 40px white,
        225px 8px white, 250px 28px white, 275px 18px white, 300px 38px white,
        325px 12px white, 350px 32px white, 375px 22px white, 400px 42px white,
        425px 6px white, 450px 26px white, 475px 16px white, 500px 36px white,
        525px 14px white, 550px 34px white, 575px 24px white, 600px 44px white,
        625px 9px white, 650px 29px white, 675px 19px white, 700px 39px white,
        725px 11px white, 750px 31px white, 775px 21px white, 800px 41px white,
        825px 7px white, 850px 27px white, 875px 17px white, 900px 37px white,
        925px 13px white, 950px 33px white, 975px 23px white, 1000px 43px white,
        1025px 15px white, 1050px 35px white, 1075px 25px white, 1100px 45px white,
        1125px 5px white, 1150px 25px white, 1175px 15px white, 1200px 35px white;
    animation: sparkle 3s linear infinite;
}

.large-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.large-stars::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 
        100px 100px #00d4ff, 300px 200px #8b5cf6, 500px 150px #f72585,
        700px 250px #00d4ff, 200px 300px #8b5cf6, 400px 350px #f72585,
        600px 50px #00d4ff, 800px 400px #8b5cf6, 150px 450px #f72585,
        350px 500px #00d4ff, 550px 550px #8b5cf6, 750px 100px #f72585,
        950px 200px #00d4ff, 50px 250px #8b5cf6, 250px 150px #f72585,
        450px 300px #00d4ff, 650px 350px #8b5cf6, 850px 450px #f72585,
        1050px 500px #00d4ff, 1150px 50px #8b5cf6;
    animation: twinkle 4s ease-in-out infinite alternate;
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particles::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: #8b5cf6;
    border-radius: 50%;
    box-shadow: 
        80px 80px #8b5cf6, 180px 180px #8b5cf6, 280px 120px #8b5cf6,
        380px 220px #8b5cf6, 480px 160px #8b5cf6, 580px 260px #8b5cf6,
        680px 80px #8b5cf6, 780px 180px #8b5cf6, 880px 120px #8b5cf6,
        980px 220px #8b5cf6, 120px 320px #8b5cf6, 220px 420px #8b5cf6,
        320px 360px #8b5cf6, 420px 460px #8b5cf6, 520px 400px #8b5cf6;
    animation: float 6s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes twinkle {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.2); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Age Verification Modal */
.age-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.age-modal-content {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(59, 130, 246, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 1.5rem;
    padding: 2rem;
    max-width: 28rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.age-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
}

.age-modal h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.warning-box {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.warning-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
}

.warning-content svg {
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.warning-content p {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.warning-content p:last-child {
    margin-bottom: 0;
    font-size: 0.75rem;
    color: #fde68a;
}

.age-description {
    font-size: 0.875rem;
    color: #d1d5db;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.age-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.btn-verify {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(1);
}

.btn-verify:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}

.btn-reject {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-reject:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
}

.age-disclaimer {
    padding-top: 1rem;
    border-top: 1px solid rgba(107, 114, 128, 0.3);
}

.age-disclaimer p {
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* Header */
.header {
    position: relative;
    z-index: 40;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.logo h1 {
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.desktop-nav {
    display: none;
    align-items: center;
    gap: 2rem;
}

.desktop-nav a {
    color: #d1d5db;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.desktop-nav a:hover {
    color: #00d4ff;
}

.mobile-menu-btn {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-btn span {
    width: 1.5rem;
    height: 2px;
    background: #d1d5db;
    transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-nav {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 212, 255, 0.2);
}

.mobile-nav.active {
    display: flex;
}

.mobile-nav a {
    color: #d1d5db;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.mobile-nav a:hover {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
}

/* Main Content */
.main-content {
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero {
    padding: 5rem 0;
    text-align: center;
}

.hero-content {
    max-width: 4xl;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: bold;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6, #f72585);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    animation: pulse 2s ease-in-out infinite alternate;
}

.hero-description {
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: #d1d5db;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    transform: scale(1);
}

.btn-primary {
    background: linear-gradient(135deg, #00d4ff, #8b5cf6);
    color: white;
    box-shadow: 0 10px 25px -5px rgba(0, 212, 255, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0ea5e9, #7c3aed);
    transform: scale(1.05);
    box-shadow: 0 20px 40px -10px rgba(0, 212, 255, 0.6);
}

.btn-secondary {
    background: transparent;
    border: 2px solid #00d4ff;
    color: #00d4ff;
}

.btn-secondary:hover {
    background: #00d4ff;
    color: #000;
    transform: scale(1.05);
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
}

.section-header p {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* About Section */
.about {
    padding: 4rem 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 6xl;
    margin: 0 auto;
}

.about-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(59, 130, 246, 0.4) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
}

.about-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.about-card:nth-child(1) .about-icon {
    background: linear-gradient(135deg, #00d4ff, #8b5cf6);
}

.about-card:nth-child(2) .about-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.about-card:nth-child(3) .about-icon {
    background: linear-gradient(135deg, #f72585, #dc2626);
}

.about-card h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
}

.about-card p {
    color: #d1d5db;
    line-height: 1.6;
}

/* Games Section */
.games {
    padding: 4rem 0;
}

.games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 6xl;
    margin: 0 auto;
}

.game-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(59, 130, 246, 0.4) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    transform: scale(1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.game-card:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 212, 255, 0.2);
}

.game-thumbnail {
    position: relative;
    height: 12rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(0, 212, 255, 0.2) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-emoji {
    font-size: 4rem;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
    animation: float 3s ease-in-out infinite;
}

.game-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.game-category {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.8), rgba(139, 92, 246, 0.8));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.game-card:hover .play-overlay {
    opacity: 1;
}

.play-btn-overlay {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(1);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}

.play-btn-overlay:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: scale(1.1);
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.6);
}

.game-content {
    padding: 1.5rem;
}

.game-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
}

.game-description {
    color: #d1d5db;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.game-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.feature-tag {
    padding: 0.25rem 0.5rem;
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.play-btn {
    width: 100%;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 212, 255, 0.4);
}

.play-btn:hover {
    background: linear-gradient(135deg, #0ea5e9, #7c3aed);
    transform: scale(1.05);
    box-shadow: 0 20px 40px -10px rgba(0, 212, 255, 0.6);
}

.demo-notice {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 0.5rem;
}

/* Featured Section */
.featured {
    padding: 4rem 0;
}

.featured-content {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6) 0%, rgba(59, 130, 246, 0.6) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 2rem;
    padding: 2rem;
    max-width: 4xl;
    margin: 0 auto;
}

.featured-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.featured-header svg {
    color: #fbbf24;
}

.featured-header h2 {
    font-size: 1.875rem;
    font-weight: bold;
    color: white;
}

.featured-highlight {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(249, 115, 22, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.featured-highlight h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
}

.featured-highlight p {
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.highlight {
    color: #00d4ff;
    font-weight: 600;
}

.featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.featured-tags span {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
}

.featured-tags span:nth-child(1) {
    background: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.featured-tags span:nth-child(2) {
    background: rgba(0, 212, 255, 0.3);
    color: #7dd3fc;
}

.featured-tags span:nth-child(3) {
    background: rgba(247, 37, 133, 0.3);
    color: #f9a8d4;
}

.featured-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.info-card {
    border-radius: 0.75rem;
    padding: 1rem;
}

.info-card:nth-child(1) {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.info-card:nth-child(2) {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.info-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.info-card:nth-child(1) .info-header svg,
.info-card:nth-child(1) .info-header span {
    color: #10b981;
}

.info-card:nth-child(2) .info-header svg,
.info-card:nth-child(2) .info-header span {
    color: #3b82f6;
}

.info-header span {
    font-weight: 600;
    font-size: 0.875rem;
}

.info-card p {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.5;
}

/* Footer */
.footer {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    margin-top: 4rem;
    padding: 3rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-section h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
}

.footer-section h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.footer-section p {
    color: #d1d5db;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: #9ca3af;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #00d4ff;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #d1d5db;
    font-size: 0.875rem;
}

.contact-item svg {
    color: #00d4ff;
    flex-shrink: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    color: #d1d5db;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #00d4ff;
}

.responsible-gaming-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.responsible-gaming-title svg {
    color: #10b981;
}

.responsible-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.responsible-links p {
    font-size: 0.875rem;
    color: #d1d5db;
    margin-bottom: 0;
}

.responsible-links a {
    color: #00d4ff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.responsible-links a:hover {
    color: #7dd3fc;
}

.footer-disclaimers {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 212, 255, 0.2);
}

.disclaimer-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.disclaimer-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.disclaimer-header svg {
    color: #fbbf24;
}

.disclaimer-header h5 {
    font-weight: 600;
    color: white;
}

.disclaimer-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.disclaimer-content p {
    font-size: 0.75rem;
    color: #fde68a;
    line-height: 1.5;
    margin-bottom: 0;
}

.disclaimer-content a {
    color: #7dd3fc;
    text-decoration: none;
}

.disclaimer-content a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

/* Game Modal */
.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.game-modal.active {
    display: flex;
}

.game-modal-content {
    width: 100%;
    height: 100%;
    max-width: 7xl;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.game-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(59, 130, 246, 0.5) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 1rem 1.5rem;
}

.game-modal-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.game-modal-info svg {
    color: #00d4ff;
}

.game-modal-info h2 {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
}

.demo-badge {
    padding: 0.25rem 0.75rem;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    font-size: 0.875rem;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.close-btn {
    padding: 0.5rem;
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.game-modal-body {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(0, 212, 255, 0.3);
    border-right: 1px solid rgba(0, 212, 255, 0.3);
    position: relative;
}

.game-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.game-loading {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-spinner {
    width: 4rem;
    height: 4rem;
    border: 4px solid rgba(0, 212, 255, 0.3);
    border-top: 4px solid #00d4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.loading-subtitle {
    font-size: 0.875rem;
    color: #d1d5db;
}

.game-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(59, 130, 246, 0.5) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 0 0 0.75rem 0.75rem;
    padding: 0.75rem 1.5rem;
}

.footer-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fbbf24;
    font-size: 0.875rem;
}

.footer-hint {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .featured-info {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
    }

    .mobile-menu-btn {
        display: none;
    }

    .about-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus Styles */
button:focus,
a:focus {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .star-field,
    .age-modal,
    .game-modal {
        display: none !important;
    }
}