/**
 * Alpha Kids - Responsive Viewport Scaler
 * Automatically scales the entire application to fit any screen size
 * while maintaining the original design proportions (MacBook Pro 14" base)
 */

:root {
    /* Base Design Screen - MacBook Pro 14" (2022 M2) */
    --base-width: 1512px;
    --base-height: 982px;

    /* Calculated scale factors (set by JavaScript) */
    --scale-x: 1;
    --scale-y: 1;
    --scale-factor: 1;

    /* Minimum scale to prevent too small UI */
    --min-scale: 0.65;
}

/* Landscape orientation enforcement */
@media (orientation: portrait) {
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body::before {
        content: '📱 Please rotate your device to landscape mode for the best experience';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999999;
        background: white;
        padding: 2rem;
        border-radius: 20px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 600;
        color: #1a1a2e;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        max-width: 80%;
        line-height: 1.6;
        animation: rotatePrompt 2s ease-in-out infinite;
    }

    @keyframes rotatePrompt {
        0%, 100% { transform: translate(-50%, -50%) scale(1); }
        50% { transform: translate(-50%, -50%) scale(1.05); }
    }
}

/* Prevent content from breaking during scale */
html.scaling-active {
    overflow-x: auto;
    overflow-y: auto;
}

/* Ensure smooth scaling transitions (JS applies transform directly to body) */
html.scaling-active body {
    transition: transform 0.2s ease-out;
}

/* Override mobile-specific styles that break the layout */
@media (max-width: 768px) {
    /* Force desktop layout - no single column */
    .games-tiles {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 1.25rem !important;
    }

    .age-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Prevent text from being too small */
    .welcome-title,
    .welcome-subtitle,
    .game-tile-title,
    .game-tile-desc,
    .age-title {
        font-size: inherit !important;
    }

    /* Keep animations enabled for smooth experience */
    body::before,
    .game-icon-large,
    .play-button,
    .welcome-title {
        animation: initial !important;
    }
}

/* Tablet screens - maintain desktop layout */
@media (min-width: 768px) and (max-width: 1024px) {
    .games-tiles {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }
}

/* Very small screens - ensure readability */
@media (max-width: 480px) {
    .user-name {
        display: inline !important;
        font-size: calc(0.85rem * var(--scale-factor)) !important;
    }
}

/* Prevent zoom on input focus (mobile Safari) */
input,
select,
textarea,
button {
    font-size: 16px !important;
}

/* Ensure touch targets remain accessible after scaling */
.btn-nav,
.btn-logout,
.game-tile,
.game-tile-cta,
.modal-close,
.auth-tab {
    min-width: calc(44px / var(--scale-factor));
    min-height: calc(44px / var(--scale-factor));
}

/* Debug info (optional - can be toggled via console) */
.scaling-debug {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    font-family: monospace;
    z-index: 999998;
    display: none;
}

.scaling-debug.active {
    display: block;
}

.scaling-debug div {
    margin: 2px 0;
}