/*
 * Module optionnel d’orientation.
 *
 * Ce fichier peut être retiré sans empêcher
 * le fonctionnement de la carte tactile.
 */

/* ==========================
   BOUTON D’ACTIVATION
========================== */

.sky-orientation-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 22px;

    border: 0;
    border-radius: 999px;

    background:
            linear-gradient(
                    135deg,
                    #f5df8d,
                    #d4af37 45%,
                    #9e7426
            );

    color: #080808;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
            0 18px 45px
            rgba(212,175,55,.22);

    transition:
            transform .25s ease,
            box-shadow .25s ease;
}

.sky-orientation-start:hover {
    transform: translateY(-2px);

    box-shadow:
            0 23px 55px
            rgba(212,175,55,.30);
}

/* ==========================
   VUE ORIENTÉE
========================== */

.sky-orientation-experience {
    position: relative;

    display: none;

    min-height: 680px;

    overflow: hidden;

    border:
            1px solid
            rgba(255,255,255,.10);

    border-radius: 32px;

    background:
            radial-gradient(
                    circle at 50% 46%,
                    rgba(47,58,110,.20),
                    transparent 45%
            ),
            linear-gradient(
                    180deg,
                    rgba(5,7,18,.92),
                    rgba(1,2,7,.98)
            );

    box-shadow:
            0 42px 120px
            rgba(0,0,0,.55),
            inset 0 1px 0
            rgba(255,255,255,.06);
}

.sky-orientation-experience.is-visible {
    display: block;
}

.sky-orientation-canvas {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    touch-action: none;
}

.sky-orientation-hud {
    position: absolute;
    z-index: 3;
    inset: 0;

    pointer-events: none;
}

.sky-orientation-topbar {
    position: absolute;
    top: 20px;
    left: 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7px;
}

.sky-orientation-status,
.sky-orientation-coordinates {
    display: inline-flex;
    align-items: center;

    min-height: 38px;
    padding: 0 14px;

    border:
            1px solid
            rgba(255,255,255,.10);

    border-radius: 999px;

    background:
            rgba(0,0,0,.34);

    backdrop-filter:
            blur(14px);

    color:
            rgba(255,255,255,.76);

    font-size: .75rem;
    letter-spacing: .03em;
}

.sky-orientation-status::before {
    content: "";

    width: 8px;
    height: 8px;

    margin-right: 9px;

    border-radius: 50%;

    background: #d4af37;

    box-shadow:
            0 0 16px
            rgba(212,175,55,.90);
}

/* ==========================
   VISEUR
========================== */

.sky-orientation-marker {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 42px;
    height: 42px;

    transform:
            translate(-50%, -50%);

    border:
            1px solid
            rgba(232,200,100,.48);

    border-radius: 50%;
}

.sky-orientation-marker::before,
.sky-orientation-marker::after {
    content: "";

    position: absolute;

    background:
            rgba(232,200,100,.56);
}

.sky-orientation-marker::before {
    width: 64px;
    height: 1px;

    left: -12px;
    top: 20px;
}

.sky-orientation-marker::after {
    width: 1px;
    height: 64px;

    left: 20px;
    top: -12px;
}

/* ==========================
   ACTIONS
========================== */

.sky-orientation-actions {
    position: absolute;
    z-index: 4;

    right: 20px;
    bottom: 20px;

    display: flex;
    gap: 10px;
}

.sky-orientation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 17px;

    border:
            1px solid
            rgba(255,255,255,.18);

    border-radius: 999px;

    background:
            rgba(0,0,0,.56);

    backdrop-filter:
            blur(15px);

    color: white;

    font-weight: 800;

    cursor: pointer;
}

.sky-orientation-button:hover {
    border-color:
            rgba(212,175,55,.55);
}

/* ==========================
   BASCULE DES DEUX CARTES
========================== */

#skyStandardExperience.is-hidden {
    display: none;
}

/* ==========================
   MOBILE
========================== */

@media (max-width: 900px) {

    .sky-orientation-experience {
        width:
                calc(100% + 48px);

        min-height: 90svh;

        margin-left: -24px;

        border-left: 0;
        border-right: 0;

        border-radius: 0;
    }

    .sky-orientation-topbar {
        top: 10px;
        left: 10px;

        gap: 5px;
    }

    .sky-orientation-status,
    .sky-orientation-coordinates {
        min-height: 32px;
        padding: 0 10px;

        background:
                rgba(0,0,0,.25);

        font-size: .66rem;
    }

    .sky-orientation-actions {
        right: 12px;
        bottom: 12px;
    }

    .sky-orientation-button {
        min-height: 44px;
        padding: 0 14px;

        font-size: .72rem;
    }
}