/**
 * ============================================
 * HOMEPAGE - MOBILE-FIRST RESPONSIVE STYLES
 * ============================================
 *
 * Ensures homepage content fills screen properly
 * on all mobile devices WITHOUT scaling.
 *
 * Replaces: responsive-scaler.js (removed)
 * Approach: True responsive design, not scaling
 *
 * Mobile First: 320px (smallest) → 1920px (largest)
 * ============================================
 */

/* ========================================
   RESET & ENSURE NO SCALING
   ======================================== */

html, body {
    /* Prevent any JS-applied transforms */
    transform: none !important;
    transform-origin: unset !important;

    /* Natural sizing */
    width: 100% !important;
    min-width: 320px;
    max-width: 100% !important;
    min-height: 100vh !important;

    /* No fixed widths */
    box-sizing: border-box;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */

.container, .hero-section, .features-section, .games-grid-container {
    width: 100% !important;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* Mobile: Full width with padding */
@media (min-width: 768px) {
    .container, .hero-section, .features-section, .games-grid-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 1024px) {
    .container, .hero-section, .features-section, .games-grid-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* ========================================
   TYPOGRAPHY - RESPONSIVE SIZES
   ======================================== */

h1, .hero-title {
    font-size: clamp(32px, 8vw, 72px);
    line-height: 1.1;
    margin: 0 0 16px 0;
}

h2, .section-title {
    font-size: clamp(28px, 6vw, 56px);
    line-height: 1.2;
    margin: 0 0 16px 0;
}

h3, .card-title {
    font-size: clamp(20px, 4vw, 32px);
    line-height: 1.3;
}

p, .body-text {
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.small-text {
    font-size: clamp(14px, 2vw, 16px);
}

/* ========================================
   BUTTONS - TOUCH-FRIENDLY
   ======================================== */

button, .btn, .cta-button, a.button {
    /* Minimum 44px for touch (WCAG AA) */
    min-height: 48px;
    min-width: 120px;
    padding: 12px 24px;
    font-size: clamp(16px, 2.5vw, 18px);
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button:active, .btn:active {
    transform: scale(0.97);
}

/* Large CTA buttons */
.cta-primary, .hero-cta {
    min-height: 56px;
    padding: 16px 32px;
    font-size: clamp(18px, 3vw, 22px);
}

/* ========================================
   NAVIGATION - MOBILE RESPONSIVE
   ======================================== */

nav, .navbar, .header-nav {
    width: 100%;
    padding: 12px 16px;
}

@media (min-width: 768px) {
    nav, .navbar, .header-nav {
        padding: 16px 32px;
    }
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.nav-link {
    padding: 10px 16px;
    font-size: clamp(14px, 2.2vw, 16px);
    white-space: nowrap;
}

/* ========================================
   HERO SECTION - MOBILE OPTIMIZED
   ======================================== */

.hero {
    padding: 32px 16px;
    text-align: center;
}

@media (min-width: 768px) {
    .hero {
        padding: 64px 32px;
    }
}

@media (min-width: 1024px) {
    .hero {
        padding: 96px 48px;
        text-align: left;
    }
}

.hero-content {
    max-width: 100%;
}

@media (min-width: 768px) {
    .hero-content {
        max-width: 600px;
    }
}

/* ========================================
   GAME TILES/CARDS - RESPONSIVE GRID
   ======================================== */

.games-grid, .features-grid, .card-grid {
    display: grid;
    gap: 16px;
    width: 100%;

    /* Mobile: 1 column */
    grid-template-columns: 1fr;
}

/* Small tablets: 2 columns */
@media (min-width: 600px) {
    .games-grid, .features-grid, .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Tablets: 3 columns */
@media (min-width: 900px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* Desktop: 4-5 columns */
@media (min-width: 1200px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }
}

/* Game tiles/cards */
.game-tile, .feature-card, .card {
    padding: 20px;
    border-radius: 16px;
    transition: transform 0.2s;
}

.game-tile:active, .feature-card:active, .card:active {
    transform: scale(0.98);
}

/* Ensure images scale properly */
.game-tile img, .feature-card img, .card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

/* ========================================
   TOUCH TARGETS - MINIMUM 44PX
   ======================================== */

a, button, .clickable, [onclick], [role="button"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon buttons */
.icon-button, .close-button {
    width: 48px;
    height: 48px;
    padding: 12px;
}

/* ========================================
   FORMS - MOBILE FRIENDLY
   ======================================== */

input, textarea, select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 8px;
    border: 1px solid #ccc;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(14px, 2.2vw, 16px);
    font-weight: 600;
}

/* ========================================
   SPACING SYSTEM - RESPONSIVE
   ======================================== */

.spacing-xs { margin: 8px 0; }
.spacing-sm { margin: 16px 0; }
.spacing-md { margin: 24px 0; }
.spacing-lg { margin: 32px 0; }
.spacing-xl { margin: 48px 0; }

@media (min-width: 768px) {
    .spacing-md { margin: 32px 0; }
    .spacing-lg { margin: 48px 0; }
    .spacing-xl { margin: 64px 0; }
}

@media (min-width: 1024px) {
    .spacing-lg { margin: 64px 0; }
    .spacing-xl { margin: 96px 0; }
}

/* ========================================
   PROMO BANNER - RESPONSIVE
   ======================================== */

.promo-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 12px 16px;
    font-size: clamp(14px, 2.2vw, 16px);
    text-align: center;
}

@media (min-width: 768px) {
    .promo-banner {
        padding: 16px 32px;
    }
}

/* ========================================
   FOOTER - RESPONSIVE
   ======================================== */

footer {
    padding: 32px 16px;
    font-size: clamp(14px, 2vw, 16px);
}

@media (min-width: 768px) {
    footer {
        padding: 48px 32px;
    }
}

.footer-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

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

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

/* ========================================
   MODAL - MOBILE OPTIMIZED
   ======================================== */

.modal-content {
    width: 100%;
    max-width: 90vw;
    padding: 24px;
    border-radius: 12px;
}

@media (min-width: 768px) {
    .modal-content {
        max-width: 500px;
        padding: 32px;
        border-radius: 16px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide on mobile */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none;
    }
}

/* Text alignment */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

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

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* GPU acceleration for transforms */
.animated, .card, .button, .game-tile {
    will-change: transform;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus indicators */
*:focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

/* Skip to main content */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007bff;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   FIX SPECIFIC ELEMENTS
   ======================================== */

/* Ensure no element has fixed desktop width */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal overflow */
* {
    max-width: 100%;
}

/* Safe area for notched devices */
body {
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
}