/* NightVenture — global dark-blue button theme + persistent bottom navigation. */

:root {
    --nv-button-bg: #0a2238;
    --nv-button-bg-hover: #103653;
    --nv-button-bg-active: #17486d;
    --nv-button-border: #2d6f9d;
    --nv-button-border-hover: #67b7ea;
    --nv-button-text: #9edcff;
    --nv-button-text-strong: #d7f2ff;
    --nv-button-shadow: 0 4px 14px rgba(0, 12, 28, 0.34);
}

/*
 * Navigation persistante : le bouton-bar lui-même est fixé au viewport.
 * Cela reste vrai même si HUD_Layout.js le déplace dans le header.
 */
html body.nv-phaser-persistent-active #appShell #barreVuePrincipale,
html body.nv-phaser-persistent-active #appShell #barreVuePrincipale.nv-hud-navigation {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: env(safe-area-inset-bottom) !important;
    left: 50% !important;
    z-index: 4100 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: calc(100vw - 12px) !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid rgba(103, 183, 234, 0.30) !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(5, 18, 32, 0.96) !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.40) !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
    scrollbar-width: thin;
}

html body.nv-phaser-persistent-active #appShell #navigationPrincipale {
    position: static !important;
    inset: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Style global : aucune largeur, hauteur, taille de police ou padding n'est modifié. */
html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"] {
    border-color: var(--nv-button-border) !important;
    border-radius: 999px !important;
    background-color: var(--nv-button-bg) !important;
    background-image: linear-gradient(180deg, rgba(20, 64, 96, 0.52), rgba(5, 24, 43, 0.64)) !important;
    color: var(--nv-button-text) !important;
    box-shadow: var(--nv-button-shadow) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.08s ease !important;
}

html body button:hover:not(:disabled),
html body input[type="button"]:hover:not(:disabled),
html body input[type="submit"]:hover:not(:disabled),
html body input[type="reset"]:hover:not(:disabled) {
    border-color: var(--nv-button-border-hover) !important;
    background-color: var(--nv-button-bg-hover) !important;
    color: var(--nv-button-text-strong) !important;
    box-shadow: 0 5px 18px rgba(12, 80, 126, 0.34) !important;
}

html body button:active:not(:disabled),
html body input[type="button"]:active:not(:disabled),
html body input[type="submit"]:active:not(:disabled),
html body input[type="reset"]:active:not(:disabled) {
    background-color: var(--nv-button-bg-active) !important;
    transform: translateY(1px);
}

html body button:focus-visible,
html body input[type="button"]:focus-visible,
html body input[type="submit"]:focus-visible,
html body input[type="reset"]:focus-visible {
    outline: 2px solid #74c9f5 !important;
    outline-offset: 2px !important;
}

html body button:disabled,
html body input[type="button"]:disabled,
html body input[type="submit"]:disabled,
html body input[type="reset"]:disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

html body button.vue-active,
html body button.active,
html body button.actif,
html body button[aria-pressed="true"] {
    border-color: #78cfff !important;
    background-color: #174d72 !important;
    color: #e1f6ff !important;
    box-shadow: 0 0 0 1px rgba(120, 207, 255, 0.28), 0 0 18px rgba(50, 158, 219, 0.30) !important;
}

@media (max-width: 760px) {
    html body.nv-phaser-persistent-active #appShell #barreVuePrincipale,
    html body.nv-phaser-persistent-active #appShell #barreVuePrincipale.nv-hud-navigation {
        bottom: env(safe-area-inset-bottom) !important;
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        min-height: 36px !important;
        padding: 5px 6px !important;
    }
}