/* ============================================================
   RAVENCLAN PORTAL — COSMIC VOID UI (CLEAN FINAL VERSION)
   ============================================================ */

/* ------------------------------------------------------------
   ROOT VARIABLES
   ------------------------------------------------------------ */
:root {
    --bg-deep: #020204;
    --bg-void: #05050b;

    --purple-core: #6d2bff;
    --purple-glow: rgba(109, 43, 255, 0.55);

    --blue-core: #2f6bff;
    --blue-glow: rgba(47, 107, 255, 0.45);

    --green-core: #3fd1a0;
    --green-glow: rgba(63, 209, 160, 0.45);

    --orange-core: #ff6a2e;
    --orange-glow: rgba(255, 106, 46, 0.45);

    --text-main: #e6e6f7;
    --text-muted: #9a9ab8;

    --font-main: "Inter", system-ui, sans-serif;
    --font-display: "Cinzel", serif;
}

/* ============================================================
   GLOBAL + BACKGROUND STACK
   ============================================================ */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--text-main);
    font-family: var(--font-main);
    background-color: var(--bg-void);
    overflow-x: hidden;
}

html {
    background: none !important;
}

/* Background image */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url("/images/ritual-bg.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Dark overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ============================================================
   ⭐ GLOBAL HIDDEN CLASS (ADDED)
   ============================================================ */

.hidden {
    display: none !important;
}

/* ============================================================
   COSMIC FOG
   ============================================================ */

.fog-layer {
    position: fixed;
    inset: -25%;
    background:
        radial-gradient(circle at 20% 10%, rgba(109, 43, 255, 0.18), transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(47, 107, 255, 0.18), transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(63, 209, 160, 0.12), transparent 60%);
    filter: blur(12px);
    opacity: 0.35;
    mix-blend-mode: screen;
    animation: fog-drift 120s ease-in-out infinite alternate;
    z-index: 1;
}

.fog-front {
    opacity: 0.22;
    filter: blur(18px);
    animation-duration: 160s;
}

@keyframes fog-drift {
    from { transform: translate3d(-40px, -20px, 0) scale(1.05); }
    to   { transform: translate3d(40px, 20px, 0) scale(1.12); }
}

/* ============================================================
   HEADER
   ============================================================ */

.header {
    background: linear-gradient(135deg, #0a0a12cc, #05050bcc);
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--text-muted);
    opacity: 0.85;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    margin: 1.5rem auto;
    width: fit-content;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--purple-core);
    box-shadow: 0 0 12px var(--purple-core);
}

/* ============================================================
   SIGIL ORBS — DESKTOP BASE
   ============================================================ */

.sigil-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    position: relative;
}

/* Base orb */
.sigil-orb {
    position: relative;
    z-index: 1;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    border: 1px solid var(--purple-core);
    box-shadow: 0 0 25px var(--purple-glow);
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: brightness(.8);
    transition: 5s ease, filter 5s ease;
    overflow: hidden;
}

/* Orb label */
.orb-label {
    font-family: var(--font-display);
    font-size: 0.80rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
    transform: translateY(125%);
}

/* ============================================================
   ORB BACKGROUNDS
   ============================================================ */

.orb-foundry     { background-image: url('/images/foundry.png'); }
.orb-ravenrealms { background-image: url('/images/ravenrealms.png'); }
.orb-grafana     { background-image: url('/images/grafana.png'); }
.orb-webmin      { background-image: url('/images/webmin.png'); }
.orb-cockpit     { background-image: url('/images/cockpit.png'); }
.orb-dashboard   { background-image: url('/images/dashboard.png'); }
.orb-danger      { background-image: url('/images/logout.png'); }
.orb-status      { background-image: url('/images/loggedin.png'); }
.orb-login       { background-image: url('/images/loggedin.png'); }

.orb-foundry,
.orb-ravenrealms,
.orb-grafana,
.orb-webmin,
.orb-cockpit,
.orb-dashboard,
.orb-danger,
.orb-status,
.orb-login {
    background-size: cover;
    background-position: center;
}

/* Logout orb glow */
.sigil-danger {
    border-color: var(--orange-core);
    box-shadow: 0 0 25px var(--orange-glow);
}

.sigil-danger .orb-label {
    color: var(--orange-core);
    text-shadow: 0 0 10px var(--orange-core);
}

/* ============================================================
   FADE‑TO‑BLACK (EXCEPT HOVERED ORB)
   ============================================================ */
.fade-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 3s ease;
    z-index: 5;
    background: rgba(0,0,0,0.95);
}
.sigil-row:hover + .fade-overlay {
    opacity: 1;
}
.touch-active + .fade-overlay {
    opacity: 1 !important;
}

/* ============================================================
   HOVER EFFECT
   ============================================================ */

.sigil-orb:hover {
    transform: translateY(-6px) scale(1.08);
    filter: brightness(1.7);
    box-shadow: 0 0 35px var(--green-glow);
    z-index: 99999;
}

/* ============================================================
   MOBILE LAYOUT (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .main,
    .page-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .header {
        padding: 0.6rem 3rem !important;
        margin-top: 0.9rem !important;
        margin-bottom: 0.9rem !important;
    }

    .header h1 {
        font-size: 1.5rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .header p {
        font-size: 0.9rem !important;
        margin: 0.2rem 0 0 !important;
        line-height: 1.2 !important;
    }

    .sigil-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.3rem !important;
        justify-items: center;
        margin-top: -8.5rem !important;
        width: 100%;
    }

    .sigil-orb {
        width: 100px !important;
        height: 100px !important;
        overflow: visible !important;
    }

    .orb-label {
        position: absolute !important;
        bottom: -15px !important;
        left: 50% !important;
        transform: translateX(-55%) !important;
        font-size: 0.8rem !important;
        width: max-content;
        pointer-events: none;
        z-index: 10;
    }

    /* (This stays — mobile override) */
    .hidden {
        display: none !important;
    }

    .sigil-row > :last-child:nth-child(odd) {
        grid-column: span 2;
        justify-self: center;
    }

    .footer {
        margin-top: 2rem !important;
    }

    .sub-footer {
        margin-top: 0.5rem !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    color: var(--text-muted);
    opacity: 0.85;
    font-style: italic;
    margin-top: 3rem;
    text-align: center;
    position: relative;
    z-index: 99998;
}

.sub-footer {
    color: var(--text-muted);
    opacity: 0.85;
    font-style: italic;
    margin-top: 1rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ============================================================
   USER INFO
   ============================================================ */

.avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #6a2e6a;
    box-shadow: 0 0 10px #6a2e6a;
}

#user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.username {
    font-size: 1.2rem;
    color: #eee;
    text-shadow: 0 0 5px #6a2e6a;
}