/* NightVenture — canonical visual theme shared by every game page.
   The Quest Journal remains the reference; semantic gameplay colors stay intact. */

:root {
    --nv-ui-bg: #09131f;
    --nv-ui-bg-deep: #07101a;
    --nv-ui-surface: #0d1a28;
    --nv-ui-surface-raised: #112235;
    --nv-ui-surface-soft: rgba(20, 39, 58, 0.72);
    --nv-ui-border: #29455f;
    --nv-ui-border-soft: rgba(86, 139, 181, 0.24);
    --nv-ui-border-strong: rgba(99, 181, 236, 0.52);
    --nv-ui-accent: #4aa9e8;
    --nv-ui-accent-bright: #72c9ff;
    --nv-ui-text: #edf6ff;
    --nv-ui-text-soft: #c5d6e4;
    --nv-ui-text-muted: #91a9bd;
    --nv-ui-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    --nv-ui-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.20);

    /* Legacy token aliases: one palette owner for old and new pages. */
    --bg-main: var(--nv-ui-bg);
    --bg-card: var(--nv-ui-surface);
    --bg-deep: var(--nv-ui-bg-deep);
    --bg-hover: #173952;
    --bg-selection: #20577c;
    --text: var(--nv-ui-text);
    --text-muted: var(--nv-ui-text-soft);
    --text-soft: var(--nv-ui-text-muted);
    --gold: var(--nv-ui-accent-bright);
    --gold-bright: #9cddff;
    --gold-dark: #1c567d;
    --gold-border: var(--nv-ui-border);
    --gold-hover: #2e80b5;
    --border-panel: 1px solid var(--nv-ui-border-soft);
    --border-card: 1px solid var(--nv-ui-border-soft);
    --radius-lg: 18px;
    --radius-md: 11px;
    --shadow-panel: var(--nv-ui-shadow);
    --filter-neutral-bg: var(--nv-ui-surface);
    --filter-neutral-text: var(--nv-ui-text-soft);
    --filter-neutral-border: var(--nv-ui-border);
    --filter-active-bg: #20577c;
    --filter-active-text: var(--nv-ui-text);
    --filter-active-border: var(--nv-ui-accent-bright);
    --filter-focus-ring: 0 0 0 2px rgba(114, 201, 255, 0.18);
}

/* Android/iOS browsers must not paint their native blue touch flash over the
   game's controls. Keyboard focus remains handled by :focus-visible rules. */
html {
    -webkit-tap-highlight-color: transparent;
}

:where(
    button,
    a,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [tabindex]
) {
    -webkit-tap-highlight-color: transparent;
}

:where(button, a, label, summary, [role="button"]) {
    -webkit-user-select: none;
    user-select: none;
}

body:not(.nv-start-mode) {
    color: var(--nv-ui-text);
    background:
        radial-gradient(circle at 12% 0%, rgba(65, 145, 205, 0.10), transparent 34%),
        linear-gradient(180deg, var(--nv-ui-bg), var(--nv-ui-bg-deep));
}

/* Main application frame */
#topCharacterBar,
#navigationPrincipale,
#vuePrincipale {
    color: var(--nv-ui-text);
    background:
        radial-gradient(circle at 10% 0%, rgba(65, 145, 205, 0.09), transparent 34%),
        linear-gradient(180deg, rgba(13, 26, 40, 0.98), rgba(7, 16, 26, 0.99));
    border: 1px solid var(--nv-ui-border-soft);
    border-radius: 18px;
    box-shadow: var(--nv-ui-shadow);
}

#vuePrincipale :where(h1, h2, h3),
#navigationPrincipale :where(h1, h2, h3),
#topCharacterBar :where(h1, h2, h3) {
    color: var(--nv-ui-accent-bright);
}

#vuePrincipale :where(p, small, .type-objet),
#navigationPrincipale :where(p, small),
#topCharacterBar :where(p, small) {
    color: var(--nv-ui-text-muted);
}

/* Shared page surfaces */
#vuePrincipale :where(
    .nvi-panel,
    .nvi-details,
    .nvi-toolbar,
    .nvi-filter-toolbar,
    .competence-spec-card,
    .competence-card,
    .competence-card__details,
    .competence-card__metric,
    .nv-ability-loadout-panel,
    .nv-ability-loadout-slot,
    .nveq-panel,
    .nveq-total-stats,
    .nv-map-page__canvas-wrap,
    .nv-map-page__details,
    .fiche-personnage-section,
    .stat-card,
    .item-card,
    .details-objet,
    .journal-complet-panel,
    .journal-complet-toolbar
) {
    color: var(--nv-ui-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(74, 169, 232, 0.07), transparent 42%),
        linear-gradient(180deg, rgba(17, 34, 53, 0.94), rgba(11, 25, 39, 0.97));
    border-color: var(--nv-ui-border-soft);
    border-radius: 14px;
    box-shadow: var(--nv-ui-shadow-soft);
}

#vuePrincipale :where(
    .nvi-panel__title,
    .nvi-toolbar__title,
    .competence-card__header,
    .nv-ability-loadout-panel__header,
    .nv-map-page__header,
    .journal-complet-header
) {
    color: var(--nv-ui-text);
    border-color: var(--nv-ui-border-soft);
}

/* Inputs and ordinary page actions. Quest controls retain their native rules. */
#vuePrincipale :where(button, input, select, textarea):not(.nv-quest-journal *),
#navigationPrincipale :where(button, input, select, textarea),
.nv-save-window :where(button, input, select, textarea),
.nv-phaser-dev-panel :where(button, input, select, textarea) {
    color: var(--nv-ui-text);
    background: rgba(9, 25, 39, 0.88);
    border: 1px solid rgba(114, 201, 255, 0.28);
    border-radius: 11px;
    box-shadow: none;
}

#vuePrincipale :where(button):not(.nv-quest-journal *):hover,
#navigationPrincipale button:hover,
.nv-save-window button:hover,
.nv-phaser-dev-panel button:hover {
    color: #f4fcff;
    background: rgba(23, 57, 82, 0.90);
    border-color: rgba(114, 201, 255, 0.52);
}

#vuePrincipale :where(button, input, select, textarea):not(.nv-quest-journal *):focus-visible,
#navigationPrincipale :where(button, input, select, textarea):focus-visible,
.nv-save-window :where(button, input, select, textarea):focus-visible,
.nv-phaser-dev-panel :where(button, input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--nv-ui-accent-bright);
    box-shadow: 0 0 0 2px rgba(114, 201, 255, 0.18);
}

#vuePrincipale button:disabled,
#navigationPrincipale button:disabled,
.nv-save-window button:disabled {
    color: #71879a;
    background: rgba(7, 16, 26, 0.66);
    border-color: rgba(86, 139, 181, 0.14);
}

/* Active tabs, filters and selections */
#vuePrincipale :where(
    .is-active,
    .selection,
    .filtre-actif,
    .competence-spec-card--active,
    .nveq-item--selected,
    .nvimp-item--popup-open
):not(.nv-quest-journal *) {
    border-color: rgba(114, 201, 255, 0.66) !important;
    box-shadow: 0 0 0 2px rgba(114, 201, 255, 0.12), 0 0 18px rgba(74, 169, 232, 0.10) !important;
}

.nvm-tab.is-active,
.nv-map-page__tabs button.is-active,
.nv-save-tab.is-active {
    color: #eefaff !important;
    background: linear-gradient(180deg, rgba(46, 128, 181, 0.62), rgba(28, 83, 122, 0.72)) !important;
    border-color: rgba(114, 201, 255, 0.58) !important;
    outline: 0 !important;
}

/* Inventory, equipment and merchant — preserve item rarity backgrounds. */
#vuePrincipale :where(.nvi-slot, .nvi-pouch-slot, .nveq-empty-card, .nveq-slot--empty .nveq-card-shell) {
    background: rgba(6, 18, 29, 0.54) !important;
    border-color: rgba(93, 139, 174, 0.26) !important;
}

#vuePrincipale :where(.nvi-stat-block, .nvi-stat-chip, .nvi-details__description, .nvi-delete-confirm) {
    background: rgba(8, 20, 31, 0.58);
    border-color: rgba(93, 139, 174, 0.22);
}

#vuePrincipale :where(.nvi-pager, .nvimp-pager, .nvimp-grid-footer) {
    color: var(--nv-ui-text-soft);
    border-color: var(--nv-ui-border-soft);
}

/* Skills and abilities */
.competence-card__icon,
.nv-ability-loadout-slot img {
    background:
        radial-gradient(circle at 35% 30%, rgba(114, 201, 255, 0.18), transparent 36%),
        linear-gradient(135deg, #07101a, #173952);
    border-color: rgba(114, 201, 255, 0.34);
}

.competence-card__support-badge,
.nv-ability-loadout-slot__key,
.nv-ability-loadout-panel__header > span {
    color: var(--nv-ui-accent-bright);
    background: rgba(74, 169, 232, 0.12);
    border-color: rgba(114, 201, 255, 0.30);
}

/* Map */
.nv-map-page__header {
    border-bottom-color: var(--nv-ui-border-soft);
}

.nv-map-page__eyebrow,
.nv-map-page__title h2,
.nv-map-page-node.is-current .nv-map-page-node__label {
    color: var(--nv-ui-accent-bright);
}

.nv-map-page-node.is-selected .nv-map-page-node__dot {
    border-color: var(--nv-ui-accent-bright);
    box-shadow: 0 0 0 4px rgba(114, 201, 255, 0.16), 0 0 18px rgba(74, 169, 232, 0.34);
}

/* Character sheet and persistent sidebar */
.infos-monde-sidebar,
.journal-mini-wrapper,
#equipementSidebar .equip-card,
#equipementSidebar .slot {
    color: var(--nv-ui-text);
    background: rgba(13, 26, 40, 0.84);
    border-color: var(--nv-ui-border-soft);
    border-radius: 11px;
}

.infos-monde-sidebar__region,
.journal-mini-header,
#equipementSidebar h3 {
    color: var(--nv-ui-accent-bright);
}

/* Bottom navigation */
#appShell > #barreVuePrincipale .nv-main-navigation__button {
    color: var(--nv-ui-text-soft);
    background: rgba(9, 25, 39, 0.94);
    border-color: rgba(114, 201, 255, 0.22);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

#appShell > #barreVuePrincipale .nv-main-navigation__button:hover,
#appShell > #barreVuePrincipale .nv-main-navigation__button.is-active {
    color: #f4fcff;
    background: linear-gradient(180deg, rgba(46, 128, 181, 0.72), rgba(28, 83, 122, 0.84));
    border-color: rgba(114, 201, 255, 0.64);
    box-shadow: 0 0 0 2px rgba(114, 201, 255, 0.12), 0 8px 22px rgba(0, 0, 0, 0.28);
}

/* Save window and in-game menus */
.nv-save-window {
    background: rgba(3, 10, 18, 0.82);
}

.nv-save-shell,
.nv-phaser-dev-panel {
    color: var(--nv-ui-text);
    background:
        radial-gradient(circle at 10% 0%, rgba(65, 145, 205, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(13, 26, 40, 0.99), rgba(7, 16, 26, 0.995));
    border-color: var(--nv-ui-border-strong);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}

.nv-save-character,
.nv-save-slot,
.nv-settings-menu__group,
.nv-game-menu__body,
.nv-phaser-dev-panel__header {
    background: rgba(13, 26, 40, 0.82);
    border-color: var(--nv-ui-border-soft);
}

.nv-save-kicker,
.nv-save-character__level,
.nv-phaser-dev-panel__header strong {
    color: var(--nv-ui-accent-bright);
}

/* Character creation keeps its viewport-clamped layout, with the same journal language. */
.nv-character-creator {
    --nv-creator-gold: var(--nv-ui-accent-bright);
    --nv-creator-line: var(--nv-ui-border-soft);
    color: var(--nv-ui-text);
}

body.nv-mode-new-game .nv-creator-header,
body.nv-mode-new-game .nv-creator-sheet {
    border-color: var(--nv-ui-border-soft);
    background:
        radial-gradient(circle at 10% 0%, rgba(65, 145, 205, 0.11), transparent 36%),
        linear-gradient(180deg, rgba(13, 26, 40, 0.90), rgba(7, 16, 26, 0.94));
    box-shadow: var(--nv-ui-shadow);
}

body.nv-mode-new-game .nv-creator-header h1,
body.nv-mode-new-game .nv-customization-row h3,
body.nv-mode-new-game .nv-classe-card__header,
body.nv-mode-new-game .nv-dev-build-kicker {
    color: var(--nv-ui-accent-bright);
}

body.nv-mode-new-game :where(
    .nv-creator-identity,
    .nv-race-choice,
    .nv-creator-stage,
    .nv-creator-stats,
    .nv-customization-row,
    .nv-selected-class-panel,
    .nv-dev-build-card,
    .fiche-personnage-section
) {
    color: var(--nv-ui-text);
    background: var(--nv-ui-surface-soft);
    border-color: var(--nv-ui-border-soft);
    border-radius: 11px;
}

body.nv-mode-new-game :where(.nv-character-creator input, .nv-character-creator select, .nv-carousel-value) {
    color: var(--nv-ui-text);
    background: rgba(9, 25, 39, 0.90);
    border-color: rgba(114, 201, 255, 0.28);
}

body.nv-mode-new-game :where(.nv-character-creator label, .nv-sex-toggle, .nv-race-description) {
    color: var(--nv-ui-text-soft);
}

body.nv-mode-new-game :where(.nv-sex-toggle button.active, .nv-class-select-button.active, .nv-classe-card--selected) {
    color: #eefaff;
    background: linear-gradient(180deg, rgba(46, 128, 181, 0.72), rgba(28, 83, 122, 0.84));
    border-color: rgba(114, 201, 255, 0.64);
    box-shadow: 0 0 0 2px rgba(114, 201, 255, 0.12);
}

/* Character creation keeps the animated cosmos visible without sacrificing
   readability: transparent roots, glass-like panels and lighter inner chips. */
body.nv-mode-new-game :where(
    #vuePrincipale,
    .nv-start-screen,
    .nv-classe-screen,
    .nv-character-creator,
    .nv-appearance-sheet,
    .nv-selected-class-panel
) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.nv-mode-new-game :where(
    .nv-creator-header,
    .nv-creator-sheet
) {
    background:
        radial-gradient(circle at 12% 0%, rgba(75, 162, 224, 0.13), transparent 38%),
        linear-gradient(180deg, rgba(8, 19, 34, 0.54), rgba(5, 13, 25, 0.48)) !important;
    border-color: rgba(114, 201, 255, 0.24) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(5px) saturate(1.08) !important;
}

body.nv-mode-new-game :where(
    .nv-creator-identity,
    .nv-race-choice,
    .nv-creator-stage,
    .nv-customization-row,
    .nv-creator-stats,
    .nv-dev-build-card,
    .fiche-personnage-section
) {
    background: linear-gradient(180deg, rgba(12, 30, 48, 0.52), rgba(7, 20, 35, 0.47)) !important;
    border: 1px solid rgba(114, 201, 255, 0.20) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(3px) !important;
}

body.nv-mode-new-game :where(
    .nv-race-description,
    .nv-body-colors > div,
    .nv-outfit-sprite-preview,
    .nv-stat-grid span,
    .nv-affinities span,
    .nv-start-summary span,
    .ligne-stat,
    .nv-dev-build-kicker
) {
    background: rgba(7, 22, 38, 0.42) !important;
    border-color: rgba(114, 201, 255, 0.14) !important;
    box-shadow: none !important;
}

body.nv-mode-new-game :where(
    .nv-character-creator label,
    .nv-sex-toggle,
    .nv-race-description,
    .nv-carousel-value,
    .nv-character-creator h1,
    .nv-character-creator h2,
    .nv-character-creator h3
) {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
}

/* Matching scrollbar for scrollable page content. */
#vuePrincipale *,
.nv-save-shell,
.nv-phaser-dev-panel__content {
    scrollbar-color: rgba(74, 169, 232, 0.58) rgba(7, 16, 26, 0.58);
    scrollbar-width: thin;
}

@media (max-width: 760px) {
    #topCharacterBar,
    #navigationPrincipale,
    #vuePrincipale {
        border-radius: 14px;
    }

    #vuePrincipale :where(
        .nvi-panel,
        .nvi-details,
        .nvi-toolbar,
        .nvi-filter-toolbar,
        .competence-spec-card,
        .competence-card,
        .nv-map-page__canvas-wrap,
        .nv-map-page__details
    ) {
        border-radius: 12px;
    }
}