/* ============================================
   SISTEMA DI GESTIONE UI - LAYER E Z-INDEX
   ============================================ */

/* 
   Gerarchia dei layer (dal basso verso l'alto):
   0-49:   Elementi di gioco base
   50-99:  HUD e elementi di gioco
   100-199: Schermate di menu
   200-299: Schermate di personalizzazione
   300-399: Popup e notifiche
   400-499: Overlay di caricamento
   500+:   Sistema di debug/emergenza
*/

/* ============================================
   LAYER 0-49: ELEMENTI DI GIOCO BASE
   ============================================ */
#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Canvas di gioco Phaser */
canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ============================================
   LAYER 50-99: HUD E ELEMENTI DI GIOCO
   ============================================ */

/* HUD principale di gioco */
#game-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 50;
}

/* Elementi HUD che ricevono input */
#game-ui .interactive {
    pointer-events: auto;
}


/* Leaderboard in-game */
#leaderboard {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 55;
    pointer-events: auto;
}

/* Pulsante shop in gioco */
.shop-btn-game {
    position: absolute;
    bottom: 120px;
    right: 20px;
    z-index: 56;
    pointer-events: auto;
}

/* Chat container */
#chat-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 57;
    pointer-events: auto;
}

/* Indicatore munizioni – styling visibile su qualsiasi sfondo */
#ammo-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 58;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.75rem, 2.2vw, 1rem);
    color: #e8f4ff;
    background: rgba(8, 12, 18, 0.82);
    border: 1px solid rgba(157, 176, 196, 0.40);
    border-radius: 10px;
    padding: 8px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: nowrap;
}

/* Crosshair */
#crosshair-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 59;
    cursor: none;
    pointer-events: none;
}

/* ============================================
   LAYER 100-199: SCHERMATE DI MENU
   ============================================ */

/* Schermata di caricamento */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
}

/* Menu principale */
#menu-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 110;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
}

/* ============================================
   LAYER 200-299: SCHERMATE DI PERSONALIZZAZIONE
   ============================================ */

/* Schermata di personalizzazione principale */
#customize-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

/* Pannello cosmetici (dalla classe CharacterCustomizationUI) */
#cosmetics-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 210;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(10, 10, 30, 0.95);
    backdrop-filter: blur(10px);
}

/* ============================================
   LAYER 300-399: POPUP E NOTIFICHE
   ============================================ */

/* Notifiche di kill */
.kill-notification {
    position: fixed;
    top: 200px;
    right: 20px;
    z-index: 300;
    animation: slideIn 0.3s ease, slideOut 0.3s ease 2.7s;
}

/* Notifiche di sblocco */
.unlock-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 310;
    animation: slideIn 0.3s ease;
}

/* Schermata attesa matchmaking */
.matchmaking-wait,
#matchmaking-wait {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 320;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(10, 10, 30, 0.95);
    backdrop-filter: blur(10px);
    padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

/* Schermata match trovato */
.match-found-screen,
#match-found-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 330;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

/* Pannello classifica */
.leaderboard-panel,
#leaderboard-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 340;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(10, 10, 30, 0.95);
    backdrop-filter: blur(10px);
    padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

#matchmaking-wait .matchmaking-content,
#match-found-screen .match-found-content,
#leaderboard-panel .leaderboard-content,
.matchmaking-wait .matchmaking-content,
.match-found-screen .match-found-content,
.leaderboard-panel .leaderboard-content {
    width: min(560px, 100%);
    max-height: calc(var(--goregrid-vvh, 100dvh) - 36px);
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid rgba(127, 247, 255, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 24, 38, 0.96), rgba(6, 10, 18, 0.96));
    color: #edf7ff;
    padding: 24px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
}

#leaderboard-panel .leaderboard-content,
.leaderboard-panel .leaderboard-content {
    width: min(780px, 100%);
    position: relative;
    padding-top: 58px;
}

#leaderboard-panel #close-leaderboard.close-btn,
.leaderboard-panel #close-leaderboard.close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 1.15rem;
    line-height: 1;
    z-index: 2;
}

#leaderboard-panel .leaderboard-content h2,
.leaderboard-panel .leaderboard-content h2 {
    margin-top: 0;
    font-size: clamp(1.1rem, 3vw, 1.7rem);
    overflow-wrap: anywhere;
}

#global-leaderboard-list {
    max-height: min(54dvh, 520px);
    overflow-y: auto;
    padding-right: 4px;
}

#leaderboard-panel .leaderboard-entry {
    min-width: 0;
}

@media (max-width: 640px), (max-height: 420px) {
    .matchmaking-wait,
    #matchmaking-wait,
    .match-found-screen,
    #match-found-screen,
    .leaderboard-panel,
    #leaderboard-panel {
        padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        align-items: center;
    }

    #matchmaking-wait .matchmaking-content,
    #match-found-screen .match-found-content,
    #leaderboard-panel .leaderboard-content,
    .matchmaking-wait .matchmaking-content,
    .match-found-screen .match-found-content,
    .leaderboard-panel .leaderboard-content {
        max-height: calc(var(--goregrid-vvh, 100dvh) - 16px);
        padding: 16px;
        border-radius: 10px;
    }

    #leaderboard-panel .leaderboard-content,
    .leaderboard-panel .leaderboard-content {
        padding-top: 54px;
    }

    #global-leaderboard-list .leaderboard-entry {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    #global-leaderboard-list .player-score {
        justify-content: flex-start;
        min-width: 0;
    }
}

/* ============================================
   LAYER 400-499: OVERLAY DI CARICAMENTO
   ============================================ */

/* Overlay di caricamento generico */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
}

/* ============================================
   LAYER 500+: SISTEMA DI DEBUG/EMERGENZA
   ============================================ */

/* Debug overlay */
.debug-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    pointer-events: none;
}

/* Console di emergenza */
.emergency-console {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 510;
    background: rgba(0, 0, 0, 0.9);
    padding: 10px;
}

/* ============================================
   CLASSI DI UTILITÀ PER LA VISIBILITÀ
   ============================================ */

/* Nascondi elemento */
.ui-hidden {
    display: none !important;
}

/* Mostra elemento come flex */
.ui-visible-flex {
    display: flex !important;
}

/* Mostra elemento come block */
.ui-visible-block {
    display: block !important;
}

/* Transizioni smooth */
.ui-transition {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ui-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.ui-fade-out {
    animation: fadeOut 0.3s ease-in;
}

.ui-slide-in {
    animation: slideIn 0.3s ease-out;
}

.ui-slide-out {
    animation: slideOut 0.3s ease-in;
}

/* ============================================
   ANIMAZIONI
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* ============================================
   STATI DEI LAYER
   ============================================ */

/* Quando una schermata è attiva, disabilita l'interazione con i layer sottostanti */
.ui-layer-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 768px) {

    #leaderboard {
        right: 10px;
        top: 52px;   /* sotto la barra #hud */
        width: 190px;
    }

    .shop-btn-game {
        bottom: 100px;
        right: 10px;
    }

    #chat-container {
        left: 10px;
        bottom: 10px;
        width: calc(60vw - 10px);
    }

    #ammo-indicator {
        bottom: 10px;
        right: 10px;
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .kill-notification,
    .unlock-notification {
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* Mobile piccolo */
@media (max-width: 520px) {

    #leaderboard {
        display: none;
    }

    #ammo-indicator {
        bottom: 8px;
        right: 8px;
        font-size: 0.72rem;
        padding: 5px 10px;
        border-radius: 8px;
    }

    .shop-btn-game {
        bottom: 80px;
        right: 8px;
    }

    #chat-container {
        left: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
    }
}