/* ScratchJr Responsive Scaling CSS */
/* Handles responsive layout and scaling */

:root {
    --scale-factor: 1;
    --container-width: 1024px;
    --container-height: 768px;
}

/* Base responsive container */
.responsive-container {
    position: relative;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    transform-origin: top center;
    transform: scale(var(--scale-factor));
}

/* ScratchJr logo responsive scaling */
.logo-icon {
    background-image: url('../start/scratchjrlogo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 120px;
    height: 60px;
    display: inline-block;
}

/* Responsive scaling for different screen sizes */
@media (max-width: 768px) {
    :root {
        --scale-factor: 0.6;
    }
    
    .responsive-container {
        transform: scale(0.6);
    }
    
    .logo-icon {
        width: 100px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    :root {
        --scale-factor: 0.4;
    }
    
    .responsive-container {
        transform: scale(0.4);
    }
    
    .logo-icon {
        width: 80px;
        height: 40px;
    }
}

@media (min-width: 1200px) {
    :root {
        --scale-factor: 1.2;
    }
    
    .responsive-container {
        transform: scale(1.2);
    }
    
    .logo-icon {
        width: 140px;
        height: 70px;
    }
}

/* Ensure content stays within viewport */
.frame {
    overflow: hidden;
    position: relative;
}

/* Touch-friendly scaling for mobile */
@media (pointer: coarse) {
    .responsive-container {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}