/* NightVenture — HUD Layout Mobile
   Bloc C prépare la séparation des styles HUD mobiles hors du CSS global.
   Les règles sont migrées progressivement par petites passes sûres. */

body.nv-mode-playing #topCharacterBar {
    top: 4px;
    padding: 7px 8px;
}

body.nv-mode-playing #topCharacterBar .personnage-compact { gap: 6px; }
body.nv-mode-playing #topCharacterBar .personnage-compact__haut { gap: 8px; }
body.nv-mode-playing #topCharacterBar .personnage-compact__nom strong { font-size: clamp(1rem, 4.2vw, 1.35rem); }
body.nv-mode-playing #topCharacterBar .personnage-compact__nom span { font-size: clamp(0.78rem, 3.2vw, 0.95rem); }

body.nv-mode-playing #topCharacterBar .personnage-compact__actions button,
body.nv-mode-playing #topCharacterBar .personnage-compact__actions .btn-action-personnage,
body.nv-mode-playing #topCharacterBar .personnage-compact__actions .bouton-charger-haut {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.74rem;
}

body.nv-mode-playing #topCharacterBar .personnage-compact__ressources { gap: 5px; }
body.nv-mode-playing #topCharacterBar .personnage-compact .barre { height: 21px; }
body.nv-mode-playing #topCharacterBar .barre__texte { font-size: 0.68rem; }

body.nv-mode-playing .nv-hud-world-info {
    padding: 5px 6px !important;
    gap: 5px !important;
    background: rgba(0, 0, 0, 0.12) !important;
}

body.nv-mode-playing .nv-hud-chip {
    padding: 3px 6px !important;
    font-size: 0.68rem !important;
}

@media (max-width: 900px), (orientation: portrait) {
    body.nv-mode-playing #appShell { padding: 5px; }

    body.nv-mode-playing #topCharacterBar {
        top: 0;
        margin-bottom: 7px;
        padding: 6px;
        border-radius: 0 0 12px 12px !important;
    }

    body.nv-mode-playing #topCharacterBar .personnage-compact__haut {
        flex-direction: row;
        align-items: center;
    }

    body.nv-mode-playing #topCharacterBar .personnage-compact__actions { display: none; }

    body.nv-mode-playing #topCharacterBar .personnage-compact__ressources {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body.nv-mode-playing #topCharacterBar .personnage-compact .barre { height: 19px; }

    body.nv-mode-playing .nv-hud-world-info {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 4px !important;
    }

    body.nv-mode-playing .nv-hud-world-info__location,
    body.nv-mode-playing .nv-hud-world-info__state { gap: 4px !important; }

    body.nv-mode-playing .nv-hud-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.nv-mode-playing #barreVuePrincipale.nv-hud-navigation {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: visible !important;
        flex-wrap: unset !important;
        justify-content: stretch !important;
        gap: 4px !important;
        margin-top: 5px !important;
        padding: 5px 0 0 !important;
    }

    body.nv-mode-playing #barreVuePrincipale.nv-hud-navigation button,
    body.nv-mode-playing #barreVuePrincipale.nv-hud-navigation label[for="loadFile"] {
        width: 100% !important;
        min-height: 27px !important;
        padding: 4px 5px !important;
        font-size: 0.64rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 420px) {
    body.nv-mode-playing #barreVuePrincipale.nv-hud-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Navigation gameplay — bottom overlay */
body.nv-mode-playing #appShell { padding-bottom: calc(var(--nv-bottom-nav-height) + 18px + env(safe-area-inset-bottom)) !important; }

body.nv-mode-playing #topCharacterBar #barreVuePrincipale.nv-hud-navigation {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 900 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid rgba(245, 211, 122, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(10, 9, 8, 0.18) !important;
    backdrop-filter: blur(5px) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.nv-mode-playing #topCharacterBar #barreVuePrincipale.nv-hud-navigation::-webkit-scrollbar { display: none; }

body.nv-mode-playing #topCharacterBar #barreVuePrincipale.nv-hud-navigation button,
body.nv-mode-playing #topCharacterBar #barreVuePrincipale.nv-hud-navigation label[for="loadFile"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 132px !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
}

body.nv-mode-playing.nv-hud-collapsed #topCharacterBar #barreVuePrincipale.nv-hud-navigation {
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid rgba(245, 211, 122, 0.16) !important;
}

@media (max-width: 480px), (orientation: portrait) {
    :root { --nv-bottom-nav-height: 56px; }

    body.nv-mode-playing #topCharacterBar #barreVuePrincipale.nv-hud-navigation {
        left: max(6px, env(safe-area-inset-left)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        gap: 5px !important;
        padding: 6px !important;
        border-radius: 16px !important;
    }

    body.nv-mode-playing #topCharacterBar #barreVuePrincipale.nv-hud-navigation button,
    body.nv-mode-playing #topCharacterBar #barreVuePrincipale.nv-hud-navigation label[for="loadFile"] {
        min-height: 32px !important;
        padding: 6px 9px !important;
        max-width: 118px !important;
        font-size: 0.70rem !important;
    }
}