/* Navigateur compact de zones / boss. Données affichées fournies par le serveur. */
.level-selector-container {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto;
    overflow: visible;
}


.difficulty-switch-button {
    position: absolute;
    top: 50%;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 30px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(213,236,251,.78);
    border-radius: 10px;
    color: #f3fbff;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.14);
    transform: translateY(-50%);
    transition: transform .12s ease, filter .12s ease, opacity .12s ease;
    touch-action: manipulation;
}
.difficulty-switch-button--previous { left: -34px; }
.difficulty-switch-button--next { right: -34px; }
.difficulty-switch-button img {
    width: 17px;
    height: 24px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
}
.difficulty-switch-button.is-normal { background: linear-gradient(145deg, #1f6eaa, #123b68); }
.difficulty-switch-button.is-hard { background: linear-gradient(145deg, #7a42c8, #4c237e); }
.difficulty-switch-button.is-nightmare { background: linear-gradient(145deg, #b14059, #661c2b); }
.difficulty-switch-button.is-heaven { background: linear-gradient(145deg, #5f6f87, #344154); }
.difficulty-switch-button:hover,
.difficulty-switch-button:focus-visible {
    outline: none;
    filter: brightness(1.14);
    transform: translateY(-50%) scale(1.06);
}
.difficulty-switch-button:active { transform: translateY(-50%) scale(.95); }
.difficulty-switch-button[hidden] { display: none !important; }

.level-selector-search {
    flex: 0 0 34px;
    width: 34px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(213,236,251,.66);
    border-radius: 10px;
    background: linear-gradient(180deg,rgba(45,126,169,.94),rgba(18,74,108,.96));
    color: #f3fbff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.12);
    transition: transform .12s ease, filter .12s ease;
    touch-action: manipulation;
}
.level-selector-search:hover,
.level-selector-search:focus-visible { outline: none; filter: brightness(1.14); }
.level-selector-search:active { transform: scale(.95); }

/* Progression de la zone normale active uniquement (ex. 6/10). */
.level-selector.has-progress {
    position: relative;
}

.level-selector-progress {
    position: absolute;
    right: 5px;
    bottom: -5px;
    z-index: 3;
    display: grid;
    place-items: center;
    min-width: 23px;
    height: 14px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    background: rgba(8, 10, 14, .96);
    color: #fff;
    font: 600 9.5px / 1 "Poppins", Arial, sans-serif;
    letter-spacing: -.15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .72);
    pointer-events: none;
}

.zoneNavigatorBackdrop {
    position: fixed;
    inset: 0;
    z-index: 7600;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(1,9,18,.68);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.zoneNavigatorBackdrop[hidden] { display: none !important; }
.zoneNavigatorDialog {
    width: min(620px, 94vw);
    max-width: calc(var(--game-stage-max-width, 500px) - 18px);
    max-height: min(760px, 86vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(113,205,255,.62);
    border-radius: 18px;
    background: linear-gradient(180deg,#173c62 0%,#0c253f 48%,#071b30 100%);
    color: #f5fbff;
    box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.08);
}
.zoneNavigatorHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px 11px;
    border-bottom: 1px solid rgba(117,188,228,.16);
}
.zoneNavigatorHeader small {
    display: block;
    margin-bottom: 2px;
    color: #8fb8d6;
    font: 800 9px/1.2 "Poppins",Arial,sans-serif;
    letter-spacing: 1.7px;
}
.zoneNavigatorHeader h2 {
    margin: 0;
    font: 900 20px/1.15 "Poppins",Arial,sans-serif;
    text-transform: uppercase;
}
.zoneNavigatorHeader h2 i { margin-right: 6px; color: #75d5ff; }
.zoneNavigatorClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    border: 1px solid rgba(190,226,247,.35);
    border-radius: 11px;
    background: rgba(34,83,123,.72);
    color: #f4fbff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.zoneNavigatorClose i {
    display: block;
    line-height: 1;
    transform: translateY(-1px);
}
.zoneNavigatorJumpForm { padding: 12px 16px 8px; }
.zoneNavigatorFields {
    display: grid;
    grid-template-columns: minmax(150px,.78fr) minmax(190px,1.22fr);
    gap: 10px;
    align-items: end;
}
.zoneNavigatorField { min-width: 0; }
.zoneNavigatorField > label {
    display: block;
    margin-bottom: 5px;
    color: #9dbbd0;
    font: 700 11px/1.2 "Poppins",Arial,sans-serif;
}
.zoneNavigatorInputRow { display: grid; grid-template-columns: minmax(0,1fr) 58px; gap: 8px; }
.zoneNavigatorInputRow input {
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(124,194,235,.44);
    border-radius: 10px;
    outline: none;
    background: rgba(2,18,34,.72);
    color: #fff;
    font: 800 16px/1 "Poppins",Arial,sans-serif;
}
.zoneNavigatorInputRow input:focus { border-color: #6ad9ff; box-shadow: 0 0 0 2px rgba(106,217,255,.14); }
.zoneNavigatorInputRow button {
    border: 1px solid rgba(255,210,88,.72);
    border-radius: 10px;
    background: linear-gradient(180deg,#f0a72b,#bd7107);
    color: #fff;
    font: 900 13px/1 "Poppins",Arial,sans-serif;
    cursor: pointer;
}
.zoneNavigatorNameInputWrap {
    position: relative;
    min-width: 0;
}
.zoneNavigatorNameInputWrap > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    transform: translateY(-50%);
    color: #6ecbf4;
    font-size: 13px;
    pointer-events: none;
}
.zoneNavigatorNameInputWrap input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 31px 0 34px;
    border: 1px solid rgba(124,194,235,.44);
    border-radius: 10px;
    outline: none;
    background: rgba(2,18,34,.72);
    color: #fff;
    font: 700 13px/1 "Poppins",Arial,sans-serif;
}
.zoneNavigatorNameInputWrap input::placeholder { color: #668aa4; opacity: 1; }
.zoneNavigatorNameInputWrap input:focus { border-color: #6ad9ff; box-shadow: 0 0 0 2px rgba(106,217,255,.14); }
.zoneNavigatorNameInputWrap input::-webkit-search-cancel-button { filter: invert(1); opacity: .55; cursor: pointer; }
.zoneNavigatorRange { display: block; margin-top: 6px; color: #82a7c0; font-size: 10px; }
.zoneNavigatorStatus { margin: 7px 0 0; color: #8cd9ff; font-size: 11px; }
.zoneNavigatorStatus.is-error { color: #ff9f9f; }
.zoneNavigatorDivider {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 16px 7px;
    color: #9bb8cd;
    font: 800 9px/1 "Poppins",Arial,sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.zoneNavigatorDivider::before,
.zoneNavigatorDivider::after { content: ""; height: 1px; flex: 1; background: rgba(132,190,225,.18); }
.zoneNavigatorBossList {
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 14px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(106,191,235,.48) transparent;
    scrollbar-gutter: stable;
}
.zoneNavigatorBossList::-webkit-scrollbar { width: 6px; }
.zoneNavigatorBossList::-webkit-scrollbar-track {
    margin-block: 4px 10px;
    background: transparent;
}
.zoneNavigatorBossList::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(106,191,235,.48);
    background-clip: padding-box;
}
.zoneNavigatorBossList::-webkit-scrollbar-thumb:hover { background: rgba(119,211,255,.72); background-clip: padding-box; }
.zoneNavigatorBossList::-webkit-scrollbar-corner { background: transparent; }
.zoneNavigatorBossFamily {
    display: flex;
    align-items: stretch;
    gap: 7px;
    margin-bottom: 8px;
    padding: 6px;
    border: 1px solid rgba(111,181,221,.16);
    border-radius: 13px;
    background: rgba(5,31,53,.34);
}
.zoneNavigatorBossFamily:last-child { margin-bottom: 0; }
.zoneNavigatorBoss {
    position: relative;
    min-width: 0;
    flex: 1 1 58px;
    max-width: 88px;
    padding: 6px 4px 5px;
    border: 1px solid rgba(111,181,221,.28);
    border-radius: 12px;
    background: rgba(4,28,49,.74);
    color: #eefaff;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.zoneNavigatorBoss:hover { border-color: rgba(111,218,255,.62); background: rgba(14,58,88,.82); }
.zoneNavigatorBoss.is-current { border-color: #f2ae3b; box-shadow: 0 0 0 1px rgba(242,174,59,.32), inset 0 1px rgba(255,255,255,.06); }
.zoneNavigatorBossVisualButton {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.zoneNavigatorBossVisualButton:focus-visible .zoneNavigatorBossVisual {
    border-color: rgba(111,218,255,.95);
    box-shadow: 0 0 0 2px rgba(111,218,255,.18);
}
.zoneNavigatorBossVisual {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 4px;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle,#28577a,#091e32 72%);
    border: 2px solid rgba(185,226,249,.48);
}
.zoneNavigatorBossVisual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoneNavigatorBossFallback { display: none; place-items: center; width: 100%; height: 100%; font: 900 19px/1 "Poppins",Arial,sans-serif; }
.zoneNavigatorBossVisual.is-fallback img { display: none; }
.zoneNavigatorBossVisual.is-fallback .zoneNavigatorBossFallback { display: grid; }
.zoneNavigatorBossZones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}
.zoneNavigatorBossZone {
    min-width: 31px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(108,190,231,.25);
    border-radius: 6px;
    background: rgba(3,21,37,.72);
    color: #eefaff;
    font: 900 9px/1 "Poppins",Arial,sans-serif;
    cursor: pointer;
}
.zoneNavigatorBossZone:hover,
.zoneNavigatorBossZone:focus-visible {
    outline: none;
    border-color: rgba(111,218,255,.8);
    background: rgba(18,67,99,.92);
}
.zoneNavigatorBossZone.is-current {
    border-color: #f2ae3b;
    background: rgba(166,102,13,.46);
    color: #fff7df;
}
.zoneNavigatorEmpty { margin: 26px 0; color: #91afc4; text-align: center; font-size: 12px; }
body.zoneNavigatorOpen { overflow: hidden; }

@media (max-width: 520px) {
    .level-selector-search { flex-basis: 30px; width: 30px; height: 39px; border-radius: 9px; font-size: 14px; }
    .zoneNavigatorBackdrop { padding: 9px; }
    .zoneNavigatorDialog { width: min(430px, 96vw); max-height: 82vh; border-radius: 16px; }
    .zoneNavigatorHeader { padding: 12px 12px 9px; }
    .zoneNavigatorHeader h2 { font-size: 17px; }
    .zoneNavigatorClose { width: 34px; height: 34px; flex-basis: 34px; }
    .zoneNavigatorJumpForm { padding: 10px 12px 7px; }
    .zoneNavigatorFields { grid-template-columns: minmax(132px,.78fr) minmax(145px,1.22fr); gap: 7px; }
    .zoneNavigatorInputRow { grid-template-columns: minmax(0,1fr) 48px; gap: 6px; }
    .zoneNavigatorInputRow input { padding-inline: 9px; font-size: 14px; }
    .zoneNavigatorNameInputWrap input { padding-left: 31px; padding-right: 26px; font-size: 12px; }
    .zoneNavigatorNameInputWrap > i { left: 10px; font-size: 12px; }
    .zoneNavigatorBossList { padding-inline: 10px; padding-bottom: 12px; }
    .zoneNavigatorBossFamily { gap: 5px; margin-bottom: 6px; padding: 5px; }
    .zoneNavigatorBoss { padding-inline: 2px; }
    .zoneNavigatorBossVisual { width: 50px; height: 50px; }
    .zoneNavigatorFavoriteList { gap:5px; }
}

@media (max-width: 380px) {
    .level-selector-search { flex-basis: 27px; width: 27px; height: 36px; font-size: 13px; }
    .zoneNavigatorFields { grid-template-columns: minmax(124px,.8fr) minmax(128px,1.2fr); gap: 6px; }
    .zoneNavigatorInputRow { grid-template-columns: minmax(0,1fr) 43px; }
    .zoneNavigatorBossFamily { gap: 4px; padding: 4px; }
    .zoneNavigatorBossVisual { width: 44px; height: 44px; }
    .zoneNavigatorFavoriteList { gap:4px; }
}

/* Favoris de boss : raccourcis persistants, limités à la rotation actuellement débloquée. */
.zoneNavigatorFavoriteDivider {
    color:#ffd86c;
}
.zoneNavigatorFavoriteDivider::before,
.zoneNavigatorFavoriteDivider::after {
    background:rgba(255,211,92,.25);
}
.zoneNavigatorFavoriteList {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    align-items:start;
    gap:7px;
    min-height:0;
    max-height:176px;
    flex:0 0 auto;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,211,92,.10);
}
.zoneNavigatorFavoriteList[hidden] {
    display:none !important;
}
.zoneNavigatorFavoriteList .zoneNavigatorBoss {
    width:100%;
    max-width:none;
}
.zoneNavigatorBossList:not(.zoneNavigatorFavoriteList) {
    flex:1 1 auto;
    min-height:110px;
}
.zoneNavigatorBoss.is-favorite::after {
    content:"★";
    position:absolute;
    top:3px;
    right:5px;
    z-index:2;
    color:#ffd85b;
    font-size:10px;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.9);
    pointer-events:none;
}
.zoneNavigatorFavoriteList .zoneNavigatorBoss {
    border-color:rgba(255,210,76,.38);
    background:linear-gradient(180deg,rgba(54,45,16,.66),rgba(13,34,47,.78));
}
.zoneNavigatorFavoriteList .zoneNavigatorBoss:hover {
    border-color:rgba(255,220,103,.72);
    background:linear-gradient(180deg,rgba(75,60,19,.76),rgba(17,49,68,.86));
}

@media (max-width: 420px) {
    #levelUIContainer {
        width: min(330px, calc(100% - 60px));
    }
    .difficulty-switch-button {
        width: 28px;
        height: 39px;
        border-radius: 9px;
    }
    .difficulty-switch-button--previous { left: -29px; }
    .difficulty-switch-button--next { right: -29px; }
    .difficulty-switch-button img {
        width: 16px;
        height: 22px;
    }
}