/* ==========================================
   RESPONSIVE DESIGN & ORIENTATION HANDLING
   ========================================== 
   
   NOTE: Keep this file even after enabling mobile support.
   It provides responsive design for tablets, smaller desktops,
   and future mobile gameplay.
   
   ========================================== */

/* Force landscape orientation hint for mobile devices */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    body {
        /* Lock visual hint - suggest landscape */
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

/* Mobile and Tablet Responsive Design */
@media screen and (max-width: 1024px) {
    body {
        padding: 10px;
        gap: 10px;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Make canvas responsive */
    #unity-canvas {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        aspect-ratio: 16 / 10;
        max-height: calc(100vh - 20px);
    }

    /* Adjust containers for mobile */
    .top-row-container {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 10px;
    }

    /* Movement buttons adjustment */
    .movement-container {
        width: 100px;
        gap: 5px;
    }

    .btn-movement {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    /* Action buttons for mobile */
    .btn-action {
        font-size: 12px;
        padding: 10px 20px;
        white-space: nowrap;
    }

    /* Social buttons */
    .socials-container {
        gap: 15px;
        justify-content: center;
        width: 100%;
    }

    .social-asset {
        width: 48px;
        height: 48px;
    }

    /* Shift button */
    .btn-shift {
        width: 50px;
        height: 30px;
        font-size: 10px;
    }

    /* Music toggle button */
    #tab_mute_toggle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* Landscape mode specific adjustments for mobile */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    body {
        padding: 5px;
        gap: 5px;
    }

    #unity-canvas {
        max-height: 90vh;
        width: 100vw !important;
        height: 90vh !important;
    }

    /* Hide or minimize controls in landscape for full game view */
    .top-row-container {
        gap: 5px;
        max-width: 100%;
    }

    .socials-container {
        margin-top: 10px;
    }
}

/* Tablet specific (between mobile and desktop) */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    #unity-canvas {
        max-width: 95vw;
        aspect-ratio: 16 / 10;
    }

    .btn-action {
        font-size: 14px;
        padding: 12px 24px;
    }

    .social-asset {
        width: 56px;
        height: 56px;
    }
}

/* Desktop responsive - scale down for smaller screens */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
    body {
        padding: 20px;
    }

    #unity-canvas {
        max-width: 90vw;
        height: auto;
        aspect-ratio: 16 / 10;
    }
}

/* Large desktop - optimal view */
@media screen and (min-width: 1401px) {
    body {
        padding: 40px;
    }

    #unity-canvas {
        width: 960px;
        height: 600px;
    }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
    body {
        padding: 5px;
    }

    #unity-canvas {
        width: 100vw !important;
        height: auto !important;
        max-height: 60vh;
        aspect-ratio: 16 / 10;
    }

    .btn-movement {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }

    .movement-container {
        width: 80px;
        gap: 4px;
    }

    .btn-action {
        font-size: 10px;
        padding: 8px 16px;
    }

    .social-asset {
        width: 40px;
        height: 40px;
    }

    #tab_mute_toggle {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .btn-shift {
        width: 45px;
        height: 28px;
        font-size: 9px;
    }
}

/* Prevent text selection on touch devices */
@media (hover: none) and (pointer: coarse) {
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Allow text selection in input areas if you have any */
    input, textarea {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
}

/* Loading state optimization for mobile */
@media screen and (max-width: 1024px) {
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        -webkit-overflow-scrolling: touch;
    }
}