/* =========================================================
DESTROZADO07 // HANGAR V3 // SHIP HOLOVIEWER
========================================================= */

.ship-holoviewer {
    position: relative;
    width: 100%;
    min-height: 420px;
}

.ship-holoviewer-viewport {
    position: relative;
    width: 100%;
    height: 480px;
    min-height: 420px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(215, 122, 36, 0.08),
            rgba(6, 8, 9, 0.96) 68%
        );
}

.ship-holoviewer-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,0.012) 1px,
            transparent 1px
        );
    background-size:
        34px 34px;
    opacity: 0.5;
}

.ship-holoviewer-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 70px rgba(0,0,0,0.82),
        inset 0 0 1px rgba(215,122,36,0.34);
}

.ship-holoviewer-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: grab;
}

.ship-holoviewer-canvas:active {
    cursor: grabbing;
}


/* =========================================================
HUD
========================================================= */

.ship-holoviewer-hud {
    position: absolute;
    top: 36px;
    left: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    pointer-events: none;
}

.ship-holoviewer-hud-left,
.ship-holoviewer-hud-right {
    display: flex;
    flex-direction: column;
}

.ship-holoviewer-hud-left {
    align-items: flex-start;
}

.ship-holoviewer-hud-right {
    align-items: flex-end;
    gap: 4px;
}

.ship-holoviewer-title {
    color: var(--accent-hot);
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow:
        0 0 12px rgba(215,122,36,0.28);
}

.ship-holoviewer-ship-name {
    margin-top: 4px;
    color: rgba(255,255,255,0.88);
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ship-holoviewer-hint {
    color: rgba(255,255,255,0.48);
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* =========================================================
STATUS
========================================================= */

.ship-holoviewer-status {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    min-width: 260px;
    padding: 14px 18px;
    transform:
        translate(-50%, -50%);
    border:
        1px solid rgba(215,122,36,0.35);
    background:
        rgba(5,7,8,0.88);
    backdrop-filter:
        blur(8px);
    text-align:
        center;
    pointer-events:
        none;
    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}

.ship-holoviewer-status-main {
    color:
        var(--accent-hot);
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size:
        13px;
    font-weight:
        900;
    letter-spacing:
        0.12em;
    text-transform:
        uppercase;
}

.ship-holoviewer-status-detail {
    margin-top:
        6px;
    color:
        rgba(255,255,255,0.58);
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size:
        11px;
    font-weight:
        700;
    letter-spacing:
        0.07em;
    text-transform:
        uppercase;
}

.ship-holoviewer-status-hidden {
    opacity:
        0;
    visibility:
        hidden;
}


/* =========================================================
CONTROLS
========================================================= */

.ship-holoviewer-controls {
    position:
        absolute;
    left:
        14px;
    bottom:
        14px;
    z-index:
        5;
    display:
        flex;
    align-items:
        center;
    gap:
        8px;
}

.ship-holoviewer-button {
    min-height:
        34px;
    padding:
        0 14px;
    border:
        1px solid rgba(215,122,36,0.40);
    background:
        rgba(10,12,13,0.78);
    color:
        rgba(255,255,255,0.78);
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size:
        11px;
    font-weight:
        900;
    letter-spacing:
        0.09em;
    text-transform:
        uppercase;
    cursor:
        pointer;
    backdrop-filter:
        blur(8px);
    transition:
        border-color 120ms ease,
        background 120ms ease,
        color 120ms ease;
}

.ship-holoviewer-button:hover {
    border-color:
        var(--accent-hot);
    background:
        rgba(215,122,36,0.12);
    color:
        #ffffff;
}


/* =========================================================
READY / ERROR STATES
========================================================= */

.ship-holoviewer-ready
.ship-holoviewer-viewport {
    border-color:
        rgba(215,122,36,0.18);
}

.ship-holoviewer-error
.ship-holoviewer-status {
    border-color:
        rgba(220,72,58,0.62);
}

.ship-holoviewer-error
.ship-holoviewer-status-main {
    color:
        #df5b4f;
}


/* =========================================================
FLEET MEDIA INTEGRATION
========================================================= */

.fleet-ship-media:has(.ship-holoviewer) {
    display:
        block;
    min-height:
        420px;
}

.fleet-ship-media:has(.ship-holoviewer)::before {
    content:
        "D07 // RSI HOLOVIEWER";
}

.fleet-ship-media
.ship-holoviewer {
    width:
        100%;
}

.fleet-ship-media
.ship-holoviewer-viewport {
    width:
        100%;
}

.fleet-ship-media
.fleet-rsi-link {
    z-index:
        10;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (
    max-width: 900px
) {

    .ship-holoviewer-viewport {
        height:
            420px;
        min-height:
            380px;
    }

    .ship-holoviewer-hud {
        top:
            34px;
        left:
            10px;
        right:
            10px;
    }

    .ship-holoviewer-hud-right {
        display:
            none;
    }

    .ship-holoviewer-controls {
        left:
            10px;
        bottom:
            10px;
    }
}


@media (
    max-width: 600px
) {

    .ship-holoviewer,
    .fleet-ship-media:has(.ship-holoviewer) {
        min-height:
            340px;
    }

    .ship-holoviewer-viewport {
        height:
            360px;
        min-height:
            340px;
    }

    .ship-holoviewer-ship-name {
        font-size:
            13px;
    }

    .ship-holoviewer-title {
        font-size:
            10px;
    }

    .ship-holoviewer-status {
        min-width:
            220px;
        max-width:
            calc(100% - 32px);
    }
}