/* Sikkim Game Download - Main Stylesheet */

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

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Animated Background Effects */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
    animation: backgroundShift 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes backgroundShift {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-20px) translateY(-10px); }
    50% { transform: translateX(20px) translateY(10px); }
    75% { transform: translateX(-10px) translateY(20px); }
}

/* Floating particles effect */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s infinite linear;
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Header Styles */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #667eea;
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-menu a:hover {
    color: #667eea;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #667eea;
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Main Content */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.hero-section {
    padding: 80px 0;
    color: white;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-text {
    text-align: left;
}

.hero-image {
    text-align: center;
}

.hero-img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.hero-img:hover {
    transform: scale(1.05);
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
    animation: fadeInUp 1s ease-out 0.3s both;
}

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

/* Login/Register Section */
.auth-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out 0.6s both;
}

.auth-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #333;
}

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

.btn {
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
}

.btn-secondary {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    color: white;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Content Sections */
.content-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.section-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

/* Footer */
.footer {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    padding: 40px 20px;
    margin-top: 80px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

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

.footer-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #667eea;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .auth-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body {
        background: #000;
        color: #fff;
    }
    
    .header, .auth-section, .content-section {
        background: #000;
        border: 2px solid #fff;
    }
}

/* Focus indicators for keyboard navigation */
a:focus, button:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Contact Form Styles */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 0.9rem;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.checkbox-group label {
    margin: 0;
    font-weight: normal;
    line-height: 1.4;
}

/* Form validation styles */
.form-group input:invalid,
.form-group select:invalid,
.form-group textarea:invalid {
    border-color: #e74c3c;
}

.form-group input:valid,
.form-group select:valid,
.form-group textarea:valid {
    border-color: #27ae60;
}

/* Enhanced button styles */
.btn {
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::after {
    width: 300px;
    height: 300px;
}

/* Additional responsive improvements */
@media (max-width: 480px) {
    .contact-form {
        padding: 20px;
        margin: 0 10px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.feature-image {
    text-align: center;
    margin-bottom: 20px;
}

.feature-img {
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.feature-img:hover {
    transform: scale(1.05);
}

.feature-content h3 {
    color: #667eea;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.feature-content p {
    color: #555;
    line-height: 1.6;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.category-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.category-image {
    position: relative;
    overflow: hidden;
}

.category-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-img:hover {
    transform: scale(1.1);
}

.category-content {
    padding: 25px;
}

.category-content h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.category-content p {
    color: #666;
    line-height: 1.6;
}

/* Feature Icons */
.feature-img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.feature-img:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

/* Secure Gaming Icon */
.feature-item:nth-child(1) .feature-img::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='shieldGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e3f2fd;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 10 L20 25 L20 50 C20 70 35 85 50 90 C65 85 80 70 80 50 L80 25 Z' fill='url(%23shieldGrad)' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='50' cy='45' r='8' fill='%234caf50'/%3E%3Cpath d='M46 45 L49 48 L54 43' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    display: block;
}

/* Game Showcase Icon */
.feature-item:nth-child(2) .feature-img::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='gameGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e3f2fd;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='15' y='25' width='70' height='50' rx='8' fill='url(%23gameGrad)' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='20' y='30' width='15' height='10' rx='2' fill='%23ff9800'/%3E%3Crect x='40' y='30' width='15' height='10' rx='2' fill='%23e91e63'/%3E%3Crect x='60' y='30' width='15' height='10' rx='2' fill='%234caf50'/%3E%3Crect x='20' y='45' width='15' height='10' rx='2' fill='%232196f3'/%3E%3Crect x='40' y='45' width='15' height='10' rx='2' fill='%239c27b0'/%3E%3Crect x='60' y='45' width='15' height='10' rx='2' fill='%23ff5722'/%3E%3Ccircle cx='50' cy='65' r='3' fill='%23ffffff'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    display: block;
}

/* Customer Support Icon */
.feature-item:nth-child(3) .feature-img::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='supportGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e3f2fd;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 35 C30 25 38 17 50 17 C62 17 70 25 70 35 C70 45 62 53 50 53 C48 53 46 52 44 52 L35 60 L40 55 C35 50 30 43 30 35 Z' fill='url(%23supportGrad)' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='45' cy='35' r='2' fill='%232196f3'/%3E%3Ccircle cx='55' cy='35' r='2' fill='%232196f3'/%3E%3Cpath d='M42 42 Q50 48 58 42' stroke='%232196f3' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M25 30 L15 25 L20 35' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    display: block;
}

/* Mobile Compatible Icon */
.feature-item:nth-child(4) .feature-img::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='mobileGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e3f2fd;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='35' y='15' width='30' height='60' rx='6' fill='url(%23mobileGrad)' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='40' y='25' width='20' height='35' rx='2' fill='%232196f3'/%3E%3Ccircle cx='50' cy='65' r='2' fill='%23ffffff'/%3E%3Crect x='47' y='75' width='6' height='2' rx='1' fill='%23ffffff'/%3E%3Cpath d='M20 30 L30 25 L25 35' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M80 30 L70 25 L75 35' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    display: block;
}

/* Fast Loading Icon */
.feature-item:nth-child(5) .feature-img::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='speedGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e3f2fd;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 20 L70 30 L65 50 L50 60 L35 50 L30 30 Z' fill='url(%23speedGrad)' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M50 20 L60 25 L55 40 L50 45 L45 40 L40 25 Z' fill='%23ff9800'/%3E%3Cpath d='M50 45 L55 50 L50 70 L45 50 Z' fill='%23ff5722'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23ffffff'/%3E%3Cpath d='M15 25 L25 20 L20 30' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M85 25 L75 20 L80 30' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    width: 60px;
    height: 60px;
    display: block;
}

/* Image Placeholder Styles for other images */
.hero-img,
.category-img {
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 1rem;
    position: relative;
}

.hero-img::before {
    content: "Hero Image Placeholder";
}

.category-img::before {
    content: "Category Image";
}

/* Responsive adjustments for images */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-text {
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-item {
        padding: 20px;
    }
    
    .category-content {
        padding: 20px;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .btn,
    .contact-form {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .content-section {
        background: white;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}