:root {
    --void-black: #030006;
    --void-black-soft: #050009;
    --void-black-light: #08000f;

    --panel-dark: rgba(13, 5, 23, 0.92);
    --panel-deep: rgba(7, 2, 14, 0.94);

    --purple: #a855f7;
    --purple-mid: #9333ea;
    --purple-dark: #7e22ce;
    --purple-bright: #c084fc;
    --purple-light: #d8b4fe;

    --text-primary: #f3edff;
    --text-secondary: #b8acc7;
    --text-muted: #81748f;

    --online: #62f0bd;
    --warning: #facc15;
    --offline: #ff4f91;
    --unknown: #9b78bb;

    --border-purple: rgba(166, 79, 255, 0.20);
    --border-purple-hover: rgba(178, 91, 255, 0.40);
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background: #050009;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    overflow-x: hidden;

    color: var(--text-primary);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(119, 36, 190, 0.22),
            transparent 40%
        ),
        radial-gradient(
            circle at 20% 20%,
            rgba(96, 31, 160, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 42%,
            rgba(91, 24, 173, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #08000f 0%,
            #050009 50%,
            #030006 100%
        ) !important;

    background-attachment: fixed;
}

a {
    color: inherit;
}

.az-bg-effects {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none !important;
    z-index: 0;
}

.az-grid,
.az-scanner,
.az-orb,
.az-particle {
    pointer-events: none !important;
}

.az-grid {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -25%;
    height: 75vh;

    background-image:
        linear-gradient(
            rgba(170, 80, 255, 0.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(170, 80, 255, 0.09) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    transform:
        perspective(500px)
        rotateX(62deg);

    transform-origin: center bottom;

    opacity: 0.42;

    mask-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0)
        );

    -webkit-mask-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0)
        );

    animation: azGridDrift 20s linear infinite;
}

@keyframes azGridDrift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 42px, 42px 0;
    }
}

.az-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.15;
}

.az-orb-one {
    width: 480px;
    height: 480px;
    top: -190px;
    left: 30%;
    background: rgba(137, 49, 255, 0.45);
    animation: azOrbOne 22s ease-in-out infinite alternate;
}

.az-orb-two {
    width: 360px;
    height: 360px;
    right: -120px;
    top: 35%;
    background: rgba(91, 24, 173, 0.30);
    animation: azOrbTwo 26s ease-in-out infinite alternate;
}

@keyframes azOrbOne {
    from {
        transform: translate3d(-20px, -15px, 0);
    }

    to {
        transform: translate3d(35px, 30px, 0);
    }
}

@keyframes azOrbTwo {
    from {
        transform: translate3d(0, -25px, 0);
    }

    to {
        transform: translate3d(-35px, 35px, 0);
    }
}

.az-scanner {
    position: absolute;
    top: -30vh;
    left: 0;
    width: 100%;
    height: 22vh;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(174, 85, 255, 0.025),
            rgba(174, 85, 255, 0.07),
            rgba(174, 85, 255, 0.025),
            transparent
        );

    filter: blur(2px);
    opacity: 0.7;
    animation: azScannerSweep 14s linear infinite;
}

@keyframes azScannerSweep {
    0% {
        transform: translateY(-30vh);
    }

    100% {
        transform: translateY(150vh);
    }
}

.az-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;

    background: rgba(185, 105, 255, 0.85);

    box-shadow:
        0 0 8px rgba(185, 105, 255, 0.60);

    opacity: 0.28;

    animation:
        azParticleFloat
        15s
        ease-in-out
        infinite;
}

.az-particle:nth-child(5) {
    left: 8%;
    top: 22%;
    animation-delay: -4s;
}

.az-particle:nth-child(6) {
    left: 29%;
    top: 68%;
    animation-delay: -9s;
}

.az-particle:nth-child(7) {
    left: 58%;
    top: 34%;
    animation-delay: -2s;
}

.az-particle:nth-child(8) {
    left: 78%;
    top: 72%;
    animation-delay: -12s;
}

.az-particle:nth-child(9) {
    left: 92%;
    top: 18%;
    animation-delay: -7s;
}

@keyframes azParticleFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.12;
    }

    50% {
        transform: translate3d(8px, -35px, 0);
        opacity: 0.38;
    }
}

.az-scanlines {
    position: fixed;
    inset: 0;

    pointer-events: none !important;

    z-index: 9999;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.016) 0,
            rgba(255,255,255,0.016) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.28;

    mix-blend-mode: soft-light;
}

nav,
header,
main,
section,
footer,
.nav,
.page,
.page-hero,
.hero,
.site-content {
    position: relative;
    z-index: 10;
}

.nav {
    background:
        linear-gradient(
            180deg,
            rgba(7, 2, 14, 0.94),
            rgba(5, 0, 9, 0.88)
        ) !important;

    border-bottom:
        1px solid
        rgba(166, 79, 255, 0.18) !important;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.brand span {
    color: var(--purple-bright) !important;

    text-shadow:
        0 0 16px
        rgba(168, 85, 247, 0.34) !important;
}

.nav-links a {
    color: var(--text-secondary) !important;
}

.nav-links a:hover,
.nav-links a.active {
    color: #fff !important;
}

.nav-links .admin-link {
    padding: 8px 13px;

    border:
        1px solid
        rgba(168, 85, 247, 0.26);

    border-radius: 7px;

    color: var(--purple-light) !important;

    background:
        rgba(126, 34, 206, 0.08);
}

.nav-links .admin-link:hover {
    border-color:
        rgba(192, 132, 252, 0.48);

    background:
        rgba(126, 34, 206, 0.16);
}

.eyebrow,
.system-label {
    font-family:
        Consolas,
        "Courier New",
        monospace !important;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: #b98be8 !important;
}

.hero-main,
.hero-side,
.hero-panel,
.section-card,
.footer-card,
.game-card,
.server-card,
.panel,
.information-panel,
.side-box,
.feature {
    border-color:
        var(--border-purple) !important;

    background:
        linear-gradient(
            180deg,
            rgba(13, 5, 23, 0.90),
            rgba(7, 2, 14, 0.94)
        ) !important;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.35),
        inset 0 1px 0
        rgba(255,255,255,0.025) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.game-card:hover,
.server-card:hover,
.section-card:hover {
    border-color:
        var(--border-purple-hover) !important;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,0.40),
        0 0 20px
        rgba(135,52,220,0.06) !important;
}

body {
    color: var(--text-primary);
}

p,
li,
.server-description,
.hero-description {
    color: var(--text-secondary);
}

.btn-primary,
.primary-button {
    color: #fff !important;

    border:
        1px solid
        rgba(192, 132, 252, 0.38) !important;

    background:
        linear-gradient(
            135deg,
            #7e22ce,
            #9333ea
        ) !important;

    box-shadow:
        0 9px 28px
        rgba(126, 34, 206, 0.22) !important;
}

.btn-primary:hover,
.primary-button:hover {
    background:
        linear-gradient(
            135deg,
            #9333ea,
            #a855f7
        ) !important;
}

.btn-secondary,
.secondary-button {
    color: var(--text-primary) !important;

    border:
        1px solid
        rgba(166, 79, 255, 0.18) !important;

    background:
        rgba(255, 255, 255, 0.025) !important;
}

.btn-secondary:hover,
.secondary-button:hover {
    border-color:
        rgba(192, 132, 252, 0.35) !important;

    background:
        rgba(168, 85, 247, 0.07) !important;
}

.status,
.server-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
}

.status.online,
.server-status.online {
    color: #baffdf !important;

    border:
        1px solid
        rgba(98, 240, 189, 0.22) !important;

    background:
        rgba(98, 240, 189, 0.08) !important;
}

.status.offline,
.server-status.offline {
    color: #ff9abe !important;

    border:
        1px solid
        rgba(255, 79, 145, 0.24) !important;

    background:
        rgba(255, 79, 145, 0.08) !important;
}

.status.starting,
.server-status.starting,
.status.planned,
.server-status.development {
    color: #ffe68c !important;

    border:
        1px solid
        rgba(250, 204, 21, 0.22) !important;

    background:
        rgba(250, 204, 21, 0.07) !important;
}

.status.unknown,
.server-status.unknown {
    color: #c1a7d8 !important;

    border:
        1px solid
        rgba(155, 120, 187, 0.20) !important;

    background:
        rgba(155, 120, 187, 0.07) !important;
}

.status.online::before {
    background:
        var(--online) !important;

    box-shadow:
        0 0 10px
        rgba(98, 240, 189, 0.58) !important;
}

.status.offline::before {
    background:
        var(--offline) !important;
}

.status.starting::before,
.status.planned::before {
    background:
        var(--warning) !important;
}

.status.unknown::before {
    background:
        var(--unknown) !important;
}

.section-divider {
    width: 100%;
    height: 1px;
    margin: 28px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(168,85,247,0.30),
            transparent
        );
}

@media (max-width: 700px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .az-grid {
        left: -50%;
        right: -50%;
        height: 65vh;
        background-size: 32px 32px;
        opacity: 0.28;
    }

    .az-orb {
        filter: blur(70px);
    }

    .az-orb-one {
        width: 300px;
        height: 300px;
    }

    .az-orb-two {
        width: 240px;
        height: 240px;
    }

    .az-scanner {
        opacity: 0.45;
    }

    .az-scanlines {
        opacity: 0.20;
    }

    .nav-links {
        gap: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .az-grid,
    .az-scanner,
    .az-orb,
    .az-particle {
        animation: none !important;
    }
}


/* =========================================================
   CERBERUS BACKGROUND ALIGNMENT
   Stronger full-screen infrastructure grid
   ========================================================= */

body {
    position: relative;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(110, 31, 180, 0.20) 0%,
            rgba(72, 16, 125, 0.10) 30%,
            transparent 62%
        ),
        radial-gradient(
            ellipse at 82% 28%,
            rgba(95, 28, 165, 0.08),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #07000d 0%,
            #050008 46%,
            #030005 100%
        ) !important;
}


/* Make effects a true visible layer above the body background */

.az-bg-effects {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    pointer-events: none !important;

    z-index: 1 !important;
}


/* ---------------------------------------------------------
   CERBERUS FULL VIEWPORT GRID
   --------------------------------------------------------- */

.az-grid {
    position: absolute !important;

    /*
       Pull the plane far outside the viewport so rotated edges
       never create gaps.
    */
    left: -35% !important;
    width: 170% !important;

    top: -7vh !important;
    bottom: auto !important;

    height: 125vh !important;

    background-image:
        linear-gradient(
            rgba(158, 67, 226, 0.105) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(158, 67, 226, 0.105) 1px,
            transparent 1px
        ) !important;

    background-size:
        56px 56px !important;

    background-position:
        center top,
        center top;

    transform:
        perspective(700px)
        rotateX(58deg)
        scale(1.22) !important;

    transform-origin:
        center top !important;

    opacity: 0.64 !important;

    /*
       Cerberus has a visible horizon, but the grid remains
       present much farther down the page.
    */
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.36) 0%,
            rgba(0, 0, 0, 0.95) 16%,
            rgba(0, 0, 0, 0.90) 62%,
            rgba(0, 0, 0, 0.25) 100%
        ) !important;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.36) 0%,
            rgba(0, 0, 0, 0.95) 16%,
            rgba(0, 0, 0, 0.90) 62%,
            rgba(0, 0, 0, 0.25) 100%
        ) !important;

    animation:
        azCerberusGridDrift
        28s
        linear
        infinite !important;
}


@keyframes azCerberusGridDrift {

    from {
        background-position:
            center 0,
            center 0;
    }

    to {
        background-position:
            center 56px,
            calc(50% + 56px) 0;
    }

}


/* ---------------------------------------------------------
   HORIZON GLOW
   --------------------------------------------------------- */

.az-bg-effects::before {
    content: "";

    position: absolute;

    left: -10%;
    right: -10%;

    top: 4vh;

    height: 38vh;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(126, 34, 206, 0.18),
            rgba(91, 33, 182, 0.07) 42%,
            transparent 72%
        );

    filter: blur(24px);

    pointer-events: none;

    opacity: 0.9;

    z-index: 2;
}


/* Thin horizon line similar to Cerberus */

.az-bg-effects::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 20.5vh;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 2%,
            rgba(152, 74, 220, 0.04) 15%,
            rgba(169, 87, 239, 0.15) 50%,
            rgba(152, 74, 220, 0.04) 85%,
            transparent 98%
        );

    box-shadow:
        0 0 24px
        rgba(126, 34, 206, 0.08);

    pointer-events: none;

    z-index: 3;
}


/* ---------------------------------------------------------
   AMBIENT GLOW
   --------------------------------------------------------- */

.az-orb-one {
    width: 620px !important;
    height: 420px !important;

    top: -170px !important;
    left: 32% !important;

    background:
        rgba(126, 34, 206, 0.35) !important;

    filter:
        blur(110px) !important;

    opacity: 0.20 !important;
}


.az-orb-two {
    width: 480px !important;
    height: 480px !important;

    right: -170px !important;
    top: 27% !important;

    background:
        rgba(88, 28, 135, 0.28) !important;

    filter:
        blur(120px) !important;

    opacity: 0.16 !important;
}


/* ---------------------------------------------------------
   SCANNER
   --------------------------------------------------------- */

.az-scanner {
    width: 100% !important;

    height: 15vh !important;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(168, 85, 247, 0.012) 24%,
            rgba(168, 85, 247, 0.055) 50%,
            rgba(168, 85, 247, 0.012) 76%,
            transparent 100%
        ) !important;

    opacity: 0.75 !important;

    filter: blur(3px);

    z-index: 4;
}


/* ---------------------------------------------------------
   CONTENT MUST STAY ABOVE BACKGROUND
   --------------------------------------------------------- */

.nav,
header,
main,
section,
footer,
.page,
.page-hero,
.hero,
.site-content,
.container {
    position: relative;

    z-index: 10;
}


/* ---------------------------------------------------------
   SLIGHTLY MORE TRANSPARENT PANELS
   Lets the Cerberus environment show through.
   --------------------------------------------------------- */

.hero-main,
.hero-side,
.hero-panel,
.section-card,
.footer-card,
.game-card,
.server-card,
.panel,
.information-panel,
.side-box,
.feature {
    background:
        linear-gradient(
            180deg,
            rgba(12, 4, 21, 0.86),
            rgba(6, 1, 12, 0.90)
        ) !important;

    border-color:
        rgba(161, 74, 231, 0.22) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .az-grid {
        left: -80% !important;

        width: 260% !important;

        top: -3vh !important;

        height: 115vh !important;

        background-size:
            38px 38px !important;

        transform:
            perspective(520px)
            rotateX(60deg)
            scale(1.16) !important;

        opacity:
            0.46 !important;
    }


    .az-bg-effects::after {
        top:
            17vh;
    }


    .az-orb-one {
        width:
            390px !important;

        height:
            330px !important;
    }


    .az-orb-two {
        width:
            300px !important;

        height:
            300px !important;
    }

}


/* Motion accessibility stays supported */

@media (prefers-reduced-motion: reduce) {

    .az-grid {
        animation:
            none !important;
    }

}


/* =========================================================
   AZATHOTH TOP EDGE SWEEP
   Tasteful purple + dark crimson accent
   ========================================================= */

.hero-main,
.hero-side,
.hero-panel,
.section-card,
.footer-card,
.game-card,
.server-card,
.panel,
.information-panel {
    position: relative;
    overflow: hidden;

    border:
        1px solid
        rgba(142, 61, 194, 0.24) !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}


/* ---------------------------------------------------------
   Moving light only across the TOP edge
   --------------------------------------------------------- */

.hero-main::before,
.hero-side::before,
.hero-panel::before,
.section-card::before,
.footer-card::before,
.game-card::before,
.server-card::before,
.panel::before,
.information-panel::before {
    content: "";

    position: absolute;

    top: -1px;
    left: -32%;

    width: 28%;
    height: 2px;

    pointer-events: none;

    z-index: 3;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(109, 40, 148, 0.00) 8%,

            rgba(132, 48, 183, 0.25) 24%,

            rgba(168, 85, 247, 0.80) 48%,

            rgba(145, 61, 205, 0.72) 64%,

            rgba(120, 25, 54, 0.55) 78%,

            rgba(74, 16, 34, 0.28) 88%,

            transparent 100%
        );

    box-shadow:
        0 0 5px rgba(138, 60, 200, 0.20),
        0 0 10px rgba(121, 42, 174, 0.08);

    opacity: 0;

    animation:
        azTopEdgeSweep
        12s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   Sweep behavior:
   mostly invisible, then crosses once, then disappears
   --------------------------------------------------------- */

@keyframes azTopEdgeSweep {

    0%,
    58% {
        transform:
            translateX(0);

        opacity:
            0;
    }

    61% {
        opacity:
            0.18;
    }

    66% {
        opacity:
            0.88;
    }

    80% {
        opacity:
            0.80;
    }

    86% {
        transform:
            translateX(470%);

        opacity:
            0.16;
    }

    89%,
    100% {
        transform:
            translateX(470%);

        opacity:
            0;
    }

}


/* ---------------------------------------------------------
   Desynchronize panels so they do not all sweep together
   --------------------------------------------------------- */

.hero-side::before,
.server-card:nth-child(2n)::before,
.game-card:nth-child(2n)::before,
.panel:nth-child(2n)::before {
    animation-delay:
        -4.2s;
}

.server-card:nth-child(3n)::before,
.game-card:nth-child(3n)::before,
.panel:nth-child(3n)::before {
    animation-delay:
        -7.6s;
}

.section-card:nth-child(2n)::before,
.information-panel:nth-child(2n)::before {
    animation-delay:
        -2.8s;
}


/* ---------------------------------------------------------
   Hover remains tasteful
   --------------------------------------------------------- */

.hero-main:hover,
.hero-side:hover,
.hero-panel:hover,
.section-card:hover,
.game-card:hover,
.server-card:hover,
.panel:hover,
.information-panel:hover {
    border-color:
        rgba(166, 76, 222, 0.34) !important;

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.42),
        0 0 14px rgba(104, 38, 148, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
}


/* ---------------------------------------------------------
   Small inner cards stay static
   --------------------------------------------------------- */

.side-box,
.feature,
.stat {
    border:
        1px solid
        rgba(135, 55, 183, 0.17) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.016) !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .hero-main::before,
    .hero-side::before,
    .hero-panel::before,
    .section-card::before,
    .footer-card::before,
    .game-card::before,
    .server-card::before,
    .panel::before,
    .information-panel::before {

        width:
            38%;

        animation-duration:
            14s;
    }

}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .hero-main::before,
    .hero-side::before,
    .hero-panel::before,
    .section-card::before,
    .footer-card::before,
    .game-card::before,
    .server-card::before,
    .panel::before,
    .information-panel::before {

        animation:
            none !important;

        opacity:
            0 !important;
    }

}

/* =========================================================
   AZATHOTH GLOBAL NAVIGATION FINAL
   ========================================================= */

.az-global-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;

    background:
        linear-gradient(
            180deg,
            rgba(8,2,15,.97),
            rgba(4,0,8,.93)
        ) !important;

    border-bottom:
        1px solid rgba(177,91,255,.25) !important;

    box-shadow:
        0 10px 38px rgba(0,0,0,.40),
        inset 0 -1px 0 rgba(181,96,255,.06) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.az-global-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;

    width: min(72vw,760px);
    height: 1px;

    transform: translateX(-50%);
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(127,38,190,.16),
            rgba(210,142,255,.60),
            rgba(127,38,190,.16),
            transparent
        );

    box-shadow:
        0 0 15px rgba(160,67,225,.28);
}


/* ---------- BAR ---------- */

.az-global-nav .nav-inner {
    width: min(1180px,calc(100% - 40px)) !important;

    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 30px !important;
}


/* ---------- BRAND ---------- */

.az-global-nav .az-nav-brand {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    height: 56px !important;

    gap: 12px !important;

    flex: 0 0 auto !important;

    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.az-global-nav .az-nav-sigil {
    display: block !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    flex: 0 0 48px !important;

    object-fit: contain !important;

    filter:
        drop-shadow(0 0 5px rgba(215,162,255,.48))
        drop-shadow(0 0 13px rgba(142,47,209,.32));

    transition:
        transform 220ms ease,
        filter 220ms ease;
}

.az-global-nav .az-nav-brand:hover .az-nav-sigil {
    transform: scale(1.06);

    filter:
        drop-shadow(0 0 7px rgba(230,194,255,.68))
        drop-shadow(0 0 18px rgba(163,61,229,.46));
}

.az-global-nav .az-nav-wordmark {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    width: auto !important;

    line-height: 1 !important;
}

.az-global-nav .az-nav-wordmark strong {
    display: block !important;

    color: #f4ecfb !important;

    font-family:
        Inter,
        system-ui,
        sans-serif !important;

    font-size: .98rem !important;
    font-weight: 850 !important;

    letter-spacing: .15em !important;
    line-height: 1 !important;

    text-decoration: none !important;
}

.az-global-nav .az-nav-wordmark > span {
    display: block !important;

    margin-top: 5px !important;

    color: #ae70d5 !important;

    font-family:
        Consolas,
        "Courier New",
        monospace !important;

    font-size: .57rem !important;
    font-weight: 800 !important;

    letter-spacing: .30em !important;
    line-height: 1 !important;

    text-decoration: none !important;
}


/* ---------- LINKS ---------- */

.az-global-nav .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;

    gap: 6px !important;
}

.az-global-nav .nav-links > a {
    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;

    padding: 0 15px !important;

    border:
        1px solid transparent !important;

    border-radius: 7px !important;

    color: #a89caf !important;
    background: transparent !important;

    font-family:
        Consolas,
        "Courier New",
        monospace !important;

    font-size: .74rem !important;
    font-weight: 700 !important;

    letter-spacing: .09em !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;

    transition:
        color 170ms ease,
        border-color 170ms ease,
        background 170ms ease,
        transform 170ms ease;
}

.az-global-nav .nav-links > a:not(.admin-link)::after {
    content: "";

    position: absolute;

    left: 50%;
    right: 50%;
    bottom: 5px;

    height: 1px;

    background: #c985f3;

    box-shadow:
        0 0 9px rgba(201,133,243,.65);

    transition:
        left 180ms ease,
        right 180ms ease;
}

.az-global-nav .nav-links > a:hover {
    color: #f4eafd !important;

    border-color:
        rgba(178,90,235,.14) !important;

    background:
        rgba(123,38,174,.07) !important;

    transform: translateY(-1px);
}

.az-global-nav .nav-links > a:hover::after,
.az-global-nav .nav-links > a.active::after {
    left: 15px;
    right: 15px;
}

.az-global-nav .nav-links > a.active {
    color: #f7edff !important;

    border-color:
        rgba(190,106,245,.20) !important;

    background:
        linear-gradient(
            180deg,
            rgba(130,42,184,.13),
            rgba(91,26,132,.055)
        ) !important;
}


/* ---------- ADMIN ---------- */

.az-global-nav .nav-links > .admin-link {
    margin-left: 12px !important;

    padding: 0 16px !important;

    border:
        1px solid rgba(182,93,239,.30) !important;

    color: #c99aeb !important;

    background:
        linear-gradient(
            180deg,
            rgba(119,35,167,.11),
            rgba(70,19,105,.07)
        ) !important;
}

.az-admin-indicator {
    display: block;

    width: 5px;
    height: 5px;

    margin-right: 8px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #b764e8;

    box-shadow:
        0 0 8px rgba(183,100,232,.75);
}

.az-global-nav .nav-links > .admin-link:hover {
    color: #f1dfff !important;

    border-color:
        rgba(207,137,249,.50) !important;

    background:
        rgba(128,40,181,.17) !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 720px) {

    .az-global-nav {
        position: relative !important;
    }

    .az-global-nav .nav-inner {
        width:
            min(100% - 24px,1180px) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 11px 0 12px !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 10px !important;
    }

    .az-global-nav .az-nav-brand {
        align-self: flex-start !important;
        height: 44px !important;
    }

    .az-global-nav .az-nav-sigil {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        flex-basis: 40px !important;
    }

    .az-global-nav .nav-links {
        display: grid !important;

        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;

        width: 100% !important;

        gap: 5px !important;
    }

    .az-global-nav .nav-links > a {
        min-height: 38px !important;

        padding: 0 6px !important;

        font-size: .64rem !important;
        letter-spacing: .045em !important;
    }

    .az-global-nav .nav-links > .admin-link {
        margin-left: 0 !important;
        padding: 0 6px !important;
    }

    .az-admin-indicator {
        display: none !important;
    }
}

@media (max-width: 430px) {

    .az-global-nav .nav-links {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }
}



/* =========================================================
   AZATHOTH NAVBAR - SLIM CONTROL TUNING
   ========================================================= */

@media (min-width: 721px) {

    .az-global-nav .nav-links > a {
        min-height: 34px !important;

        padding:
            0 13px !important;

        border-radius:
            5px !important;
    }

    .az-global-nav .nav-links > a:not(.admin-link)::after {
        bottom:
            3px !important;
    }

    .az-global-nav .nav-links > .admin-link {
        padding:
            0 13px !important;
    }

}



/* =========================================================
   AZATHOTH NAVBAR - 38PX CONTROL TUNING
   ========================================================= */

@media (min-width: 721px) {

    .az-global-nav .nav-links > a {
        min-height: 38px !important;
        padding: 0 14px !important;
        border-radius: 6px !important;
    }

    .az-global-nav .nav-links > a:not(.admin-link)::after {
        bottom: 4px !important;
    }

    .az-global-nav .nav-links > .admin-link {
        padding: 0 14px !important;
    }

}



/* =========================================================
   AZATHOTH NAVBAR - FINAL BUTTON SCALE
   ========================================================= */

@media (min-width: 721px) {

    .az-global-nav .nav-links {
        gap: 8px !important;
    }

    .az-global-nav .nav-links > a {
        min-height: 40px !important;

        padding:
            0 18px !important;

        border-radius:
            6px !important;

        font-size:
            .82rem !important;

        letter-spacing:
            .095em !important;
    }

    .az-global-nav .nav-links > a:not(.admin-link)::after {
        bottom:
            4px !important;
    }

    .az-global-nav .nav-links > .admin-link {
        margin-left:
            10px !important;

        padding:
            0 18px !important;
    }

    .az-admin-indicator {
        width:
            6px !important;

        height:
            6px !important;

        flex-basis:
            6px !important;

        margin-right:
            9px !important;
    }

}