/* ============================================
   КАРТА МИРА (аккордеон)
   Заголовки — стиль location-bar (полоски + текст).
   Кнопки локаций — рамка как главная иллюстрация (node-content-frame).
   Кнопка «Закрыть карту» — стиль кнопки выбора (buttons.css).
   Без скруглений. Летящие звёзды (jump-point) сохранены.
   ============================================ */

/* Переменные под стиль location-bar и рамки → variables.css */
#map-screen {
    --location-bar-stripe-color: var(--frame-rgb);
    --location-bar-stripe-alpha: 0.15;
    --location-bar-text-color: #4c9baf;
    --frame-line-color: var(--frame-rgb);
    --frame-line-alpha: 0.5;
    --frame-sq-color: var(--frame-color);
    --matrix-primary: var(--frame-rgb);
    --matrix-alpha: 0.03;
}

/* Заблокированная локация (другой мир) */
.map-item.map-item-locked .map-icon {
    opacity: 0.9;
}
.map-item.map-item-locked {
    cursor: pointer;
    opacity: 0.85;
}
.map-item.map-item-locked:hover {
    opacity: 1;
}

/* Форматирование описания в пункте карты */
.map-desc strong,
.map-desc b {
    font-weight: bold;
}
.map-desc em,
.map-desc i {
    font-style: italic;
}
.map-desc code {
    font-family: 'Courier New', monospace;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 4px;
    border-radius: 0;
    font-size: 0.9em;
}
.map-desc a {
    color: #4cc9f0;
    text-decoration: underline;
}

.map-title {
    text-align: center;
    margin: 16px 0 12px;
    font-size: 34px;
    letter-spacing: 0.3px;
}

.map-accordion {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 10px 14px;
    box-sizing: border-box;
}

/* --- Заголовки аккордеона в стиле location-bar (полоски + текст) --- */
.map-item {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 10px 14px;
    margin: 6px 0;
    text-align: left;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-sizing: border-box;
}

.map-item:hover {
    filter: brightness(1.05);
}

/* ПК: при наведении ярче фон у заголовков и кнопок локаций */
@media (hover: hover) and (pointer: fine) {
    .map-item.level-0:hover {
        filter: brightness(1.2);
    }
    .map-item.level-1:hover,
    .map-item.level-2:hover {
        filter: brightness(1.15);
        background: repeating-linear-gradient(
            45deg,
            rgba(var(--matrix-primary, 0, 168, 255), 0.08),
            rgba(var(--matrix-primary, 0, 168, 255), 0.08) 50px,
            rgba(0, 0, 0, 0.03) 50px,
            rgba(0, 0, 0, 0.03) 70px
        ) !important;
    }
    .map-item.jump-point:hover {
        filter: brightness(1.12);
    }
}

/* Уровень 0 — заголовок категории (Jump Points, Nyx …) — как location-bar */
.map-item.level-0 {
    padding-left: 14px;
    min-height: 18px;
    margin-top: 10px;
    background: repeating-linear-gradient(
        45deg,
        rgba(var(--location-bar-stripe-color, 0, 168, 255), var(--location-bar-stripe-alpha, 0.15)),
        rgba(var(--location-bar-stripe-color, 0, 168, 255), var(--location-bar-stripe-alpha, 0.15)) 10px,
        rgba(0, 0, 0, 0.02) 10px,
        rgba(0, 0, 0, 0.02) 15px
    );
    border-radius: 0;
}
.map-item.level-0 .map-label,
.map-item.level-0 .map-icon {
    color: var(--location-bar-text-color, #4c9baf);
    font-family: "Noto Sans", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.map-item.level-0 .map-arrow {
    color: var(--location-bar-text-color, #4c9baf);
}

/* Уровни 1–2 — кнопки локаций: рамка как главная иллюстрация (линии сверху/снизу, уголки, лёгкий фон) */
.map-item.level-1,
.map-item.level-2 {
    position: relative;
    background: repeating-linear-gradient(
        45deg,
        rgba(var(--matrix-primary, 0, 168, 255), var(--matrix-alpha, 0.03)),
        rgba(var(--matrix-primary, 0, 168, 255), var(--matrix-alpha, 0.03)) 50px,
        rgba(0, 0, 0, 0.02) 50px,
        rgba(0, 0, 0, 0.02) 70px
    );
    border: none;
    border-top: 1px solid rgba(var(--frame-line-color, 0, 168, 255), var(--frame-line-alpha, 0.5));
    border-bottom: 1px solid rgba(var(--frame-line-color, 0, 168, 255), var(--frame-line-alpha, 0.5));
    border-radius: 0;
}
.map-item.level-1::before,
.map-item.level-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--frame-sq-color, #00a8ff);
    border-left: 2px solid var(--frame-sq-color, #00a8ff);
    pointer-events: none;
}
.map-item.level-1::after,
.map-item.level-2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--frame-sq-color, #00a8ff);
    border-right: 2px solid var(--frame-sq-color, #00a8ff);
    pointer-events: none;
}

.map-item.level-1 {
    padding-left: 28px;
    font-size: 17px;
}

.map-item.level-2 {
    padding-left: 44px;
    font-size: 16px;
}

.map-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-icon {
    width: 24px;
    text-align: center;
}

.map-label {
    flex: 1;
    line-height: 1.15;
}

.map-arrow {
    width: 22px;
    text-align: right;
    opacity: 0.95;
    font-size: 20px;
}

.map-desc {
    margin-top: 4px;
    opacity: 0.88;
    font-size: 14px;
    line-height: 1.3;
}

.map-group {
    margin: 0;
}

.map-children {
    display: none;
    margin: 0;
}

.map-group.open > .map-children {
    display: block;
}

/* Активная локация на карте */
.map-item.active-location {
    background: rgba(40, 170, 90, 0.65) !important;
    border-top: 2px solid rgba(140, 255, 190, 0.75);
    border-bottom: 2px solid rgba(140, 255, 190, 0.75);
    border-radius: 0;
}

/* Текущая локация (здесь находишься) — неактивна, справа 🚩 */
.map-item.map-item-highlight {
    background: rgba(76, 201, 240, 0.45) !important;
    border-top: 2px solid rgba(76, 201, 240, 0.9);
    border-bottom: 2px solid rgba(76, 201, 240, 0.9);
    border-radius: 0;
    animation: map-highlight-pulse 1.5s ease-in-out infinite;
}
@keyframes map-highlight-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.4);
    }
    50% {
        box-shadow: 0 0 12px 4px rgba(76, 201, 240, 0.3);
    }
}
.map-item.map-item-current-location {
    opacity: 0.85;
    cursor: default;
    pointer-events: none;
}
.map-item.map-item-current-location .map-flag {
    margin-left: 8px;
    font-size: 1.1em;
}

/* Кнопка «Закрыть карту» — в стиле кнопки выбора (buttons.css) */
.back-button {
    display: block;
    width: calc(100% - 24px);
    max-width: 540px;
    margin: 20px auto;
    padding: 16px;
    background: rgba(var(--frame-rgb), 0.06);
    border: none;
    border-top: 1px solid rgba(var(--frame-rgb), 0.5);
    border-bottom: 1px solid rgba(var(--frame-rgb), 0.5);
    border-radius: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    color: rgba(185, 207, 211, 0.95);
    cursor: pointer;
    transition: background 0.2s;
}
.back-button:hover {
    background: rgba(90, 121, 205, 0.35);
}

/* Jump Points — специальное оформление (без скруглений) */
.map-group.jump-points {
    border-left: 3px solid rgba(100, 200, 255, 0.6);
}

/* Кнопка прыжка: летящие звёзды (canvas + overlay-градиент, при hover градиент плавно убирается) */
.map-item.jump-point {
    position: relative;
    overflow: hidden;
    background: rgba(100, 150, 255, 0.35) !important;
    border-radius: 0;
}
.map-item.jump-point .map-item-starfield {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}
/* Overlay: слева сплошной фон (звёзды скрыты под текстом), справа прозрачно; при hover плавно убирается */
.map-item.jump-point .map-item-starfield::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgb(58, 87, 148) 0%,
        rgba(38, 56, 97, 0.95) 20%,
        rgba(25, 38, 65, 0.5) 40%,
        transparent 50%
    );
    pointer-events: none;
    transition: opacity 1.0s ease;
}
.map-item.jump-point:hover .map-item-starfield::after {
    opacity: 0;
}
.map-item.jump-point .map-item-starfield canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.map-item.jump-point .map-item-content {
    position: relative;
    z-index: 1;
}