/* 
 * FactPack Galaxy Portal - Responsive Styles
 * Media queries and responsive layout handling
 * Phase 1: Cleaned for circular arrangement - removed old gate positioning
 */

/* === LARGE DESKTOP (1200px+) === */
@media (min-width: 1200px) {
    .world-gate:not(.trophy-portal) {
        width: 180px !important;
        height: 180px !important;
    }
    .world-icon {
        width: 170px !important;
        height: 170px !important;
        font-size: 85px !important;
    }
    .world-label {
        font-size: 16px;
    }
}

/* === DESKTOP/LARGE TABLET (992px - 1199px) === */
@media (max-width: 1199px) and (min-width: 992px) {
    .world-gate {
        width: 220px !important;
        height: 220px !important;
    }
    .world-icon {
        width: 180px !important;
        height: 180px !important;
        font-size: 90px !important;
    }
    .world-label {
        font-size: 15px !important;
    }
}

/* === TABLET (768px - 991px) === */
@media (max-width: 991px) and (min-width: 768px) {
    .world-gate {
        width: 160px !important;
        height: 160px !important;
    }
    .world-icon {
        width: 120px !important;
        height: 120px !important;
        font-size: 60px !important;
    }
    .world-label {
        font-size: 13px !important;
    }
}

/* === MOBILE PORTRAIT (767px and below) === */
@media (max-width: 767px) {
    .gates-wrapper {
        min-height: 800px;
    }
    
    .world-gate {
        width: 120px !important;
        height: 120px !important;
    }
    .world-icon {
        width: 90px !important;
        height: 90px !important;
        font-size: 45px !important;
    }
    .world-label {
        font-size: 10px !important;
    }
}

/* Mobile portrait spacing fix for authenticated users */
@media (max-width: 767px) and (orientation: portrait) {
    body.authenticated .portal-container {
        padding-top: 80px;
    }
    
    body.authenticated .gates-wrapper {
        min-height: calc(100vh - 120px);
    }
    
    /* Keep Meghan star visible on authenticated mobile */
    body.authenticated .hidden-star {
        top: 90px !important;
        right: 20px !important;
    }
}

/* === SMALL MOBILE (480px and below) === */
@media (max-width: 480px) {
    .world-gate {
        width: 100px !important;
        height: 100px !important;
    }
    .world-icon {
        width: 70px !important;
        height: 70px !important;
        font-size: 35px !important;
    }
    .world-label {
        font-size: 9px !important;
    }
}

/* === LANDSCAPE MODE OPTIMIZATIONS === */

/* Mobile Landscape - Short screens */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .portal-container {
        height: 100vh;
        padding-top: 10px;
        align-items: flex-start;
        padding-bottom: 10px;
    }
    
    .gates-wrapper {
        height: calc(100vh - 40px);
        min-height: 400px;
        margin-top: 20px;
    }
    
    .world-gate {
        width: 80px !important;
        height: 80px !important;
    }
    
    .world-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 30px !important;
    }
    
    .world-label {
        font-size: 8px !important;
        margin-top: 8px !important;
    }
}

/* Tablet Landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .gates-wrapper {
        height: 85vh;
        min-height: 500px;
    }
    
    .world-gate {
        width: 140px !important;
        height: 140px !important;
    }
    
    .world-icon {
        width: 100px !important;
        height: 100px !important;
        font-size: 50px !important;
    }
    
    .world-label {
        font-size: 11px !important;
    }
}

/* Large Phone Landscape */
@media screen and (min-width: 400px) and (max-width: 767px) and (max-height: 450px) and (orientation: landscape) {
    .portal-container {
        padding-top: 15px;
    }
    
    .gates-wrapper {
        height: calc(100vh - 50px);
        min-height: 350px;
    }
    
    .world-gate {
        width: 90px !important;
        height: 90px !important;
    }
    
    .world-icon {
        width: 65px !important;
        height: 65px !important;
        font-size: 32px !important;
    }
    
    .world-label {
        font-size: 9px !important;
        margin-top: 6px !important;
    }
}

/* Small Phone Landscape */
@media screen and (max-width: 399px) and (max-height: 400px) and (orientation: landscape) {
    .portal-container {
        padding-top: 20px;
    }
    
    .gates-wrapper {
        height: calc(100vh - 60px);
        min-height: 300px;
    }
    
    .world-gate {
        width: 70px !important;
        height: 70px !important;
    }
    
    .world-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 25px !important;
    }
    
    .world-label {
        font-size: 7px !important;
        margin-top: 4px !important;
    }
}

/* === UI ELEMENT ADJUSTMENTS FOR LANDSCAPE === */
@media screen and (orientation: landscape) and (max-height: 500px) {
    body.authenticated .user-bar {
        height: 45px;
        padding: 8px 15px;
        font-size: 12px;
    }
    
    body.authenticated .trophy-case {
        gap: 5px;
    }
    
    body.authenticated .hidden-star {
        top: 60px;
    }
    
    .trophy {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
}

/* === WEBKIT BROWSER COMPENSATION === */
@supports (-webkit-appearance: none) {
    @media screen and (orientation: landscape) and (max-height: 500px) {
        .portal-container {
            height: calc(100vh - env(keyboard-inset-height, 0px));
            padding-top: max(env(safe-area-inset-top), 25px);
        }
    }
}

/* === TROPHY PORTAL RESPONSIVE ADJUSTMENTS === */
/* These complement the base styles for trophy portal */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .world-gate.trophy-portal {
        width: 60px !important;
        height: 60px !important;
    }
    .world-gate.trophy-portal .world-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 30px !important;
    }
}

@media (max-width: 480px) {
    .world-gate.trophy-portal {
        width: 70px !important;
        height: 70px !important;
    }
    .world-gate.trophy-portal .world-icon {
        width: 70px !important;
        height: 70px !important;
        font-size: 35px !important;
    }
}