:root {
    --bg: #010403;
    --panel: rgba(5, 18, 10, .82);

    --green: #026937;
    --green-dark: #014923;
    --green-deep: #002b15;
    --green-bright: #31be70;
    --green-light: #a1edbf;

    --white: #fff;
    --text: #f4f9f5;
    --muted: #89988e;
    --dim: #4c5c52;

    --border: rgba(255,255,255,.08);
    --bright-border: rgba(255,255,255,.16);
    --green-border: rgba(49,190,112,.22);

    --shadow: 0 30px 100px rgba(0,0,0,.42);

    --nav: 76px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    overflow-x: hidden;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -10%,
            #082616,
            transparent 31%
        ),
        var(--bg);

    font-family: "Inter", sans-serif;
    line-height: 1.65;
}


body.no-scroll {
    overflow: hidden;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: inherit;
    text-decoration: none;
}


input,
textarea,
select {
    outline: none;
}


::selection {
    color: #002412;
    background: var(--green-bright);
}


/* ======================================================
   LOADER
====================================================== */

.loader {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            #062114,
            #010302 65%
        );

    transition:
        opacity .7s ease,
        visibility .7s ease;
}


.loader.hidden {
    opacity: 0;
    visibility: hidden;
}


.loader-emblem {
    position: relative;

    width: 150px;
    height: 150px;

    display: grid;
    place-items: center;

    margin-bottom: 25px;
}


.loader-emblem img {
    width: 77px;
    height: 77px;

    object-fit: contain;

    border-radius: 50%;
}


.loader-ring {
    position: absolute;

    border:
        1px solid
        rgba(49,190,112,.2);

    border-radius: 50%;
}


.ring-one {
    inset: 0;

    border-top-color: var(--green-bright);

    animation:
        rotate
        3s linear infinite;
}


.ring-two {
    inset: 22px;

    border-style: dashed;

    animation:
        reverseRotate
        4s linear infinite;
}


.loader-name {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 1.55rem;
}


.loader-name span {
    margin-left: 5px;

    color: var(--green-bright);

    font-family: Inter, sans-serif;

    font-size: .57rem;
    letter-spacing: 3px;
}


.loader p {
    min-height: 20px;

    margin: 10px 0 18px;

    color: #506158;

    font-family: monospace;
    font-size: .67rem;
}


.loader-track {
    width: min(340px,72vw);
    height: 2px;

    overflow: hidden;

    background:
        rgba(255,255,255,.055);
}


.loader-track div {
    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--green-dark),
            var(--green-bright),
            white
        );

    box-shadow:
        0 0 14px
        var(--green-bright);
}


.loader > small {
    margin-top: 8px;

    color: #44534a;

    font-family: monospace;
}


/* ======================================================
   BACKGROUND
====================================================== */

#backgroundCanvas {
    position: fixed;
    inset: 0;

    z-index: -12;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


.aurora {
    position: fixed;

    z-index: -11;

    width: 65vw;
    height: 50vw;

    border-radius: 50%;

    filter: blur(160px);

    opacity: .075;

    pointer-events: none;

    animation:
        auroraMove
        16s ease-in-out infinite alternate;
}


.aurora-one {
    left: -20%;
    top: -30%;

    background: #1aca68;
}


.aurora-two {
    right: -28%;
    top: 25%;

    background: #02723c;

    animation-delay: -6s;
}


.aurora-three {
    left: 20%;
    bottom: -38%;

    background: #32df7d;

    animation-delay: -11s;
}


.world-grid {
    position: fixed;

    left: -30%;
    right: -30%;
    bottom: -35%;

    z-index: -13;

    height: 70vh;

    background-image:

        linear-gradient(
            rgba(49,190,112,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(49,190,112,.06) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

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

    transform-origin:
        center top;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 82%
        );

    animation:
        gridTravel
        14s linear infinite;
}


.background-logo {
    position: fixed;

    width: 620px;
    height: 620px;

    right: -230px;
    top: 18%;

    z-index: -14;

    opacity: .018;

    filter:
        grayscale(1)
        brightness(2);

    pointer-events: none;

    animation:
        floatLogo
        18s ease-in-out infinite alternate;
}


.cursor-glow {
    position: fixed;

    width: 520px;
    height: 520px;

    z-index: -8;

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(49,190,112,.08),
            rgba(2,105,55,.025) 44%,
            transparent 72%
        );

    pointer-events: none;
}


.noise {
    position: fixed;
    inset: 0;

    z-index: 80000;

    opacity: .02;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}


.vignette {
    position: fixed;
    inset: 0;

    z-index: -7;

    pointer-events: none;

    box-shadow:
        inset 0 0 220px
        rgba(0,0,0,.68);
}


.page-progress {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    z-index: 100000;
}


.page-progress div {
    width: 0;
    height: 100%;

    background:
        var(--green-bright);

    box-shadow:
        0 0 12px
        var(--green-bright);
}


/* ======================================================
   NAVIGATION
====================================================== */

.navbar {
    position: fixed;

    left: 0;
    top: 0;

    z-index: 10000;

    width: 100%;
    height: var(--nav);

    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid transparent;

    background:
        rgba(1,4,2,.4);

    backdrop-filter:
        blur(20px);

    transition: .3s ease;
}


.navbar.scrolled {
    border-bottom-color:
        var(--border);

    background:
        rgba(1,4,2,.91);
}


.brand {
    display: flex;
    align-items: center;

    gap: 10px;
}


.brand img {
    width: 40px;
    height: 40px;

    object-fit: contain;
}


.brand > div {
    display: flex;
    align-items: baseline;

    gap: 5px;
}


.brand strong {
    font-family:
        "Space Grotesk",
        sans-serif;
}


.brand span {
    color:
        var(--green-bright);

    font-size: .55rem;
    font-weight: 900;
    letter-spacing: 2px;
}


.nav-links {
    display: flex;
    align-items: center;

    gap: 20px;
}


.nav-links a {
    position: relative;

    color: #7b8a80;

    font-size: .68rem;
    font-weight: 700;

    transition: .2s ease;
}


.nav-links a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -10px;

    width: 0;
    height: 2px;

    transform:
        translateX(-50%);

    background:
        var(--green-bright);

    transition:
        width .2s ease;
}


.nav-links a:hover,
.nav-links a.active {
    color: white;
}


.nav-links a.active::after {
    width: 100%;
}


.nav-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


.command-shortcut,
.nav-join {
    height: 38px;

    padding: 0 13px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    cursor: pointer;

    color: #809087;

    background:
        rgba(255,255,255,.025);

    font-size: .65rem;
}


.command-shortcut span {
    margin-right: 7px;

    color:
        var(--green-bright);

    font-family: monospace;
}


.nav-join {
    color:
        var(--green-light);

    border-color:
        var(--green-border);

    background:
        rgba(2,105,55,.15);

    font-weight: 800;
}


.mobile-menu {
    display: none;

    width: 38px;
    height: 38px;

    cursor: pointer;

    background: transparent;
}


.mobile-menu span {
    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    background: white;
}


/* ======================================================
   SHARED
====================================================== */

.section {
    position: relative;
}


.shell {
    width:
        min(1240px,90%);

    margin: auto;

    padding: 120px 0;
}


.section-code {
    margin-bottom: 42px;

    color: #46554c;

    font-family: monospace;
    font-size: .62rem;
    letter-spacing: 1.5px;
}


.eyebrow,
.challenge-label {
    display: block;

    margin-bottom: 14px;

    color:
        var(--green-bright);

    font-size: .61rem;
    font-weight: 900;
    letter-spacing: 2.7px;
}


.section-heading {
    max-width: 710px;
}


.section-heading h2,
.wide-heading h2 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            2.8rem,
            5.6vw,
            5.3rem
        );

    line-height: .96;
    letter-spacing: -3px;
}


.section-heading > p:not(.eyebrow) {
    margin-top: 24px;

    color:
        var(--muted);
}


.wide-heading {
    display: grid;

    grid-template-columns:
        1fr
        minmax(270px,390px);

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;
}


.wide-heading > p {
    color:
        var(--muted);
}


.green {
    color:
        var(--green-light)
        !important;
}


.hidden {
    display: none !important;
}


.full {
    width: 100%;
}


/* ======================================================
   BUTTONS
====================================================== */

.button {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    border-radius: 8px;

    cursor: pointer;

    font-size: .71rem;
    font-weight: 850;

    transition:
        transform .2s ease,
        background .2s ease,
        border .2s ease;
}


.button:hover {
    transform:
        translateY(-2px);
}


.button:disabled {
    opacity: .38;

    cursor: not-allowed;

    transform: none !important;
}


.primary {
    color: white;

    border:
        1px solid
        rgba(95,227,147,.25);

    background:
        linear-gradient(
            135deg,
            #078044,
            #014923
        );

    box-shadow:
        0 14px 45px
        rgba(2,105,55,.23);
}


.primary:hover:not(:disabled) {
    background:
        linear-gradient(
            135deg,
            #0a9952,
            #026037
        );
}


.glass {
    color: white;

    border:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.035);
}


.ghost {
    color: #6d7d73;

    border:
        1px solid transparent;

    background: transparent;
}


.round-button {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    cursor: pointer;

    color: white;

    background:
        rgba(255,255,255,.03);

    font-size: 1.4rem;
}


.text-button {
    margin-top: 12px;

    color: #4d9669;

    background: transparent;

    cursor: pointer;

    font-size: .53rem;
    font-weight: 900;
    letter-spacing: 1.2px;
}


/* ======================================================
   HERO
====================================================== */

.hero {
    position: relative;

    min-height: 100vh;

    padding:
        calc(var(--nav) + 75px)
        6%
        100px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.hero-gateway {
    position: absolute;

    width:
        min(760px,72vw);

    aspect-ratio: 1;

    left: 50%;
    top: 50%;

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

    pointer-events: none;

    opacity: .4;
}


.gateway-ring {
    position: absolute;

    border:
        1px solid
        rgba(49,190,112,.09);

    border-radius: 50%;
}


.gateway-ring-one {
    inset: 0;

    border-top-color:
        var(--green-bright);

    animation:
        rotate
        35s linear infinite;
}


.gateway-ring-two {
    inset: 13%;

    border-style: dashed;

    animation:
        reverseRotate
        27s linear infinite;
}


.gateway-ring-three {
    inset: 29%;

    animation:
        pulse
        5s ease-in-out infinite;
}


.hero-gateway img {
    position: absolute;

    width: 105px;

    left: 50%;
    top: 50%;

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

    opacity: .1;
}


.hero-content {
    position: relative;

    z-index: 3;

    width:
        min(1140px,100%);

    text-align: center;
}


.hero-status {
    width: max-content;

    margin:
        0 auto 28px;

    padding:
        8px 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border:
        1px solid
        var(--green-border);

    border-radius: 999px;

    color: #a4c9b1;

    background:
        rgba(2,105,55,.1);

    font-size: .57rem;
    font-weight: 850;
    letter-spacing: 2px;
}


.hero-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--green-bright);

    box-shadow:
        0 0 13px
        var(--green-bright);
}


.hero-status span {
    width: 1px;
    height: 11px;

    background:
        var(--green-border);
}


.hero h1 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            4rem,
            9.4vw,
            8.9rem
        );

    line-height: .83;
    letter-spacing: -7px;
}


.hero h1 span {
    display: block;

    margin-top: 16px;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            white,
            #cef5dc,
            #31be70,
            white
        );

    background-size:
        230% auto;

    -webkit-background-clip: text;
    background-clip: text;

    animation:
        textFlow
        7s linear infinite;
}


.hero-description {
    max-width: 735px;

    margin:
        38px auto 35px;

    color: #89988e;
}


.hero-description strong {
    color: #d9e6dd;
}


.hero-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;
}


.hero-data {
    width:
        min(900px,100%);

    margin:
        65px auto 0;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    overflow: hidden;

    background:
        rgba(2,9,5,.58);
}


.hero-data div {
    padding: 17px 18px;

    border-right:
        1px solid
        var(--border);

    text-align: left;
}


.hero-data div:last-child {
    border-right: none;
}


.hero-data span {
    display: block;

    color: #46544b;

    font-size: .5rem;
    font-weight: 900;
    letter-spacing: 1.5px;
}


.hero-data strong {
    color: #adb9b1;

    font-size: .67rem;
}


.hero-coordinate {
    position: absolute;

    left: 4%;
    bottom: 35px;

    color: #405047;

    font-family: monospace;
    font-size: .52rem;
}


/* ======================================================
   GAME PANELS
====================================================== */

.community-layout {
    display: grid;

    grid-template-columns:
        1fr .9fr;

    gap: 80px;

    align-items: center;
}


.game-panel,
.quiz-panel,
.rift-game,
.memory-game,
.logo-game {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        var(--green-border);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(2,105,55,.15),
            rgba(255,255,255,.012)
        );

    box-shadow:
        var(--shadow);
}


.game-panel {
    min-height: 430px;

    padding: 38px;
}


.scanner {
    position: absolute;

    left: 0;
    right: 0;
    top: -90px;

    height: 90px;

    background:
        linear-gradient(
            transparent,
            rgba(49,190,112,.06),
            transparent
        );

    animation:
        scanner
        7s linear infinite;
}


.panel-label {
    color: #58685f;

    font-size: .54rem;
    font-weight: 900;
    letter-spacing: 1.8px;
}


.secret-number {
    display: block;

    margin: 14px 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            4.3rem,
            8vw,
            7rem
        );

    line-height: .9;
    letter-spacing: -5px;
}


.game-panel > p {
    margin-bottom: 24px;

    color:
        var(--muted);

    font-size: .81rem;
}


.guess-form {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 8px;
}


.guess-form input {
    min-width: 0;

    padding: 0 15px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    color: white;

    background:
        rgba(255,255,255,.025);
}


.game-result,
.quiz-result,
.submission-result {
    margin-top: 16px;
}


.game-result.show,
.submission-result.show {
    padding: 16px;

    border:
        1px solid
        var(--green-border);

    border-radius: 8px;

    background:
        rgba(49,190,112,.04);

    color: #a9bbb0;
}


.game-result strong {
    display: block;

    color:
        var(--green-light);

    font-size: 1.2rem;
}


/* ======================================================
   JOIN
====================================================== */

.join-drawer {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-10px);

    transition: .5s ease;
}


.join-drawer.open {
    max-height: 650px;

    margin-top: 24px;

    opacity: 1;

    transform:
        translateY(0);
}


.join-inner {
    padding: 35px;

    border:
        1px solid
        var(--green-border);

    border-radius: 16px;

    background:
        rgba(4,14,8,.96);
}


.join-head {
    display: flex;
    justify-content: space-between;

    margin-bottom: 24px;
}


.join-head h3 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 2rem;
}


.connection-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 8px;
}


.connection-grid div {
    padding: 18px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background:
        rgba(255,255,255,.018);
}


.connection-grid span {
    display: block;

    color: #4b5a50;

    font-size: .5rem;
    font-weight: 900;
    letter-spacing: 1.3px;
}


.connection-grid strong,
.connection-grid a {
    color: #b4beb7;

    font-size: .76rem;
}


.join-actions {
    margin-top: 18px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


/* ======================================================
   TICKER
====================================================== */

.ticker {
    overflow: hidden;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.012);
}


.ticker > div {
    min-width: max-content;

    padding: 19px 35px;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 25px;

    color: #526159;

    font-size: .57rem;
    font-weight: 900;
    letter-spacing: 2.8px;
}


.ticker i {
    width: 5px;
    height: 5px;

    transform:
        rotate(45deg);

    background:
        var(--green-bright);
}


/* ======================================================
   FEATURES
====================================================== */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;
}


.feature-card {
    position: relative;

    min-height: 285px;

    padding: 27px;

    border:
        1px solid
        var(--border);

    border-radius: 14px;

    cursor: pointer;

    background:
        var(--panel);

    transform-style:
        preserve-3d;

    transition: .25s ease;
}


.feature-card:hover {
    border-color:
        var(--green-border);

    background:
        rgba(7,27,15,.97);

    transform:
        translateY(-3px);
}


.feature-card > span {
    position: absolute;

    right: 20px;
    top: 18px;

    color: #3d4b42;

    font-family: monospace;
    font-size: .58rem;
}


.feature-card > div {
    width: 46px;
    height: 46px;

    margin-bottom: 34px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--green-border);

    border-radius: 10px;

    color:
        var(--green-bright);

    background:
        rgba(49,190,112,.04);
}


.feature-card p {
    color:
        var(--muted);

    font-size: .77rem;
}


.feature-card button {
    position: absolute;

    left: 27px;
    bottom: 22px;

    color: #4c9568;

    background: transparent;

    cursor: pointer;

    font-size: .52rem;
    font-weight: 900;
}


.featured {
    border-color:
        var(--green-border);

    background:
        linear-gradient(
            145deg,
            rgba(2,105,55,.2),
            rgba(5,15,9,.92)
        );
}


/* ======================================================
   REALMS
====================================================== */

.realms-section {
    overflow: hidden;
}


.giant-word,
.classified-word {
    position: absolute;

    left: 50%;
    top: 50%;

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

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(255,255,255,.018);

    pointer-events: none;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;
}


.giant-word {
    font-size:
        clamp(
            10rem,
            25vw,
            28rem
        );
}


.realm-interface {
    display: grid;

    grid-template-columns:
        330px 1fr;

    gap: 14px;
}


.realm-navigation {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.realm-button {
    min-height: 75px;

    padding: 13px 15px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 12px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    color: white;

    background:
        rgba(255,255,255,.018);

    cursor: pointer;

    text-align: left;

    transition: .2s ease;
}


.realm-button:hover,
.realm-button.active {
    transform:
        translateX(4px);

    border-color:
        var(--bright-border);

    background:
        rgba(255,255,255,.045);
}


.realm-button > i {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}


.volcano-dot {
    background: #ff6934;
    box-shadow: 0 0 12px #ff6934;
}

.echo-dot {
    background: #00ddff;
    box-shadow: 0 0 12px #00ddff;
}

.void-dot {
    background: #a854ff;
    box-shadow: 0 0 12px #a854ff;
}

.deepstone-dot {
    background: #4caeff;
    box-shadow: 0 0 12px #4caeff;
}

.cosmic-dot {
    background: #dd67ff;
    box-shadow: 0 0 12px #dd67ff;
}


.realm-button strong {
    display: block;

    font-size: .77rem;
}


.realm-button small {
    color: #536159;

    font-size: .52rem;
}


.realm-button b {
    color: #3e4c43;

    font-family: monospace;
}


.realm-display {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background: #050b07;
}


.realm-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    right: -190px;
    top: -190px;

    border-radius: 50%;

    filter: blur(125px);

    opacity: .16;
}


.volcano-theme .realm-glow {
    background: #ff5b22;
}

.echo-theme .realm-glow {
    background: #00ddff;
}

.void-theme .realm-glow {
    background: #963fff;
}

.deepstone-theme .realm-glow {
    background: #45aaff;
}

.cosmic-theme .realm-glow {
    background: #b54cff;
}


.realm-display header {
    position: relative;

    z-index: 2;

    padding: 21px 25px;

    display: flex;
    justify-content: space-between;

    border-bottom:
        1px solid
        var(--border);

    color: #536159;

    font-family: monospace;
    font-size: .54rem;
}


.realm-main {
    position: relative;

    z-index: 2;

    padding: 48px;

    display: grid;

    grid-template-columns:
        1fr 220px;

    align-items: center;

    gap: 45px;
}


.realm-main h3 {
    margin-bottom: 14px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            3rem,
            5vw,
            5rem
        );

    line-height: .92;
    letter-spacing: -4px;
}


.realm-main p:last-child {
    color:
        var(--muted);

    white-space: pre-line;
}


.realm-sigil {
    position: relative;

    width: 190px;
    height: 190px;

    display: grid;
    place-items: center;
}


.realm-sigil i {
    position: absolute;

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

    border-radius: 50%;
}


.realm-sigil i:first-child {
    inset: 0;

    animation:
        rotate
        14s linear infinite;
}


.realm-sigil i:nth-child(2) {
    inset: 28px;

    border-style: dashed;

    animation:
        reverseRotate
        10s linear infinite;
}


.realm-sigil strong {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    font-size: 1.8rem;
}


.realm-stat-grid {
    position: relative;

    z-index: 2;

    margin:
        0 48px 25px;

    display: grid;

    grid-template-columns:
        1.5fr .8fr .6fr;

    gap: 8px;
}


.realm-stat-grid div,
.image-slot {
    padding: 15px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background:
        rgba(255,255,255,.017);
}


.realm-stat-grid span {
    display: block;

    color: #445149;

    font-size: .48rem;
    font-weight: 900;
}


.realm-stat-grid strong {
    color: #adb9b1;

    font-size: .67rem;
}


.image-slot {
    position: relative;

    z-index: 2;

    min-height: 145px;

    margin:
        0 48px 48px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-style: dashed;
}


.image-slot span {
    color: #5b6b61;

    font-size: .52rem;
    font-weight: 900;
    letter-spacing: 2px;
}


.image-slot p {
    color: #414e46;

    font-size: .64rem;
}


/* ======================================================
   RIFT GAME
====================================================== */

.rift-game,
.memory-game {
    margin-top: 30px;

    padding: 38px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 50px;

    align-items: center;
}


.rift-game h3,
.memory-game h3,
.quiz-panel h3 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 2rem;
}


.rift-game p,
.memory-game p {
    margin-top: 10px;

    color:
        var(--muted);
}


.rift-console {
    text-align: center;
}


.rift-core {
    width: 120px;
    height: 120px;

    margin:
        0 auto 18px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    color: #8753b1;

    background:
        rgba(130,65,185,.07);

    font-size: 2.6rem;

    transition: .2s ease;
}


.rift-core.ready {
    color: #a5f7c4;

    border-color:
        rgba(49,190,112,.5);

    background:
        rgba(49,190,112,.18);

    box-shadow:
        0 0 80px
        rgba(49,190,112,.35);
}


.rift-core.armed {
    animation:
        unstable
        .4s infinite alternate;
}


.rift-console > strong {
    display: block;

    margin-bottom: 15px;

    color: #68776e;

    font-size: .58rem;
    letter-spacing: 1.5px;
}


.rift-console > span {
    display: block;

    margin-top: 12px;

    color:
        var(--green-light);
}


/* ======================================================
   MOBS
====================================================== */

.mob-filter {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 24px;
}


.filter-button,
.tool {
    padding: 8px 12px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    color: #69786f;

    background:
        rgba(255,255,255,.018);

    cursor: pointer;

    font-size: .54rem;
    font-weight: 850;
}


.filter-button.active,
.tool.active {
    color:
        var(--green-light);

    border-color:
        var(--green-border);

    background:
        rgba(2,105,55,.12);
}


.mob-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 11px;
}


.mob-card {
    padding: 25px;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background:
        var(--panel);
}


.mob-card.hidden {
    display: none;
}


.mob-card small {
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: 1.4px;
}


.mob-card h3 {
    margin:
        6px 0 12px;
}


.mob-card .mob-stats {
    display: flex;

    gap: 7px;

    margin-bottom: 12px;
}


.mob-card .mob-stats span {
    padding: 4px 8px;

    border-radius: 5px;

    background:
        rgba(255,255,255,.035);

    color: #aab5ae;

    font-size: .62rem;
}


.mob-card p {
    color:
        var(--muted);

    font-size: .76rem;
}


.volcano-text {color:#ff7a40}
.echo-text {color:#00e1ff}
.void-text {color:#be75ff}
.deepstone-text {color:#61baff}
.cosmic-text {color:#ec84ff}


.quiz-panel {
    margin-top: 28px;

    padding: 32px;
}


.quiz-options {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 7px;
}


.quiz-option {
    padding: 12px;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    color: #a8b5ac;

    background:
        rgba(255,255,255,.018);

    cursor: pointer;

    text-align: left;
}


.quiz-option:hover {
    border-color:
        var(--green-border);
}


.quiz-option.correct {
    color: #b0f7ca;

    border-color:
        rgba(49,190,112,.42);

    background:
        rgba(49,190,112,.1);
}


.quiz-option.wrong {
    color: #efaaaa;

    border-color:
        rgba(230,90,90,.3);

    background:
        rgba(230,90,90,.08);
}


.quiz-result {
    min-height: 20px;

    color:
        var(--green-light);

    font-size: .67rem;
}


/* ======================================================
   PROGRESSION
====================================================== */

.progression-layout {
    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 14px;
}


.database-panel {
    padding: 28px;

    border:
        1px solid
        var(--border);

    border-radius: 14px;

    background:
        var(--panel);
}


.panel-heading {
    display: flex;
    justify-content: space-between;

    margin-bottom: 24px;
}


.panel-heading span {
    color: #506057;

    font-size: .52rem;
    font-weight: 900;
    letter-spacing: 1.7px;
}


.panel-heading strong {
    color: #3e4b43;

    font-size: 1.7rem;
}


.materials-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 8px;
}


.materials-grid > div {
    min-height: 100px;

    padding: 14px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background:
        rgba(255,255,255,.016);
}


.materials-grid small,
.armor-list small {
    width: max-content;

    padding: 3px 6px;

    border-radius: 4px;

    font-size: .47rem;
    font-weight: 900;
}


.common {
    color: #ddd;
    background: rgba(220,220,220,.08);
}

.rare {
    color: #55aaff;
    background: rgba(85,170,255,.1);
}

.epic {
    color: #c16aff;
    background: rgba(193,106,255,.1);
}

.legendary {
    color: #ffa142;
    background: rgba(255,161,66,.1);
}

.mythic {
    color: #ff5878;
    background: rgba(255,88,120,.1);
}


.weapon-list {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 7px;

    margin-bottom: 20px;
}


.weapon-list span {
    padding: 10px;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    color: #aeb9b1;

    font-size: .67rem;
}


.armor-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.armor-list div {
    padding: 14px;

    display: flex;
    justify-content: space-between;

    border:
        1px solid
        var(--border);

    border-radius: 7px;
}


.echo-armor {
    border-left:
        3px solid #00dfff
        !important;
}

.reinforced-armor {
    border-left:
        3px solid #ff833d
        !important;
}

.astral-armor {
    border-left:
        3px solid #a754ff
        !important;
}


/* ======================================================
   MEMORY GAME
====================================================== */

.memory-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 8px;
}


.memory-card {
    position: relative;

    min-height: 95px;

    perspective: 700px;

    cursor: pointer;
}


.memory-card-inner {
    position: absolute;
    inset: 0;

    transform-style:
        preserve-3d;

    transition:
        transform .35s ease;
}


.memory-card.flipped
.memory-card-inner,
.memory-card.matched
.memory-card-inner {
    transform:
        rotateY(180deg);
}


.memory-front,
.memory-back {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    backface-visibility: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 8px;
}


.memory-front {
    color: #31523f;

    background:
        rgba(255,255,255,.018);

    font-size: 1.3rem;
}


.memory-back {
    padding: 8px;

    transform:
        rotateY(180deg);

    color:
        var(--green-light);

    background:
        rgba(2,105,55,.14);

    text-align: center;

    font-size: .58rem;
    font-weight: 800;
}


.memory-card.matched
.memory-back {
    border-color:
        rgba(49,190,112,.45);

    box-shadow:
        inset 0 0 30px
        rgba(49,190,112,.09);
}


.memory-result {
    display: block;

    margin-top: 12px;

    color:
        var(--green-light);
}


/* ======================================================
   COMMANDS
====================================================== */

.command-section {
    background:
        radial-gradient(
            circle at center,
            rgba(2,105,55,.09),
            transparent 55%
        );
}


.command-terminal {
    overflow: hidden;

    border:
        1px solid
        var(--green-border);

    border-radius: 16px;

    background:
        rgba(2,9,5,.94);

    box-shadow:
        var(--shadow);
}


.command-terminal > header {
    min-height: 48px;

    padding: 0 17px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.018);
}


.terminal-lights {
    display: flex;

    gap: 5px;
}


.terminal-lights i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #28402f;
}


.terminal-lights i:first-child {
    background: #512828;
}

.terminal-lights i:nth-child(2) {
    background: #534923;
}

.terminal-lights i:nth-child(3) {
    background: #1d5833;
}


.command-terminal > header strong,
.command-terminal > header > span {
    color: #66756c;

    font-family: monospace;
    font-size: .55rem;
}


.command-terminal > header > span {
    justify-self: end;
}


.command-search {
    margin: 22px;

    min-height: 52px;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background:
        rgba(255,255,255,.018);
}


.command-search span {
    color:
        var(--green-bright);
}


.command-search input {
    flex: 1;

    min-width: 0;

    color: white;

    border: 0;

    background: transparent;
}


.command-search kbd {
    padding: 4px 7px;

    border:
        1px solid
        var(--border);

    border-radius: 4px;

    color: #536159;
}


.command-categories {
    padding:
        0 22px 14px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    border-bottom:
        1px solid
        var(--border);
}


.command-category {
    padding: 6px 10px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    color: #68776e;

    background: transparent;

    cursor: pointer;

    font-size: .52rem;
    font-weight: 800;
}


.command-category.active {
    color:
        var(--green-light);

    border-color:
        var(--green-border);

    background:
        rgba(2,105,55,.11);
}


.command-results {
    padding:
        10px 22px 22px;
}


.command-row {
    min-height: 66px;

    padding: 12px 14px;

    display: grid;

    grid-template-columns:
        minmax(185px,.75fr)
        1fr auto;

    align-items: center;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

    cursor: pointer;
}


.command-row:hover {
    background:
        rgba(49,190,112,.035);
}


.command-row code {
    color:
        var(--green-light);

    font-size: .72rem;
}


.command-row p {
    color: #7d8c83;

    font-size: .68rem;
}


.command-row span {
    color: #445149;

    font-size: .5rem;
    font-weight: 900;
}


.command-challenge {
    position: relative;

    padding: 30px;

    border-top:
        1px solid
        var(--green-border);

    background:
        rgba(2,105,55,.055);
}


.command-challenge > p {
    color:
        var(--muted);

    font-size: .77rem;
}


/* ======================================================
   WORKERS
====================================================== */

.worker-heading {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap: 50px;
}


.worker-heading h2 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            3rem,
            6vw,
            5.7rem
        );

    line-height: .93;
    letter-spacing: -4px;
}


.application-status {
    padding: 13px 16px;

    display: flex;
    align-items: center;

    gap: 10px;

    border:
        1px solid
        var(--green-border);

    border-radius: 9px;

    background:
        rgba(49,190,112,.035);
}


.application-status > i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--green-bright);

    box-shadow:
        0 0 13px
        var(--green-bright);
}


.application-status.closed {
    border-color:
        rgba(210,75,75,.2);

    background:
        rgba(210,75,75,.04);
}


.application-status.closed > i {
    background: #d65353;

    box-shadow:
        0 0 12px #d65353;
}


.application-status small {
    display: block;

    color: #526158;

    font-size: .46rem;
    font-weight: 900;
}


.application-status strong {
    color:
        var(--green-light);

    font-size: .65rem;
}


.application-status.closed strong {
    color: #e79c9c;
}


.worker-intro {
    max-width: 770px;

    margin:
        30px 0 50px;

    color:
        var(--muted);
}


.worker-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 11px;
}


.worker-card {
    min-height: 300px;

    padding: 27px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        var(--border);

    border-radius: 13px;

    background:
        var(--panel);
}


.worker-card > div {
    width: 44px;
    height: 44px;

    margin-bottom: 28px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--green-border);

    border-radius: 10px;

    color:
        var(--green-bright);
}


.worker-card small {
    color: #4d5d53;

    font-size: .49rem;
    font-weight: 900;
}


.worker-card h3 {
    margin:
        5px 0 8px;
}


.worker-card p {
    color:
        var(--muted);

    font-size: .75rem;
}


.worker-card
.worker-apply-button {
    margin-top: auto;

    padding-top: 25px;

    color: #4c9568;

    background: transparent;

    cursor: pointer;

    text-align: left;

    font-size: .52rem;
    font-weight: 900;
}


.worker-card
.worker-apply-button:disabled {
    color: #525852;

    cursor: not-allowed;
}


.final-worker {
    justify-content:
        space-between;

    border-color:
        var(--green-border);

    background:
        linear-gradient(
            145deg,
            rgba(2,105,55,.17),
            rgba(5,16,9,.91)
        );
}


.final-worker img {
    width: 74px;
}


/* ======================================================
   SUPPORT
====================================================== */

.support-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 11px;
}


.support-card {
    min-height: 270px;

    padding: 27px;

    border:
        1px solid
        var(--border);

    border-radius: 13px;

    background:
        var(--panel);
}


.support-card > div {
    width: 44px;
    height: 44px;

    margin-bottom: 28px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--green-border);

    border-radius: 10px;

    color:
        var(--green-bright);
}


.support-card p {
    color:
        var(--muted);

    font-size: .75rem;
}


.support-card > button {
    margin-top: 28px;

    color: #4e976a;

    background: transparent;

    cursor: pointer;

    font-size: .52rem;
    font-weight: 900;
}


.discord-card {
    display: flex;
    flex-direction: column;

    border-color:
        var(--green-border);
}


.discord-card img {
    width: 65px;

    margin-bottom: 25px;
}


.discord-card small {
    color:
        var(--green-bright);

    font-size: .5rem;
    font-weight: 900;
}


/* ======================================================
   DRAWING GAME
====================================================== */

.logo-game-section {
    background:
        radial-gradient(
            circle,
            rgba(2,105,55,.1),
            transparent 55%
        );
}


.logo-game {
    padding: 55px;

    display: grid;

    grid-template-columns:
        .8fr 1fr;

    gap: 60px;

    align-items: center;
}


.logo-game h2 {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.7rem
        );

    line-height: .95;
    letter-spacing: -3px;
}


.logo-game p {
    margin-top: 20px;

    color:
        var(--muted);
}


.drawing-tools {
    margin-top: 25px;

    display: flex;

    gap: 7px;
}


.brush-control {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    color: #68776e;

    font-size: .63rem;
}


.brush-control input {
    max-width: 230px;

    accent-color:
        var(--green);
}


.canvas-frame {
    position: relative;

    width:
        min(100%,430px);

    margin:
        auto auto 12px;

    padding: 5px;

    border:
        1px solid
        var(--bright-border);

    border-radius: 14px;

    background: white;
}


.canvas-frame canvas {
    width: 100%;
    height: auto;

    display: block;

    touch-action: none;

    border-radius: 9px;

    cursor: crosshair;
}


.canvas-frame span {
    position: absolute;

    right: 9px;
    bottom: 7px;

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

    font-size: .48rem;
}


.logo-result {
    display: none;

    margin-top: 18px;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


.logo-result.show {
    display: grid;
}


.logo-result > div {
    padding: 12px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;
}


.logo-result span {
    display: block;

    margin-bottom: 8px;

    color: #5e6d64;

    font-size: .49rem;
    font-weight: 900;
}


.logo-result canvas,
.logo-result img {
    width: 100%;

    aspect-ratio: 1;

    object-fit: contain;

    background: white;

    border-radius: 6px;
}


.logo-result > strong {
    grid-column: 1/-1;

    padding: 14px;

    border:
        1px solid
        var(--green-border);

    border-radius: 8px;

    color:
        var(--green-light);

    text-align: center;
}


/* ======================================================
   LORE
====================================================== */

.lore-section {
    min-height: 830px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            rgba(2,105,55,.1),
            transparent 60%
        );
}


.classified-word {
    font-size:
        clamp(
            8rem,
            20vw,
            20rem
        );
}


.lore-content {
    position: relative;

    z-index: 2;

    max-width: 780px;

    margin: auto;

    text-align: center;
}


.lore-content > img {
    width: 75px;

    margin-bottom: 18px;

    opacity: .7;
}


.lore-content > span {
    color:
        var(--green-bright);

    font-size: .54rem;
    font-weight: 900;
    letter-spacing: 2.5px;
}


.lore-content h2 {
    margin-top: 18px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            3.5rem,
            7vw,
            6.4rem
        );

    line-height: .9;
    letter-spacing: -5px;
}


.lore-content > i {
    width: 1px;
    height: 90px;

    display: block;

    margin: 30px auto;

    background:
        linear-gradient(
            var(--green-bright),
            transparent
        );
}


.lore-content > p {
    margin-bottom: 17px;

    color:
        var(--muted);
}


.lore-content > strong {
    display: block;

    margin: 30px 0;
}


.classified-message {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition: .45s ease;
}


.classified-message.open {
    max-height: 250px;

    margin-top: 30px;

    padding: 22px;

    opacity: 1;

    border:
        1px solid
        var(--green-border);

    border-radius: 8px;
}


.classified-message span {
    color:
        var(--green-bright);

    font-size: .5rem;
    font-weight: 900;
}


.classified-message p {
    white-space: pre-line;

    color: #65746b;

    font-family: monospace;
}


/* ======================================================
   FINAL
====================================================== */

.final-section {
    position: relative;

    min-height: 720px;

    padding: 110px 6%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    text-align: center;
}


.final-energy {
    position: absolute;

    width: 750px;
    height: 750px;

    border-radius: 50%;

    background:
        var(--green);

    filter: blur(190px);

    opacity: .1;
}


.final-content {
    position: relative;

    z-index: 2;

    width:
        min(900px,100%);
}


.final-content > img {
    width: 85px;

    margin-bottom: 18px;
}


.final-content > span {
    color:
        var(--green-bright);

    font-size: .54rem;
    font-weight: 900;
    letter-spacing: 2.5px;
}


.final-content h2 {
    margin:
        18px 0 25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            4rem,
            8vw,
            7.5rem
        );

    line-height: .85;
    letter-spacing: -6px;
}


.final-content > p {
    color:
        var(--muted);
}


.final-connect {
    margin-top: 38px;

    padding: 9px;

    display: grid;

    grid-template-columns:
        1fr .6fr auto;

    gap: 8px;

    border:
        1px solid
        var(--green-border);

    border-radius: 11px;

    background:
        rgba(4,15,8,.77);
}


.final-connect > div {
    padding: 9px 13px;

    text-align: left;
}


.final-connect span {
    display: block;

    color: #49574e;

    font-size: .48rem;
    font-weight: 900;
}


.final-connect strong {
    font-size: .76rem;
}


/* ======================================================
   RANDOM SIGNAL
====================================================== */

.signal-box {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 40000;

    width:
        min(370px,calc(100vw - 40px));

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(25px);

    border:
        1px solid
        var(--green-border);

    border-radius: 12px;

    background:
        rgba(3,15,8,.97);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.55);

    transition: .35s ease;
}


.signal-box.open {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


.signal-box header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 15px;

    color: #718178;

    font-size: .51rem;
    font-weight: 900;
}


.signal-box header div {
    display: flex;
    align-items: center;

    gap: 8px;
}


.signal-box header i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green-bright);

    box-shadow:
        0 0 12px
        var(--green-bright);
}


.signal-box header button {
    color: #718178;

    background: transparent;

    cursor: pointer;
}


.signal-box > span {
    color:
        var(--green-bright);

    font-size: .48rem;
    font-weight: 900;
}


.signal-box > p {
    margin:
        8px 0 14px;

    color: #a6b3aa;

    font-size: .75rem;
}


.signal-options {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 6px;
}


.signal-options button {
    padding: 9px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    color: #7e8e83;

    background:
        rgba(255,255,255,.018);

    cursor: pointer;

    font-size: .6rem;
}


.signal-box > strong {
    display: block;

    margin-top: 12px;

    color:
        var(--green-light);

    font-size: .63rem;
}


/* ======================================================
   SECRET FRAGMENTS
====================================================== */

.secret-fragment {
    position: absolute;

    z-index: 5;

    color: #174d2f;

    background: transparent;

    cursor: pointer;

    opacity: .35;

    text-shadow:
        0 0 12px
        rgba(49,190,112,.5);

    animation:
        fragment
        2.4s ease-in-out infinite;
}


.secret-fragment:hover {
    color:
        var(--green-bright);

    opacity: 1;
}


.secret-fragment.found {
    display: none;
}


.fragment-one {
    right: 15px;
    bottom: 15px;
}


.fragment-two {
    right: 19px;
    bottom: 17px;
}


.fragment-three {
    right: 19px;
    bottom: 16px;
}


.fragment-hud {
    position: fixed;

    left: 22px;
    bottom: 22px;

    z-index: 39000;

    display: none;

    padding: 10px 13px;

    border:
        1px solid
        var(--green-border);

    border-radius: 7px;

    background:
        rgba(2,13,7,.93);
}


.fragment-hud.show {
    display: block;
}


.fragment-hud span {
    display: block;

    color: #536259;

    font-size: .45rem;
    font-weight: 900;
}


.fragment-hud strong {
    color:
        var(--green-light);

    font-size: .67rem;
}


/* ======================================================
   OVERLAYS
====================================================== */

.overlay {
    position: fixed;
    inset: 0;

    z-index: 50000;

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;

    background: #010403;

    transition: .3s ease;
}


.overlay.open {
    opacity: 1;
    visibility: visible;
}


.overlay-close {
    position: fixed;

    right: 25px;
    top: 22px;

    z-index: 51000;

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    color: white;

    background:
        rgba(255,255,255,.04);

    cursor: pointer;

    font-size: 1.4rem;
}


/* ======================================================
   DOCUMENTARY
====================================================== */

.documentary-layout {
    width:
        min(1280px,92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        250px 1fr;

    gap: 70px;
}


.documentary-layout aside {
    position: sticky;

    top: 0;

    height: 100vh;

    padding:
        100px 0 35px;

    display: flex;
    flex-direction: column;

    border-right:
        1px solid
        var(--border);
}


.documentary-layout aside > span {
    color: #4b5950;

    font-size: .51rem;
    font-weight: 900;
}


.documentary-layout aside h3 {
    margin:
        8px 20px 30px 0;
}


#documentaryChapters {
    display: flex;
    flex-direction: column;
}


#documentaryChapters button,
#documentarySidebarBack {
    padding:
        9px 12px 9px 0;

    color: #64736a;

    background: transparent;

    cursor: pointer;

    text-align: left;

    font-size: .65rem;
}


#documentarySidebarBack {
    margin-top: auto;
}


.documentary-layout article {
    padding:
        120px 0 100px;
}


.documentary-layout article > header {
    max-width: 830px;

    padding-bottom: 70px;

    border-bottom:
        1px solid
        var(--border);
}


.documentary-layout article > header span {
    color:
        var(--green-bright);

    font-size: .57rem;
    font-weight: 900;
}


.documentary-layout article > header h2 {
    margin:
        16px 0 26px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            4rem,
            8vw,
            7.4rem
        );

    line-height: .86;
    letter-spacing: -6px;
}


.documentary-layout article > header p {
    color:
        var(--muted);

    white-space: pre-line;
}


.documentary-chapter {
    max-width: 830px;

    padding: 70px 0;

    border-bottom:
        1px solid
        var(--border);
}


.documentary-chapter > span {
    color: #46544b;

    font-size: .49rem;
    font-weight: 900;
}


.documentary-chapter h3 {
    margin: 15px 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 2rem;
}


.documentary-chapter p {
    color: #8b9990;

    white-space: pre-line;

    line-height: 1.9;
}


.documentary-image {
    max-width: 830px;
    min-height: 400px;

    margin-top: 70px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border:
        1px dashed
        var(--green-border);

    border-radius: 14px;
}


.documentary-image strong {
    color:
        var(--green-bright);

    font-size: .52rem;
}


.documentary-image p {
    color: #46534b;

    font-size: .64rem;
}


.documentary-layout footer {
    max-width: 830px;

    margin-top: 50px;

    display: flex;
    justify-content: space-between;

    align-items: center;

    gap: 20px;
}


/* ======================================================
   CINEMATIC
====================================================== */

.cinematic-overlay,
.vault-overlay {
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            #062114,
            #010302 67%
        );
}


.cinematic-gate {
    position: absolute;

    width:
        min(720px,75vw);

    aspect-ratio: 1;
}


.cinematic-gate i {
    position: absolute;

    border:
        1px solid
        rgba(49,190,112,.11);

    border-radius: 50%;
}


.cinematic-gate i:first-child {
    inset: 0;

    animation:
        rotate
        30s linear infinite;
}


.cinematic-gate i:nth-child(2) {
    inset: 14%;

    border-style: dashed;

    animation:
        reverseRotate
        22s linear infinite;
}


.cinematic-gate i:nth-child(3) {
    inset: 30%;

    animation:
        pulse
        4s ease-in-out infinite;
}


.cinematic-gate img {
    position: absolute;

    width: 100px;

    left: 50%;
    top: 50%;

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

    opacity: .12;
}


.cinematic-content {
    position: relative;

    z-index: 3;

    width:
        min(900px,90%);

    text-align: center;
}


.cinematic-content > span {
    color:
        var(--green-bright);

    font-size: .52rem;
    font-weight: 900;
}


.cinematic-content h2 {
    margin:
        18px 0 25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            4rem,
            9vw,
            8rem
        );

    line-height: .85;
    letter-spacing: -7px;
}


.cinematic-content p {
    margin:
        0 auto 35px;

    max-width: 620px;

    color:
        var(--muted);
}


/* ======================================================
   FORMS
====================================================== */

.form-overlay {
    padding:
        100px 5%;
}


.form-modal {
    width:
        min(820px,100%);

    margin: auto;

    padding: 40px;

    border:
        1px solid
        var(--green-border);

    border-radius: 17px;

    background:
        rgba(5,17,9,.98);

    box-shadow:
        var(--shadow);
}


.form-modal > header {
    margin-bottom: 28px;
    padding-bottom: 28px;

    border-bottom:
        1px solid
        var(--border);
}


.form-modal > header > span {
    color:
        var(--green-bright);

    font-size: .52rem;
    font-weight: 900;
}


.form-modal h2 {
    margin:
        7px 0 10px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 3rem;
}


.form-modal header p {
    color:
        var(--muted);
}


.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 13px;
}


.form-modal label {
    display: block;

    margin-bottom: 14px;

    color: #78877d;

    font-size: .65rem;
    font-weight: 700;
}


.form-modal input,
.form-modal textarea,
.form-modal select {
    width: 100%;

    margin-top: 7px;
    padding: 13px 14px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    color: white;

    background:
        rgba(255,255,255,.025);

    resize: vertical;
}


.form-modal input:focus,
.form-modal textarea:focus,
.form-modal select:focus {
    border-color:
        var(--green-border);
}


.form-modal select option {
    background: #07130c;
}


/* ======================================================
   COMMAND PALETTE
====================================================== */

.command-palette-overlay {
    position: fixed;
    inset: 0;

    z-index: 80000;

    padding-top: 12vh;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    opacity: 0;
    visibility: hidden;

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

    backdrop-filter:
        blur(9px);

    transition: .2s ease;
}


.command-palette-overlay.open {
    opacity: 1;
    visibility: visible;
}


.command-palette {
    width:
        min(680px,90%);

    max-height: 70vh;

    overflow: hidden;

    border:
        1px solid
        var(--green-border);

    border-radius: 13px;

    background: #051009;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.62);
}


.palette-search {
    min-height: 60px;

    padding: 0 17px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid
        var(--border);
}


.palette-search span {
    color:
        var(--green-bright);
}


.palette-search input {
    flex: 1;

    color: white;

    background: transparent;

    border: 0;
}


.palette-results {
    max-height: 55vh;

    padding: 8px;

    overflow-y: auto;
}


.palette-item {
    padding: 12px;

    display: grid;

    grid-template-columns:
        minmax(180px,.7fr)
        1fr;

    gap: 15px;

    border-radius: 7px;

    cursor: pointer;
}


.palette-item:hover {
    background:
        rgba(49,190,112,.05);
}


.palette-item code {
    color:
        var(--green-light);
}


.palette-item span {
    color: #718077;

    font-size: .64rem;
}


/* ======================================================
   VAULT
====================================================== */

.vault-content {
    width:
        min(650px,90%);

    text-align: center;
}


.vault-content > div {
    width: 95px;
    height: 95px;

    margin:
        0 auto 24px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--green-border);

    border-radius: 50%;

    color:
        var(--green-bright);

    font-size: 2.2rem;
}


.vault-content > span {
    color:
        var(--green-bright);

    font-size: .55rem;
    font-weight: 900;
}


.vault-content h2 {
    margin:
        15px 0 20px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    line-height: .9;
    letter-spacing: -4px;
}


.vault-content p {
    color:
        var(--muted);
}


.vault-content > strong {
    display: block;

    margin-top: 30px;

    color:
        var(--green-light);

    font-family: monospace;
}


/* ======================================================
   TOAST ETC
====================================================== */

.toast {
    position: fixed;

    left: 50%;
    bottom: 25px;

    z-index: 99999;

    padding: 11px 16px;

    opacity: 0;

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

    border:
        1px solid
        var(--green-border);

    border-radius: 7px;

    color:
        var(--green-light);

    background:
        rgba(4,18,9,.97);

    pointer-events: none;

    transition: .25s ease;
}


.toast.show {
    opacity: 1;

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


.back-top {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9000;

    width: 42px;
    height: 42px;

    opacity: 0;
    visibility: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    color: white;

    background:
        rgba(4,15,8,.9);

    cursor: pointer;
}


.back-top.visible {
    opacity: 1;
    visibility: visible;
}


footer {
    padding: 45px 5%;

    border-top:
        1px solid
        var(--border);

    color: #55635b;
}


.footer-main {
    padding-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;
}


.footer-brand {
    display: flex;
    align-items: center;

    gap: 9px;

    color: white;
}


.footer-brand img {
    width: 38px;
}


footer > small {
    font-size: .57rem;
}


/* ======================================================
   REVEAL
====================================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


.intro {
    opacity: 0;

    transform:
        translateY(20px);

    animation:
        intro
        .8s ease forwards;
}


/* ======================================================
   ANIMATION
====================================================== */

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}


@keyframes reverseRotate {
    to {
        transform: rotate(-360deg);
    }
}


@keyframes pulse {
    50% {
        transform: scale(1.06);
        opacity: .45;
    }
}


@keyframes textFlow {
    to {
        background-position:
            230% center;
    }
}


@keyframes scanner {
    to {
        transform:
            translateY(850px);
    }
}


@keyframes unstable {
    from {
        transform: scale(.96);
    }

    to {
        transform: scale(1.04);
    }
}


@keyframes gridTravel {
    to {
        background-position:
            0 140px;
    }
}


@keyframes auroraMove {
    from {
        transform:
            translate(-5%,-5%)
            scale(.9);
    }

    to {
        transform:
            translate(8%,8%)
            scale(1.15);
    }
}


@keyframes floatLogo {
    from {
        transform:
            translateY(-20px)
            rotate(-4deg);
    }

    to {
        transform:
            translateY(30px)
            rotate(4deg);
    }
}


@keyframes fragment {
    50% {
        opacity: .9;
    }
}


@keyframes intro {
    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width:1100px) {

    .nav-links {
        display: none;
    }


    .mobile-menu {
        display: block;
    }


    .nav-links.open {
        position: absolute;

        top: var(--nav);
        left: 0;

        width: 100%;

        padding: 25px 5%;

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

        background:
            rgba(1,4,2,.98);

        border-bottom:
            1px solid
            var(--border);
    }


    .feature-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .realm-interface {
        grid-template-columns: 1fr;
    }


    .realm-navigation {
        display: grid;

        grid-template-columns:
            repeat(2,1fr);
    }


    .progression-layout {
        grid-template-columns: 1fr;
    }


    .worker-grid,
    .support-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .documentary-layout {
        grid-template-columns: 1fr;
    }


    .documentary-layout aside {
        display: none;
    }

}


@media (max-width:760px) {

    :root {
        --nav: 68px;
    }


    .command-shortcut {
        display: none;
    }


    .hero h1 {
        font-size:
            clamp(
                3.4rem,
                16vw,
                5.7rem
            );

        letter-spacing: -4px;
    }


    .hero-data {
        grid-template-columns:
            repeat(2,1fr);
    }


    .hero-coordinate {
        display: none;
    }


    .shell {
        padding: 90px 0;
    }


    .wide-heading,
    .community-layout,
    .rift-game,
    .memory-game,
    .logo-game {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .connection-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .feature-grid,
    .realm-navigation,
    .mob-grid,
    .worker-grid,
    .support-grid {
        grid-template-columns: 1fr;
    }


    .realm-main {
        padding: 30px 22px;

        grid-template-columns: 1fr;
    }


    .realm-stat-grid {
        margin:
            0 22px 20px;

        grid-template-columns: 1fr;
    }


    .image-slot {
        margin:
            0 22px 30px;
    }


    .command-row {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .quiz-options {
        grid-template-columns: 1fr;
    }


    .worker-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    .memory-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .form-grid {
        grid-template-columns: 1fr;
    }


    .final-connect {
        grid-template-columns: 1fr;
    }


    .footer-main {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width:480px) {

    .nav-join {
        display: none;
    }


    .hero-buttons {
        flex-direction: column;
    }


    .hero-buttons .button {
        width: 100%;
    }


    .hero-data,
    .connection-grid,
    .materials-grid,
    .weapon-list {
        grid-template-columns: 1fr;
    }


    .guess-form {
        grid-template-columns: 1fr;
    }


    .logo-result.show {
        grid-template-columns: 1fr;
    }


    .signal-options {
        grid-template-columns: 1fr;
    }

}


/* ======================================================
   SABIS UPDATE // LOGO REFINEMENT + FIELD TRIALS + NEXUS ARCHIVE
====================================================== */

/* Clean circular crop for the small navbar emblem. The source image
   contains white canvas around the green crest, so the frame zooms
   into the actual circle without changing the original file. */
.brand-logo-frame {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid rgba(49,190,112,.26);
    border-radius: 50%;
    background: #026937;
    box-shadow:
        0 0 0 4px rgba(2,105,55,.10),
        0 0 24px rgba(49,190,112,.16);
}

.brand-logo-frame::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    pointer-events: none;
}

.brand-logo-frame img {
    width: 64px !important;
    height: 64px !important;
    max-width: none;
    object-fit: contain;
    transform: scale(1.06);
    border-radius: 0 !important;
}

/* The lore emblem gets the same clean crop without affecting every
   other decorative SABIS image on the page. */
.lore-emblem-shell {
    width: 112px;
    height: 112px;
    overflow: hidden;
    display: grid;
    place-items: center;
    margin: 0 auto 26px;
    border: 1px solid rgba(49,190,112,.2);
    border-radius: 50%;
    background: #026937;
    box-shadow: 0 0 70px rgba(49,190,112,.12);
}

.lore-emblem-shell img {
    width: 164px;
    height: 164px;
    max-width: none;
    object-fit: contain;
}

/* ------------------------------------------------------
   FIELD TRIALS
------------------------------------------------------ */

.trials-section {
    overflow: hidden;
    background:
        linear-gradient(180deg, transparent, rgba(2,105,55,.025) 45%, transparent),
        radial-gradient(circle at 15% 30%, rgba(49,190,112,.055), transparent 28%);
}

.trial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.trial-card {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(7,20,11,.92), rgba(2,8,4,.82)),
        rgba(255,255,255,.02);
    box-shadow: 0 25px 80px rgba(0,0,0,.22);
    transition:
        border-color .28s ease,
        box-shadow .28s ease,
        transform .2s ease;
}

.trial-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 75% 15%, rgba(49,190,112,.13), transparent 30%),
        linear-gradient(90deg, transparent, rgba(49,190,112,.025), transparent);
    transition: opacity .3s ease;
    pointer-events: none;
}

.trial-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--green-bright);
    box-shadow: 0 0 20px var(--green-bright);
    transition: width .35s ease;
}

.trial-card:hover {
    border-color: rgba(49,190,112,.28);
    box-shadow: 0 30px 95px rgba(0,0,0,.36), 0 0 40px rgba(49,190,112,.045);
}

.trial-card:hover::before { opacity: 1; }
.trial-card:hover::after { width: 100%; }

.trial-card > span {
    color: #4f6256;
    font-family: monospace;
    font-size: .64rem;
    letter-spacing: 1.5px;
}

.trial-glyph {
    width: 58px;
    height: 58px;
    margin: 35px 0 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(49,190,112,.22);
    border-radius: 14px;
    color: var(--green-light);
    background: rgba(2,105,55,.12);
    box-shadow: inset 0 0 25px rgba(49,190,112,.035);
    font-size: 1.55rem;
}

.trial-card h3 {
    margin-bottom: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.35rem;
    letter-spacing: -.5px;
}

.trial-card p {
    max-width: 540px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: .88rem;
}

.trial-card footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.trial-card footer small {
    color: #56665c;
    font-family: monospace;
    font-size: .61rem;
}

.trial-card footer button {
    cursor: pointer;
    color: var(--green-light);
    background: transparent;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.trial-network-note {
    margin-top: 20px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    border: 1px solid rgba(49,190,112,.12);
    border-radius: 12px;
    background: rgba(2,105,55,.04);
}

.trial-network-note span {
    flex: 0 0 auto;
    color: var(--green-bright);
    font-family: monospace;
    font-size: .62rem;
    letter-spacing: 1.6px;
}

.trial-network-note p {
    color: #65756b;
    font-size: .76rem;
}

/* Trial overlay */
.trial-overlay {
    overflow-y: auto;
    padding: 80px 20px 40px;
    background:
        radial-gradient(circle at 50% 15%, rgba(2,105,55,.18), transparent 35%),
        rgba(1,4,2,.96);
}

.trial-modal {
    width: min(1040px, 94vw);
    min-height: 620px;
    margin: 0 auto;
    padding: 34px;
    border: 1px solid rgba(49,190,112,.18);
    border-radius: 20px;
    background:
        linear-gradient(rgba(49,190,112,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49,190,112,.018) 1px, transparent 1px),
        #030a06;
    background-size: 38px 38px;
    box-shadow: 0 40px 150px rgba(0,0,0,.72);
}

.trial-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.trial-modal-head > div:first-child > span {
    display: block;
    margin-bottom: 8px;
    color: var(--green-bright);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: 2.5px;
}

.trial-modal-head h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: .98;
    letter-spacing: -2px;
}

.trial-modal-head p {
    max-width: 670px;
    margin-top: 12px;
    color: var(--muted);
    font-size: .84rem;
}

.trial-live-badge {
    flex: 0 0 auto;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(49,190,112,.18);
    border-radius: 999px;
    color: #789083;
    background: rgba(2,105,55,.07);
    font-family: monospace;
    font-size: .58rem;
}

.trial-live-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 10px var(--green-bright);
    animation: trialPulse 1.2s ease-in-out infinite;
}

.trial-stage {
    position: relative;
    min-height: 400px;
    margin: 26px 0 18px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(circle at center, rgba(49,190,112,.045), transparent 44%),
        rgba(0,0,0,.32);
}

.trial-status {
    min-height: 46px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #819087;
    background: rgba(255,255,255,.018);
    font-family: monospace;
    font-size: .72rem;
    letter-spacing: .6px;
}

.trial-status[data-tone="good"] {
    color: var(--green-light);
    border-color: rgba(49,190,112,.28);
    background: rgba(49,190,112,.065);
}

.trial-status[data-tone="bad"] {
    color: #ff8b8b;
    border-color: rgba(255,85,85,.24);
    background: rgba(255,85,85,.045);
}

.trial-modal-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* shared game bits */
.trial-readout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
    color: #627168;
    font-family: monospace;
    font-size: .68rem;
}

.trial-readout strong { color: var(--green-light); }

/* Backrooms */
.backrooms-game {
    width: min(820px, 92%);
    text-align: center;
}

.backrooms-room {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    padding: 35px 28px 26px;
    border: 1px solid rgba(211,196,133,.12);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(255,242,172,.025) 1px, transparent 1px),
        linear-gradient(rgba(255,242,172,.025) 1px, transparent 1px),
        #0c0c08;
    background-size: 28px 28px;
    box-shadow: inset 0 0 80px rgba(0,0,0,.58);
}

.backrooms-room::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,245,188,.035), transparent 25%, rgba(0,0,0,.2));
    animation: fluorescentFlicker 4s steps(1) infinite;
}

.backrooms-doors {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.backroom-door {
    position: relative;
    height: 205px;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid #352f20;
    border-radius: 7px 7px 2px 2px;
    color: #93856a;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 30px),
        linear-gradient(110deg, #17140e, #0b0a07);
    box-shadow: inset 0 0 35px rgba(0,0,0,.75), 0 18px 30px rgba(0,0,0,.25);
    font-family: monospace;
    font-size: .76rem;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.backroom-door::before {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #65563a;
    box-shadow: 0 0 8px rgba(255,232,159,.1);
}

.backroom-door:hover:not(:disabled) { transform: translateY(-3px); }
.backroom-door.signal {
    border-color: var(--green-bright);
    box-shadow: inset 0 0 45px rgba(49,190,112,.13), 0 0 28px rgba(49,190,112,.22);
    color: var(--green-light);
}
.backroom-door.wrong {
    border-color: #9a3333;
    box-shadow: inset 0 0 55px rgba(150,0,0,.2), 0 0 35px rgba(255,0,0,.1);
}

.backrooms-entity {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    color: #d8d8d8;
    background: rgba(0,0,0,.82);
    font-family: monospace;
    font-size: clamp(1rem, 5vw, 3rem);
    letter-spacing: 8px;
}

.backrooms-entity.show { animation: entityFlash .52s steps(2) both; }

/* Echo */
.echo-game { width: min(660px, 90%); text-align: center; }
.echo-pads {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 220px));
    justify-content: center;
    gap: 14px;
}
.echo-pad {
    height: 120px;
    cursor: pointer;
    border: 1px solid rgba(49,190,112,.14);
    border-radius: 16px;
    color: #597064;
    background: rgba(2,105,55,.045);
    font-size: 1.3rem;
    transition: .12s ease;
}
.echo-pad.active,
.echo-pad:active {
    color: white;
    border-color: var(--green-bright);
    background: rgba(49,190,112,.2);
    box-shadow: 0 0 35px rgba(49,190,112,.17), inset 0 0 30px rgba(49,190,112,.08);
    transform: scale(.975);
}

/* precision bars */
.precision-game { width: min(760px, 90%); text-align: center; }
.precision-track {
    position: relative;
    height: 78px;
    margin: 28px 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        #020704;
    background-size: 10% 100%;
}
.precision-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--green-bright);
    border-right: 1px solid var(--green-bright);
    background: rgba(49,190,112,.12);
    box-shadow: 0 0 25px rgba(49,190,112,.1);
}
.precision-needle {
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px white;
}
.precision-button { min-width: 180px; }
.precision-pips {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.precision-pips i {
    width: 34px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255,255,255,.08);
}
.precision-pips i.done {
    background: var(--green-bright);
    box-shadow: 0 0 10px rgba(49,190,112,.4);
}

/* void navigation */
.void-game { width: min(850px, 94%); text-align: center; }
.void-canvas-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(49,190,112,.16);
    border-radius: 14px;
    background: #010303;
    box-shadow: inset 0 0 80px rgba(2,105,55,.08);
}
.void-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
}
.void-controls {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 50px);
    justify-content: center;
    gap: 6px;
}
.void-controls button {
    width: 50px;
    height: 42px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--green-light);
    background: rgba(255,255,255,.025);
}
.void-controls .void-up { grid-column: 2; }
.void-controls .void-left { grid-column: 1; grid-row: 2; }
.void-controls .void-down { grid-column: 2; grid-row: 2; }
.void-controls .void-right { grid-column: 3; grid-row: 2; }

/* constellation */
.astral-game { width: min(800px, 92%); text-align: center; }
.constellation-field {
    position: relative;
    height: 330px;
    overflow: hidden;
    border: 1px solid rgba(49,190,112,.11);
    border-radius: 15px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.06) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(49,190,112,.08) 0 1px, transparent 2px),
        #010503;
    background-size: 47px 47px, 69px 69px;
}
.constellation-star {
    position: absolute;
    width: 34px;
    height: 34px;
    cursor: pointer;
    border-radius: 50%;
    color: #8da498;
    background: rgba(255,255,255,.035);
    box-shadow: 0 0 15px rgba(255,255,255,.08);
    font-family: monospace;
    font-size: .65rem;
    transform: translate(-50%,-50%);
    transition: .15s ease;
}
.constellation-star:hover,
.constellation-star.done {
    color: white;
    background: var(--green-bright);
    box-shadow: 0 0 28px rgba(49,190,112,.45);
}
.constellation-line {
    position: absolute;
    z-index: 0;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--green-bright), rgba(49,190,112,.18));
    box-shadow: 0 0 8px rgba(49,190,112,.25);
    pointer-events: none;
}

/* guardian lock */
.guardian-game { width: min(760px, 92%); }
.guardian-locks { display: grid; gap: 12px; }
.guardian-lock {
    display: grid;
    grid-template-columns: 90px 1fr 86px;
    align-items: center;
    gap: 14px;
}
.guardian-lock > span {
    color: #607068;
    font-family: monospace;
    font-size: .65rem;
}
.guardian-track {
    position: relative;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #020704;
}
.guardian-safe {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(49,190,112,.12);
    border-left: 1px solid rgba(49,190,112,.6);
    border-right: 1px solid rgba(49,190,112,.6);
}
.guardian-pointer {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: white;
    box-shadow: 0 0 9px white;
}
.guardian-lock.locked .guardian-track {
    border-color: rgba(49,190,112,.36);
    box-shadow: inset 0 0 25px rgba(49,190,112,.06);
}
.guardian-lock button {
    height: 34px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--green-light);
    background: rgba(2,105,55,.08);
    font-family: monospace;
    font-size: .62rem;
}
.guardian-lock.locked button { opacity: .4; cursor: default; }

/* ender phase */
.ender-game { width: min(760px, 92%); text-align: center; }
.ender-track {
    position: relative;
    height: 120px;
    margin: 28px 0;
    overflow: hidden;
    border: 1px solid rgba(49,190,112,.14);
    border-radius: 12px;
    background:
        linear-gradient(90deg, transparent 49%, rgba(49,190,112,.025) 50%, transparent 51%),
        #010503;
}
.ender-gate {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 2px solid rgba(49,190,112,.8);
    border-right: 2px solid rgba(49,190,112,.8);
    background: rgba(49,190,112,.08);
    box-shadow: 0 0 28px rgba(49,190,112,.09);
}
.ender-probe {
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 2px solid white;
    border-radius: 4px;
    box-shadow: 0 0 16px rgba(255,255,255,.45);
    transform: translate(-50%,-50%) rotate(45deg);
}
.ender-track.phase-success { animation: phaseFlash .28s ease; }

/* gauntlet */
.gauntlet-game { width: min(700px, 90%); text-align: center; }
.gauntlet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.gauntlet-cell {
    position: relative;
    height: 105px;
    cursor: crosshair;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: transparent;
    background: rgba(255,255,255,.018);
    transition: .1s ease;
}
.gauntlet-cell.target {
    color: var(--green-light);
    border-color: rgba(49,190,112,.35);
    background: rgba(49,190,112,.11);
    box-shadow: inset 0 0 35px rgba(49,190,112,.08);
}
.gauntlet-cell.decoy {
    color: #ff7777;
    border-color: rgba(255,70,70,.26);
    background: rgba(120,0,0,.08);
}
.gauntlet-cell.target::after,
.gauntlet-cell.decoy::after {
    content: attr(data-symbol);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
}

/* nexus reconstruction */
.nexus-game { width: min(790px, 92%); text-align: center; }
.nexus-blueprint-grid,
.nexus-rebuild-grid {
    width: min(360px, 88vw);
    margin: 18px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.nexus-cell {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #5f7067;
    background: rgba(255,255,255,.018);
    font-family: monospace;
    font-size: .7rem;
}
.nexus-cell.revealed {
    color: white;
    border-color: rgba(49,190,112,.24);
    background: rgba(49,190,112,.08);
    box-shadow: inset 0 0 20px rgba(49,190,112,.04);
}
.nexus-palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.nexus-palette button {
    min-width: 92px;
    padding: 10px 12px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--green-light);
    background: rgba(2,105,55,.06);
    font-family: monospace;
    font-size: .61rem;
}

/* ------------------------------------------------------
   NEXUS LORE TERMINAL
------------------------------------------------------ */

.lore-content > img { display: none; }

.nexus-terminal {
    width: min(820px, 100%);
    margin: 40px auto 0;
    overflow: hidden;
    border: 1px solid rgba(49,190,112,.19);
    border-radius: 14px;
    background:
        linear-gradient(rgba(49,190,112,.022) 1px, transparent 1px),
        rgba(0,0,0,.28);
    background-size: 100% 26px;
    text-align: left;
    box-shadow: inset 0 0 70px rgba(2,105,55,.04);
}

.nexus-terminal-head {
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(2,105,55,.055);
}

.nexus-terminal-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nexus-terminal-head i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 10px var(--green-bright);
}

.nexus-terminal-head span,
.nexus-terminal-head small {
    color: #738279;
    font-family: monospace;
    font-size: .61rem;
    letter-spacing: 1.2px;
}

.nexus-terminal > p {
    margin: 0 !important;
    padding: 20px 20px 4px;
    color: #718077 !important;
    font-family: monospace;
    font-size: .74rem;
}

#archiveAccessForm {
    padding: 18px 20px 22px;
}

#archiveAccessForm label {
    display: block;
    margin-bottom: 8px;
    color: #53635a;
    font-family: monospace;
    font-size: .6rem;
    letter-spacing: 1.6px;
}

.archive-code-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #010403;
}

.archive-code-row > span {
    color: var(--green-bright);
    text-align: center;
    font-family: monospace;
}

.archive-code-row input {
    min-width: 0;
    height: 48px;
    border: 0;
    color: var(--green-light);
    background: transparent;
    font-family: monospace;
    letter-spacing: 2px;
}

.archive-code-row input::placeholder {
    color: #35443b;
    letter-spacing: 1px;
}

.archive-code-row .button {
    margin: 4px;
    height: 40px;
}

.archive-access-result {
    display: none;
    min-height: 45px;
    margin: 0 20px 20px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #75857b;
    background: rgba(255,255,255,.02);
    font-family: monospace;
    font-size: .68rem;
}

.archive-access-result.show { display: block; }
.archive-access-result.success {
    color: var(--green-light);
    border-color: rgba(49,190,112,.25);
    background: rgba(49,190,112,.055);
}
.archive-access-result.error {
    color: #ff8a8a;
    border-color: rgba(255,70,70,.2);
    background: rgba(120,0,0,.05);
}

.full-lore-archive {
    position: relative;
    width: min(920px, 100%);
    max-height: 0;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px);
    transition:
        max-height 1.1s ease,
        opacity .65s ease,
        transform .65s ease,
        margin .65s ease;
    border: 1px solid transparent;
    border-radius: 16px;
    text-align: left;
}

.full-lore-archive.open {
    max-height: 9000px;
    margin-top: 28px;
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(49,190,112,.2);
    background: rgba(1,6,3,.82);
    box-shadow: 0 35px 100px rgba(0,0,0,.35), inset 0 0 90px rgba(2,105,55,.025);
}

.archive-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 100px;
    pointer-events: none;
    opacity: .16;
    background: linear-gradient(transparent, rgba(49,190,112,.25), transparent);
    animation: archiveScan 4.4s linear infinite;
}

.full-lore-archive > header {
    padding: 28px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(2,105,55,.11), transparent);
}

.full-lore-archive > header span,
.full-lore-archive > header small {
    display: block;
    color: #607168;
    font-family: monospace;
    font-size: .62rem;
    letter-spacing: 1.5px;
}

.full-lore-archive > header strong {
    display: block;
    margin: 7px 0;
    color: var(--green-light);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.8rem);
}

.lore-chapters {
    padding: 8px 28px 0;
}

.lore-chapter {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}

.lore-chapter > span {
    color: var(--green-bright);
    font-family: monospace;
    font-size: .6rem;
    letter-spacing: 1.5px;
}

.lore-chapter h3 {
    margin: 7px 0 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.45rem;
}

.lore-chapter p {
    margin: 0 !important;
    white-space: pre-line;
    color: #8b9990 !important;
    font-size: .86rem;
    line-height: 1.9;
}

.core-blueprint {
    margin: 28px;
    padding: 24px;
    border: 1px solid rgba(49,190,112,.18);
    border-radius: 12px;
    background: rgba(2,105,55,.045);
}

.core-blueprint > span {
    color: var(--green-bright);
    font-family: monospace;
    font-size: .6rem;
    letter-spacing: 1.4px;
}

.core-blueprint h3 {
    margin: 5px 0 18px;
    font-family: "Space Grotesk", sans-serif;
}

.blueprint-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.blueprint-grid div {
    min-height: 82px;
    padding: 12px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: #b8c7bd;
    background: rgba(0,0,0,.28);
    text-align: center;
    font-family: monospace;
    font-size: .65rem;
}

.core-blueprint > strong {
    display: block;
    margin-top: 15px;
    color: var(--green-light);
    font-family: monospace;
    text-align: center;
}

.full-lore-archive > footer {
    padding: 25px 28px 30px;
    color: var(--green-light);
    background: linear-gradient(90deg, rgba(49,190,112,.055), transparent);
    font-family: monospace;
    font-size: .72rem;
    white-space: pre-line;
}

/* animations */
@keyframes trialPulse {
    0%,100% { opacity: .35; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes fluorescentFlicker {
    0%, 94%, 100% { opacity: 1; }
    95% { opacity: .45; }
    96% { opacity: 1; }
    97% { opacity: .25; }
    98% { opacity: .8; }
}

@keyframes entityFlash {
    0% { opacity: 0; filter: blur(7px); }
    20% { opacity: 1; filter: blur(0); }
    38% { opacity: .12; }
    55% { opacity: .95; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(1.12); }
}

@keyframes phaseFlash {
    0% { box-shadow: inset 0 0 0 rgba(49,190,112,0); }
    50% { box-shadow: inset 0 0 90px rgba(49,190,112,.18); }
    100% { box-shadow: inset 0 0 0 rgba(49,190,112,0); }
}

@keyframes archiveScan {
    from { transform: translateY(-120px); }
    to { transform: translateY(1700px); }
}

@media (max-width: 900px) {
    .trial-grid { grid-template-columns: 1fr; }
    .trial-modal { padding: 22px; }
    .trial-modal-head { flex-direction: column; }
    .trial-live-badge { align-self: flex-start; }
    .guardian-lock { grid-template-columns: 72px 1fr 70px; gap: 8px; }
}

@media (max-width: 620px) {
    .brand-logo-frame { width: 40px; height: 40px; flex-basis: 40px; }
    .trial-card { min-height: 270px; padding: 22px; }
    .trial-network-note { align-items: flex-start; flex-direction: column; gap: 6px; }
    .trial-overlay { padding: 70px 10px 20px; }
    .trial-modal { width: 100%; padding: 16px; border-radius: 14px; }
    .trial-stage { min-height: 420px; }
    .trial-modal-actions { flex-direction: column; }
    .trial-modal-actions .button { width: 100%; }
    .backrooms-doors { gap: 8px; }
    .backroom-door { height: 175px; }
    .echo-pads { grid-template-columns: repeat(2, 1fr); }
    .archive-code-row { grid-template-columns: 24px 1fr; padding: 4px; }
    .archive-code-row .button { grid-column: 1 / -1; width: calc(100% - 0px); margin: 0; }
    .nexus-terminal-head { align-items: flex-start; flex-direction: column; }
    .blueprint-grid div { min-height: 72px; padding: 7px; font-size: .58rem; }
    .guardian-lock { grid-template-columns: 1fr; }
    .guardian-lock > span { margin-top: 8px; }
    .guardian-lock button { width: 100%; }
}

/* ======================================================
   SABIS V3 // PROFILE + TOKEN PROTOCOL + GAME REWORK
====================================================== */

/* Clean crest asset: no zoom/cropping tricks needed anymore. */
.brand-logo-frame,
.lore-emblem-shell {
    overflow: visible;
    background: transparent;
}

.brand-logo-frame img,
.lore-emblem-shell img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain;
    transform: none !important;
    border-radius: 50% !important;
}

.brand-logo-frame {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 2px;
    border-color: rgba(49,190,112,.22);
    box-shadow: 0 0 0 4px rgba(2,105,55,.08), 0 0 22px rgba(49,190,112,.13);
}

.loader-emblem img,
.hero-gateway img,
.final-content > img,
.footer-brand img,
.background-logo {
    object-fit: contain;
}

.profile-shortcut {
    min-width: 86px;
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #819087;
    background: rgba(255,255,255,.025);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .6px;
    transition: .2s ease;
}

.profile-shortcut i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #54645a;
    box-shadow: 0 0 0 transparent;
}

.profile-shortcut.verified {
    color: var(--green-light);
    border-color: rgba(49,190,112,.26);
    background: rgba(2,105,55,.09);
}

.profile-shortcut.verified i {
    background: var(--green-bright);
    box-shadow: 0 0 12px var(--green-bright);
}

/* Profile overlay */
.profile-overlay {
    padding: 80px 20px 40px;
    background:
        radial-gradient(circle at 50% 12%, rgba(2,105,55,.18), transparent 36%),
        rgba(1,4,2,.97);
}

.profile-modal {
    width: min(900px,94vw);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(49,190,112,.2);
    border-radius: 20px;
    background:
        linear-gradient(rgba(49,190,112,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(49,190,112,.018) 1px,transparent 1px),
        #030a06;
    background-size: 34px 34px;
    box-shadow: 0 45px 150px rgba(0,0,0,.72);
}

.profile-modal-head {
    padding: 34px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg,rgba(2,105,55,.10),transparent 60%);
}

.profile-modal-head > div:first-child > span {
    color: var(--green-bright);
    font-family: monospace;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.profile-modal-head h2 {
    margin-top: 7px;
    font-family: "Space Grotesk",sans-serif;
    font-size: clamp(2.2rem,5vw,4.2rem);
    line-height: .95;
    letter-spacing: -2px;
}

.profile-modal-head p {
    max-width: 620px;
    margin-top: 12px;
    color: var(--muted);
    font-size: .84rem;
}

.profile-security-badge {
    flex: 0 0 auto;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(49,190,112,.2);
    border-radius: 999px;
    color: #789083;
    background: rgba(2,105,55,.07);
    font-family: monospace;
    font-size: .58rem;
}

.profile-security-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 10px var(--green-bright);
}

.profile-pane {
    padding: 32px 34px 36px;
}

.profile-info-callout {
    margin-bottom: 24px;
    padding: 18px 20px;
    border: 1px solid rgba(49,190,112,.14);
    border-radius: 12px;
    background: rgba(2,105,55,.045);
}

.profile-info-callout strong {
    color: var(--green-bright);
    font-family: monospace;
    font-size: .62rem;
    letter-spacing: 1.5px;
}

.profile-info-callout p {
    margin-top: 6px;
    color: #738178;
    font-size: .78rem;
}

#profileForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#profileForm label {
    display: block;
}

#profileForm label span {
    display: block;
    margin-bottom: 7px;
    color: #637168;
    font-family: monospace;
    font-size: .6rem;
    letter-spacing: 1.25px;
}

#profileForm input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: white;
    background: rgba(255,255,255,.025);
}

#profileForm input:focus {
    border-color: rgba(49,190,112,.35);
    box-shadow: 0 0 0 3px rgba(49,190,112,.055);
}

#profileForm .button {
    grid-column: 1 / -1;
    justify-self: start;
}

.profile-result {
    display: none;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #7d8c83;
    background: rgba(255,255,255,.02);
    font-family: monospace;
    font-size: .67rem;
}
.profile-result.show { display: block; }
.profile-result.success { color: var(--green-light); border-color: rgba(49,190,112,.25); background: rgba(49,190,112,.055); }
.profile-result.error { color: #ff8d8d; border-color: rgba(255,80,80,.22); background: rgba(120,0,0,.05); }

.profile-id-card {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(49,190,112,.18);
    border-radius: 14px;
    background: linear-gradient(110deg,rgba(2,105,55,.09),rgba(255,255,255,.015));
}

.profile-id-mark {
    width: 68px;
    height: 68px;
}
.profile-id-mark img { width: 100%; height: 100%; object-fit: contain; }
.profile-id-card span { display:block; color:var(--green-bright); font-family:monospace; font-size:.58rem; letter-spacing:1.4px; }
.profile-id-card strong { display:block; margin-top:4px; font-family:"Space Grotesk",sans-serif; font-size:1.55rem; }
.profile-id-card small { color:#7b8980; }
.profile-verified-stamp { padding:8px 11px; border:1px solid rgba(49,190,112,.26); border-radius:999px; color:var(--green-light); background:rgba(49,190,112,.06); font-family:monospace; font-size:.59rem; }

.profile-stat-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}
.profile-stat-grid > div { padding:17px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.018); }
.profile-stat-grid span { display:block; color:#56665c; font-family:monospace; font-size:.56rem; letter-spacing:1.1px; }
.profile-stat-grid strong { display:block; margin-top:5px; color:var(--green-light); font-size:.9rem; }
.profile-progress-track,.trial-progress-track { height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.055); }
.profile-progress-track { margin-top:16px; }
.profile-progress-track div,.trial-progress-track div { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green-dark),var(--green-bright)); box-shadow:0 0 14px rgba(49,190,112,.35); transition:width .45s ease; }
.profile-actions { margin-top:20px; display:flex; flex-wrap:wrap; gap:9px; }
.profile-footnote { margin-top:18px; color:#536158; font-size:.69rem; }

/* Reward panel + sequential card states */
.trial-reward-panel {
    margin-bottom: 24px;
    padding: 24px;
    display: grid;
    grid-template-columns: 66px 1fr minmax(270px,360px);
    gap: 22px;
    align-items: center;
    border: 1px solid rgba(49,190,112,.2);
    border-radius: 16px;
    background: linear-gradient(120deg,rgba(2,105,55,.09),rgba(2,8,4,.75));
    box-shadow: inset 0 0 60px rgba(49,190,112,.025);
}

.trial-reward-icon {
    width: 58px;
    height: 58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(49,190,112,.3);
    border-radius:50%;
    color:var(--green-light);
    background:radial-gradient(circle,rgba(49,190,112,.14),rgba(2,105,55,.05));
    box-shadow:0 0 28px rgba(49,190,112,.1);
    font-family:"Space Grotesk",sans-serif;
    font-size:1.25rem;
    font-weight:900;
}

.trial-reward-copy > span { color:var(--green-bright); font-family:monospace; font-size:.6rem; letter-spacing:1.5px; }
.trial-reward-copy h3 { margin:5px 0 7px; font-family:"Space Grotesk",sans-serif; font-size:1.35rem; }
.trial-reward-copy p { color:#718077; font-size:.77rem; }
.trial-reward-status > span { display:block; color:#69786f; font-family:monospace; font-size:.58rem; }
.trial-reward-status > strong { display:block; margin:5px 0 10px; color:var(--green-light); font-family:monospace; font-size:.72rem; }
.trial-reward-actions { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.trial-reward-actions .button { min-height:38px; padding:0 12px; font-size:.61rem; }

.trial-card { min-height: 330px; }
.trial-lock-state { margin: 5px 0 20px; color:#68786e; font-family:monospace; font-size:.58rem; letter-spacing:.7px; }
.trial-card.locked { opacity:.58; filter:saturate(.65); }
.trial-card.locked:hover { transform:none !important; }
.trial-card.locked footer button:disabled { cursor:not-allowed; color:#4c5c52; }
.trial-card.unlocked { border-color:rgba(49,190,112,.32); box-shadow:0 28px 90px rgba(0,0,0,.3),0 0 40px rgba(49,190,112,.055); }
.trial-card.unlocked .trial-lock-state { color:var(--green-light); }
.trial-card.completed { border-color:rgba(49,190,112,.22); background:linear-gradient(145deg,rgba(4,25,12,.92),rgba(2,8,4,.82)); }
.trial-card.completed::after { width:100%; }
.trial-card.completed .trial-lock-state { color:var(--green-bright); }

/* Standalone relic memory now uses images instead of text. */
.memory-back { padding: 12px; }
.memory-back img { width:min(72px,70%); height:min(72px,70%); object-fit:contain; filter:drop-shadow(0 0 14px rgba(49,190,112,.16)); }
.memory-lock-mark { font-family:monospace; font-size:1.4rem; color:#345040; }

/* Shared game helpers */
.game-help { margin-top:14px; color:#617168; font-family:monospace; font-size:.61rem; text-align:center; }
.maze-game,.excavation-game,.relic-vault-game,.reactor-game,.tuner-game,.blackout-game,.circuit-game,.defense-game,.boss-game { width:min(850px,94%); text-align:center; }
#mazeCanvas,#reactorCanvas,#tunerCanvas,#defenseCanvas,#bossCanvas { width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:12px; background:#020604; box-shadow:inset 0 0 50px rgba(0,0,0,.35); }
.maze-controls,.runner-controls,.defense-controls,.boss-controls { margin-top:14px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.maze-controls button,.runner-controls button,.defense-controls button,.boss-controls button {
    min-width:92px; min-height:42px; padding:0 13px; cursor:pointer; border:1px solid rgba(49,190,112,.18); border-radius:8px; color:var(--green-light); background:rgba(2,105,55,.07); font-family:monospace; font-size:.62rem; font-weight:800;
}
.maze-controls button:first-child { flex-basis:100%; max-width:92px; }

/* Deepstone excavation */
.excavation-track { position:relative; height:150px; margin:30px 0 18px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,#07100b,#020604); }
.excavation-track::before { content:""; position:absolute; inset:0; opacity:.25; background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(49,190,112,.05) 40px 41px); }
.crystal-pocket { position:absolute; top:50%; width:48px; height:66px; transform:translate(-50%,-50%); display:grid; place-items:center; opacity:.7; transition:.25s ease; }
.crystal-pocket img { width:44px; height:58px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(49,190,112,.22)); }
.crystal-pocket.extracted { opacity:.12; transform:translate(-50%,-50%) scale(.55); filter:grayscale(1); }
.excavation-scanner { position:absolute; top:0; bottom:0; left:0; width:3px; transform:translateX(-50%); background:var(--green-bright); box-shadow:0 0 18px var(--green-bright),0 0 40px rgba(49,190,112,.3); }

/* Relic image vault */
.relic-vault-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.relic-vault-card { position:relative; aspect-ratio:1; cursor:pointer; perspective:700px; background:transparent; }
.relic-card-inner { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.relic-vault-card.flipped .relic-card-inner,.relic-vault-card.matched .relic-card-inner { transform:rotateY(180deg); }
.relic-card-front,.relic-card-back { position:absolute; inset:0; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; backface-visibility:hidden; }
.relic-card-front { color:#365344; background:rgba(255,255,255,.018); font-family:monospace; font-size:1.4rem; }
.relic-card-back { transform:rotateY(180deg); background:rgba(2,105,55,.09); }
.relic-card-back img { width:62%; height:62%; object-fit:contain; filter:drop-shadow(0 0 15px rgba(49,190,112,.16)); }
.relic-vault-card.matched .relic-card-back { border-color:rgba(49,190,112,.45); box-shadow:inset 0 0 35px rgba(49,190,112,.08); }

/* Frequency tuner */
.tuner-controls { margin:18px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tuner-controls label { padding:14px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.018); text-align:left; }
.tuner-controls span { display:block; margin-bottom:8px; color:#69786f; font-family:monospace; font-size:.58rem; letter-spacing:1px; }
.tuner-controls input { width:100%; accent-color:var(--green-bright); }

/* Blackout hunt */
.blackout-field { --flash-x:50%; --flash-y:50%; position:relative; height:390px; overflow:hidden; cursor:crosshair; border:1px solid #151b17; border-radius:12px; background:#000; }
.blackout-field::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:5; background:radial-gradient(circle 125px at var(--flash-x) var(--flash-y),transparent 0 42%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.985) 100%); }
.blackout-flashlight { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle 115px at var(--flash-x) var(--flash-y),rgba(230,255,240,.08),transparent 72%); }
.blackout-target { position:absolute; width:58px; height:58px; transform:translate(-50%,-50%); z-index:3; cursor:pointer; border:0; background:transparent; opacity:.025; transition:left .55s ease,top .55s ease,opacity .09s linear,transform .2s ease; }
.blackout-target img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(49,190,112,.25)); }
.blackout-target.entity { color:#ff6969; font-size:2rem; text-shadow:0 0 18px #ff2222; }
.blackout-target.found { opacity:0 !important; pointer-events:none; transform:translate(-50%,-50%) scale(1.8); }

/* Nexus circuit */
.circuit-grid { width:min(500px,90vw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.circuit-tile { position:relative; aspect-ratio:1; cursor:pointer; border:1px solid var(--border); border-radius:10px; color:#53645a; background:rgba(255,255,255,.018); transition:.18s ease; }
.circuit-tile > span { display:block; font-family:monospace; font-size:clamp(1.8rem,5vw,3rem); line-height:1; }
.circuit-tile small { position:absolute; left:5px; right:5px; bottom:7px; color:#68786f; font-family:monospace; font-size:.48rem; }
.circuit-tile.powered { color:var(--green-light); border-color:rgba(49,190,112,.32); background:rgba(49,190,112,.07); box-shadow:inset 0 0 28px rgba(49,190,112,.05); }
.circuit-tile.source,.circuit-tile.core { border-color:rgba(49,190,112,.45); }

/* Core defense */
.defense-controls button.cooldown { opacity:.4; transform:scale(.97); }

/* Boss */
.boss-controls button[data-boss-control="fire"] { min-width:140px; border-color:rgba(156,140,255,.28); color:#d7d0ff; background:rgba(92,71,180,.08); }

@media (max-width: 980px) {
    .trial-reward-panel { grid-template-columns:58px 1fr; }
    .trial-reward-status { grid-column:1 / -1; }
    .profile-shortcut { min-width:38px; width:38px; padding:0; }
    .profile-shortcut span { display:none; }
}

@media (max-width: 700px) {
    .profile-modal-head { flex-direction:column; padding:26px 22px; }
    .profile-pane { padding:24px 20px 28px; }
    #profileForm { grid-template-columns:1fr; }
    .profile-id-card { grid-template-columns:58px 1fr; }
    .profile-id-mark { width:54px; height:54px; }
    .profile-verified-stamp { grid-column:1 / -1; justify-self:start; }
    .profile-stat-grid { grid-template-columns:1fr; }
    .trial-reward-panel { grid-template-columns:1fr; }
    .trial-reward-icon { width:50px; height:50px; }
    .relic-vault-grid { grid-template-columns:repeat(3,1fr); }
    .tuner-controls { grid-template-columns:1fr; }
    .blackout-field { height:360px; }
    .defense-controls { display:grid; grid-template-columns:1fr; }
    .defense-controls button { width:100%; }
}

@media (max-width: 520px) {
    .brand-logo-frame { width:38px; height:38px; flex-basis:38px; }
    .relic-vault-grid { grid-template-columns:repeat(3,1fr); gap:7px; }
    .maze-controls button,.runner-controls button,.boss-controls button { min-width:76px; }
    .blackout-field { height:330px; }
}

/* ==========================================================
   SABIS V4 — ACCOUNT / PULSE / STAFF / MOBILE / GAME POLISH
========================================================== */

body.auth-locked {
    overflow: hidden !important;
}

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: #010403;
    transition: opacity .45s ease, visibility .45s ease;
}

.auth-gate.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.auth-gate-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(49,190,112,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49,190,112,.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 20%, rgba(2,105,55,.35), transparent 38%),
        radial-gradient(circle at 15% 80%, rgba(49,190,112,.08), transparent 28%),
        #010403;
    background-size: 60px 60px,60px 60px,auto,auto,auto;
    animation: authGrid 18s linear infinite;
}

.auth-gate-bg::after {
    content: "SABIS // SECURE NETWORK // 1886";
    position: absolute;
    right: 6%;
    bottom: 5%;
    color: rgba(161,237,191,.08);
    font-family: monospace;
    font-size: clamp(.65rem,1.2vw,.85rem);
    letter-spacing: 4px;
}

@keyframes authGrid {
    to { background-position: 60px 60px,60px 60px,center,bottom left,center; }
}

.auth-shell {
    position: relative;
    z-index: 2;
    width: min(560px,100%);
    border: 1px solid rgba(49,190,112,.24);
    border-radius: 24px;
    padding: clamp(26px,5vw,48px);
    background: linear-gradient(145deg,rgba(8,25,14,.96),rgba(1,6,3,.98));
    box-shadow: 0 36px 120px rgba(0,0,0,.65),0 0 70px rgba(49,190,112,.08);
    overflow: hidden;
}

.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg,transparent 0 42%,rgba(49,190,112,.035) 48%,transparent 54% 100%);
    transform: translateX(-70%);
    animation: authSweep 5.5s ease-in-out infinite;
}

@keyframes authSweep { 50%,100% { transform: translateX(90%); } }

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}
.auth-brand img { width: 48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(49,190,112,.22)); }
.auth-brand div { display:flex;flex-direction:column;line-height:1.15; }
.auth-brand strong { font-family:"Space Grotesk",sans-serif;font-size:1.05rem; }
.auth-brand span { margin-top:5px;color:var(--green-bright);font-size:.58rem;font-weight:900;letter-spacing:2.3px; }

.auth-progress { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0 34px; }
.auth-progress i { height:3px;border-radius:999px;background:rgba(255,255,255,.07);transition:.35s ease; }
.auth-progress i.active { background:rgba(49,190,112,.48);box-shadow:0 0 14px rgba(49,190,112,.2); }
.auth-progress i.done { background:var(--green-bright);box-shadow:0 0 18px rgba(49,190,112,.45); }

.auth-step h1 { font-family:"Space Grotesk",sans-serif;font-size:clamp(2.5rem,8vw,4.2rem);line-height:.93;letter-spacing:-3px;margin-bottom:18px; }
.auth-step > p { color:var(--muted);max-width:480px;margin-bottom:28px; }
.auth-step form { display:grid;gap:14px; }
.auth-step label { display:grid;gap:8px;color:#8da398;font-size:.65rem;font-weight:800;letter-spacing:1.3px; }
.auth-step input { width:100%;height:52px;padding:0 15px;border:1px solid var(--border);border-radius:10px;color:white;background:rgba(255,255,255,.035);transition:.2s ease; }
.auth-step input:focus { border-color:rgba(49,190,112,.55);box-shadow:0 0 0 3px rgba(49,190,112,.08); }
.auth-step input.code-rejected { animation:codeReject .42s ease 2; }
@keyframes codeReject { 25%{transform:translateX(-8px);border-color:#d44f78;}75%{transform:translateX(8px);border-color:#d44f78;} }
.auth-text-button { margin-top:14px;padding:8px 0;cursor:pointer;color:#6f8879;background:transparent;font-size:.67rem;font-weight:800; }
.auth-text-button:hover { color:white; }
.auth-warning,.auth-privacy { display:block;margin-top:15px;color:#607167;font-size:.62rem; }
.auth-discord-note { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;padding:16px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02); }
.auth-discord-note strong { grid-column:1/-1;color:var(--green-light);font-size:.62rem;letter-spacing:1.5px; }
.auth-discord-note span { color:#75877c;font-size:.67rem; }
.auth-result { display:none;margin-top:16px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;color:#a8b8ae;background:rgba(255,255,255,.02);font-size:.72rem; }
.auth-result.show { display:block; }
.auth-result.error { color:#ff9ab2;border-color:rgba(255,86,127,.25);background:rgba(138,18,50,.12); }
.auth-result.success { color:#b8ffd3;border-color:rgba(49,190,112,.28);background:rgba(49,190,112,.08); }

/* SABIS Pulse */
.pulse-section .shell { padding-top:70px;padding-bottom:80px; }
.pulse-grid { display:grid;grid-template-columns:2.2fr repeat(3,1fr);gap:12px; }
.pulse-primary,.pulse-stat,.pulse-actions { position:relative;min-height:160px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(6,20,11,.76),rgba(1,7,4,.84));overflow:hidden; }
.pulse-primary { grid-row:span 2;padding:28px;display:flex;flex-direction:column;justify-content:flex-end; }
.pulse-primary::after { content:"";position:absolute;inset:-30%;background:radial-gradient(circle,rgba(49,190,112,.12),transparent 50%);animation:pulseGlow 5s ease-in-out infinite alternate;pointer-events:none; }
@keyframes pulseGlow { to{transform:translate(18%,8%) scale(1.12);} }
.pulse-primary h2 { position:relative;z-index:1;font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,4vw,3.5rem);line-height:.95;letter-spacing:-2px;max-width:560px; }
.pulse-primary p { position:relative;z-index:1;margin-top:17px;color:#9caf9f;max-width:620px; }
.pulse-primary small { position:relative;z-index:1;margin-top:20px;color:#53655a;font-family:monospace;font-size:.62rem; }
.pulse-stat { padding:22px;display:flex;flex-direction:column;justify-content:space-between; }
.pulse-stat span { color:#64766b;font-size:.58rem;font-weight:900;letter-spacing:1.7px; }
.pulse-stat strong { color:white;font-family:"Space Grotesk",sans-serif;font-size:1.35rem;word-break:break-word; }
.pulse-stat small { color:var(--green-bright);font-size:.58rem;letter-spacing:1.2px; }
.pulse-actions { grid-column:2/-1;min-height:80px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.pulse-actions .button { width:100%; }

/* New archive/realm image slots */
.realm-image-slot,.documentary-image { position:relative;overflow:hidden; }
.realm-image-slot img,.documentary-image img { display:block;width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:inherit; }
.realm-image-slot img.image-missing,.documentary-image img.image-missing { display:none; }
.image-slot-fallback,.documentary-image-fallback { position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:20px;background:radial-gradient(circle,rgba(49,190,112,.08),rgba(0,0,0,.42)); }
.image-slot-fallback.hidden,.documentary-image-fallback.hidden { display:none; }
.image-slot-fallback span,.documentary-image-fallback strong { color:var(--green-light);font-size:.66rem;letter-spacing:2px; }
.image-slot-fallback p,.documentary-image-fallback p { margin-top:8px;color:#63736a;font-size:.72rem; }

/* Navbar verified / staff */
.profile-shortcut,.staff-shortcut { height:38px;padding:0 12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:#87978d;background:rgba(255,255,255,.025);font-size:.62rem;font-weight:800;letter-spacing:.5px; }
.profile-shortcut { display:flex;align-items:center;gap:8px; }
.profile-shortcut i { width:7px;height:7px;border-radius:50%;background:#56635b;box-shadow:0 0 0 3px rgba(255,255,255,.02); }
.profile-shortcut.verified { color:var(--green-light);border-color:var(--green-border);background:rgba(2,105,55,.12); }
.profile-shortcut.verified i { background:var(--green-bright);box-shadow:0 0 12px rgba(49,190,112,.8); }
.staff-shortcut { color:#c7b9ff;border-color:rgba(146,112,255,.25);background:rgba(94,55,177,.12); }

/* V4 profile */
.profile-modal-v4 { width:min(880px,94vw);max-height:88vh;overflow-y:auto; }
.profile-role-badge { align-self:flex-start;padding:8px 11px;border:1px solid rgba(49,190,112,.26);border-radius:999px;color:var(--green-light);background:rgba(49,190,112,.08);font-size:.62rem;font-weight:900;letter-spacing:1.4px; }
.profile-id-card-v4 { grid-template-columns:auto 1fr auto;align-items:center; }
.profile-avatar-frame { overflow:hidden;border-radius:50%; }
.profile-avatar-frame img { width:100%;height:100%;object-fit:cover; }
.profile-verified-stamp { justify-self:end;padding:8px 10px;border:1px solid rgba(49,190,112,.22);border-radius:7px;color:var(--green-bright);font-family:monospace;font-size:.62rem;transform:rotate(-2deg); }
.profile-stat-grid-v4 { grid-template-columns:repeat(4,1fr); }
.profile-ticket-section { margin:22px 0;padding:20px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.015); }
.profile-subhead { display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:14px; }
.profile-subhead div { display:flex;flex-direction:column; }
.profile-subhead span { color:#66776d;font-size:.56rem;letter-spacing:1.5px; }
.profile-subhead strong { margin-top:3px;font-size:.78rem; }
.profile-ticket-list { display:grid;gap:8px; }
.profile-ticket-row { display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.02); }
.profile-ticket-row div { min-width:0;display:flex;flex-direction:column; }
.profile-ticket-row strong { font-family:monospace;color:var(--green-light);font-size:.65rem; }
.profile-ticket-row span { margin-top:3px;color:#829288;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ticket-status { font-style:normal;font-size:.56rem;font-weight:900;letter-spacing:1px; }
.ticket-status.open { color:#ffca78; }.ticket-status.closed{color:var(--green-bright);}
.profile-footnote { margin-top:16px;color:#56675d;font-size:.62rem; }

/* Staff console */
.staff-overlay { padding:78px 18px 30px;overflow-y:auto; }
.staff-console { width:min(1120px,96vw);margin:auto;padding:28px;border:1px solid rgba(146,112,255,.2);border-radius:22px;background:linear-gradient(145deg,rgba(8,11,14,.98),rgba(3,7,5,.98));box-shadow:var(--shadow); }
.staff-console-head { display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--border); }
.staff-console-head span,.staff-panel-head span { color:#a48cff;font-size:.58rem;font-weight:900;letter-spacing:2px; }
.staff-console-head h2 { margin-top:4px;font-family:"Space Grotesk",sans-serif;font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-2px; }
.staff-console-head p { color:#738078; }
.staff-stat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0; }
.staff-stat-grid > div { padding:18px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02); }
.staff-stat-grid span { display:block;color:#64726a;font-size:.56rem;letter-spacing:1.2px; }.staff-stat-grid strong{display:block;margin-top:6px;font-size:1.5rem;}
.staff-panel { margin-top:14px;padding:20px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.015); }
.staff-panel-head { margin-bottom:14px; }.staff-panel-head h3{margin-top:3px;font-size:1rem;}
.staff-ticket-list,.staff-profile-results,.staff-audit { display:grid;gap:8px; }
.staff-ticket { display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px;border:1px solid var(--border);border-radius:10px;background:#050a07; }
.staff-ticket span { color:#8576b8;font-family:monospace;font-size:.58rem; }.staff-ticket h4{margin:4px 0;font-size:.82rem}.staff-ticket p{color:#738177;font-size:.68rem}
.staff-search { display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:14px; }
.staff-search input,.staff-panel input,.staff-panel textarea,.staff-panel select { width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:9px;color:white;background:rgba(255,255,255,.03); }
.staff-profile-card { padding:16px;border:1px solid var(--border);border-radius:12px;background:#040806; }
.staff-profile-card header { display:flex;justify-content:space-between;gap:14px;align-items:flex-start; }.staff-profile-card header span{color:#6b7a71;font-family:monospace;font-size:.56rem}.staff-profile-card h4{margin-top:3px;font-size:1rem}.staff-profile-card p{color:#738279;font-size:.67rem}.staff-profile-card header i{font-style:normal;font-size:.56rem;font-weight:900}.staff-profile-card header i.good{color:var(--green-bright)}.staff-profile-card header i.bad{color:#ff759b}
.staff-profile-meta { display:flex;gap:8px;flex-wrap:wrap;margin:12px 0; }.staff-profile-meta span{padding:5px 7px;border:1px solid var(--border);border-radius:6px;color:#78887e;font-size:.56rem}
.staff-profile-actions { display:flex;flex-wrap:wrap;gap:6px; }.staff-profile-actions button{padding:7px 9px;border:1px solid var(--border);border-radius:7px;cursor:pointer;color:#aeb8b2;background:rgba(255,255,255,.025);font-size:.57rem}.staff-profile-actions button:hover{border-color:rgba(49,190,112,.35);color:white}
.staff-audit > div { display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;padding:10px;border-bottom:1px solid rgba(255,255,255,.05); }.staff-audit strong{font-size:.65rem;color:#c4b6ff}.staff-audit span,.staff-audit small{color:#68766e;font-size:.6rem}
.owner-application-form { display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end; }.owner-application-form label{display:grid;gap:5px;color:#6d7a73;font-size:.58rem}.staff-check{grid-column:1/-1;display:flex!important;align-items:center;gap:8px!important}.staff-check input{width:auto!important}
.staff-result { display:none;margin-top:14px;padding:12px;border-radius:9px;border:1px solid var(--border);color:#9bab9f;background:rgba(255,255,255,.02);font-size:.68rem }.staff-result.show{display:block}.staff-result.error{color:#ff9ab2;border-color:rgba(255,91,132,.25)}.staff-result.success{color:#b7ffd0;border-color:rgba(49,190,112,.25)}

/* Rift failure spectacle */
.rift-console { position:relative;overflow:hidden; }
.rift-core.breached { color:#e798ff;border-color:#b560ff!important;box-shadow:0 0 40px rgba(169,74,255,.75),inset 0 0 30px rgba(189,93,255,.35);animation:riftBreach .12s linear infinite alternate; }
.rift-core.stabilized { color:#baffd1;border-color:#31be70!important;box-shadow:0 0 34px rgba(49,190,112,.65); }
@keyframes riftBreach { from{transform:translate(-2px,1px) scale(.98) rotate(-1deg)}to{transform:translate(2px,-1px) scale(1.03) rotate(1deg)} }
.void-breach-particle { position:absolute;z-index:0;left:var(--x);top:var(--y);width:6px;height:22px;border-radius:999px;background:linear-gradient(#eaa2ff,#7b29ce);box-shadow:0 0 18px #b34cff;transform:scale(var(--scale)) rotate(35deg);opacity:0;pointer-events:none;animation:voidParticle 1.15s var(--delay) ease-out infinite; }
@keyframes voidParticle { 0%{opacity:0;transform:translateY(30px) scale(var(--scale)) rotate(20deg)}25%{opacity:.9}100%{opacity:0;transform:translateY(-70px) scale(calc(var(--scale) * .35)) rotate(220deg)} }
body.void-breach-active::after { content:"";position:fixed;inset:0;z-index:99990;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(89,0,128,.18) 72%,rgba(118,0,168,.26));animation:voidScreen .18s linear 7 alternate; }
@keyframes voidScreen { to{filter:hue-rotate(28deg);opacity:.45;} }

/* Archive rejection/decryption polish */
.lore-section.archive-lockdown { animation:archiveShake .14s linear 6; }
.lore-section.archive-lockdown::after { content:"ACCESS DENIED // SECURITY LOCKDOWN";position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;color:#ff82a5;background:repeating-linear-gradient(0deg,rgba(60,0,20,.1) 0 2px,transparent 2px 5px),rgba(50,0,15,.16);font-family:monospace;font-size:clamp(.75rem,2.4vw,1.1rem);font-weight:900;letter-spacing:3px;animation:lockdownFlash .15s linear 8 alternate; }
@keyframes archiveShake { 25%{transform:translateX(-4px)}75%{transform:translateX(4px)} }
@keyframes lockdownFlash { to{opacity:.22} }
.lore-section.archive-decrypted .full-lore-archive { box-shadow:0 0 70px rgba(49,190,112,.12); }
.archive-access input.code-rejected { border-color:#ff668f!important;box-shadow:0 0 0 3px rgba(255,80,125,.1)!important;animation:codeReject .32s ease 2; }

/* Trial clear/fail feedback + relic reveal */
.trial-overlay.trial-clear-effect .trial-modal { animation:trialClear .65s ease; }
.trial-overlay.trial-fail-effect .trial-modal { animation:trialFail .45s ease; }
@keyframes trialClear { 0%{box-shadow:var(--shadow)}40%{box-shadow:0 0 80px rgba(49,190,112,.42);transform:scale(1.008)}100%{box-shadow:var(--shadow)} }
@keyframes trialFail { 20%{transform:translateX(-5px);box-shadow:0 0 60px rgba(255,71,122,.2)}60%{transform:translateX(5px)}100%{transform:none} }
.relic-vault-grid.preview .relic-vault-card { pointer-events:none; }
.relic-vault-card.previewing { animation:relicPreview 1.2s ease-in-out infinite alternate; }
@keyframes relicPreview { to{filter:drop-shadow(0 0 14px rgba(49,190,112,.22));transform:translateY(-2px)} }

/* Better mobile behavior */
@media (max-width: 980px) {
    :root { --nav: 66px; }
    .navbar { padding:0 4%; }
    .command-shortcut { display:none; }
    .profile-shortcut,.staff-shortcut,.nav-join { height:36px;padding:0 9px;font-size:.56rem; }
    .pulse-grid { grid-template-columns:1fr 1fr; }
    .pulse-primary { grid-column:1/-1;grid-row:auto;min-height:280px; }
    .pulse-actions { grid-column:1/-1; }
    .profile-stat-grid-v4,.staff-stat-grid { grid-template-columns:1fr 1fr; }
    .owner-application-form { grid-template-columns:1fr 1fr; }
    .owner-application-form .button { grid-column:1/-1; }
    .staff-audit > div { grid-template-columns:1fr;gap:3px; }
    .realm-image-slot img,.documentary-image img { min-height:220px; }
}

@media (max-width: 720px) {
    html { scroll-padding-top:72px; }
    body { font-size:15px; }
    .shell { width:min(94%,1240px);padding:82px 0; }
    .navbar { height:64px; }
    .brand img { width:36px;height:36px; }
    .brand > div { display:none; }
    .nav-actions { gap:5px; }
    .staff-shortcut { display:none!important; }
    .profile-shortcut span { max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .nav-join { padding:0 10px; }
    .mobile-menu { display:block; }
    .nav-links { top:64px;max-height:calc(100vh - 64px);overflow-y:auto; }
    .hero { min-height:100svh;padding-top:80px; }
    .hero-content { width:94%; }
    .hero h1 { font-size:clamp(3.3rem,16vw,5.2rem);letter-spacing:-4px; }
    .hero-buttons { display:grid;grid-template-columns:1fr; }
    .hero-buttons .button { width:100%; }
    .hero-data { grid-template-columns:1fr 1fr;gap:8px; }
    .wide-heading { grid-template-columns:1fr;gap:20px; }
    .wide-heading h2,.section-heading h2 { font-size:clamp(2.6rem,13vw,4rem);letter-spacing:-2px; }
    .pulse-grid { grid-template-columns:1fr; }
    .pulse-primary,.pulse-stat,.pulse-actions { grid-column:auto; }
    .pulse-actions { grid-template-columns:1fr; }
    .auth-gate { padding:12px;align-items:start; }
    .auth-shell { margin:10px 0;padding:24px 18px;border-radius:18px; }
    .auth-step h1 { font-size:clamp(2.7rem,15vw,4rem); }
    .auth-discord-note { grid-template-columns:1fr; }
    .auth-discord-note strong { grid-column:auto; }
    .profile-overlay,.staff-overlay,.trial-overlay,.form-overlay,.documentary-overlay { padding:68px 8px 14px!important;align-items:flex-start!important;overflow-y:auto!important; }
    .profile-modal-v4,.staff-console,.trial-modal,.form-modal { width:100%!important;max-height:none!important;border-radius:16px!important; }
    .profile-modal-head,.staff-console-head,.profile-subhead { flex-direction:column;align-items:flex-start; }
    .profile-id-card-v4 { grid-template-columns:auto 1fr; }
    .profile-verified-stamp { grid-column:1/-1;justify-self:start; }
    .profile-stat-grid-v4,.staff-stat-grid { grid-template-columns:1fr 1fr; }
    .profile-actions { display:grid;grid-template-columns:1fr; }
    .profile-actions .button { width:100%; }
    .staff-console { padding:17px; }
    .staff-search,.owner-application-form { grid-template-columns:1fr; }
    .staff-ticket { align-items:flex-start;flex-direction:column; }
    .staff-ticket .button { width:100%; }
    .trial-modal-head { flex-direction:column;gap:10px; }
    .trial-stage { padding:12px!important;overflow:hidden; }
    .trial-stage canvas { width:100%!important;height:auto!important;max-height:58svh;touch-action:none; }
    .maze-controls,.runner-controls,.boss-controls { position:relative;z-index:10; }
    .maze-controls button,.runner-controls button,.boss-controls button { min-height:48px;touch-action:manipulation; }
    .trial-readout { flex-wrap:wrap;gap:7px!important; }
    .trial-readout span { flex:1 1 calc(50% - 7px); }
    .relic-vault-grid { grid-template-columns:repeat(3,1fr)!important;gap:7px!important; }
    .relic-vault-card { min-width:0!important;aspect-ratio:1/1; }
    .relic-vault-card img { max-width:78%;max-height:78%;object-fit:contain; }
    .circuit-grid { width:100%!important;max-width:420px;margin-inline:auto; }
    .circuit-tile { aspect-ratio:1/1;height:auto!important; }
    .feature-grid,.trial-grid,.worker-grid,.support-grid,.material-grid,.armor-grid { grid-template-columns:1fr!important; }
    .connection-grid,.form-grid { grid-template-columns:1fr!important; }
    .realm-display { grid-template-columns:1fr!important; }
    .realm-image-slot img,.documentary-image img { min-height:200px; }
    .documentary-layout { grid-template-columns:1fr!important; }
    .documentary-layout aside { position:relative!important;top:auto!important;max-height:none!important; }
    .documentary-layout article { padding:20px!important; }
    .drawing-layout { grid-template-columns:1fr!important; }
    #logoCanvas { width:100%!important;height:auto!important;touch-action:none; }
    .rift-game { grid-template-columns:1fr!important; }
    .rift-console { min-height:300px; }
    footer .footer-main { flex-direction:column;align-items:flex-start;gap:12px; }
}

@media (max-width: 430px) {
    .profile-stat-grid-v4,.staff-stat-grid { grid-template-columns:1fr; }
    .hero-data { grid-template-columns:1fr; }
    .profile-shortcut { max-width:92px; }
    .relic-vault-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
    .trial-modal-actions { display:grid!important;grid-template-columns:1fr!important; }
    .trial-modal-actions .button { width:100%; }
}


/* ======================================================
   SABIS WEBSITE V5 — JAVA/BEDROCK + MINECRAFT LINK
====================================================== */

.edition-connection-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.edition-connection-card {
    position:relative;
    overflow:hidden;
    padding:20px;
    border:1px solid var(--border);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(0,0,0,.12));
}
.edition-connection-card::after {
    content:"";
    position:absolute;
    inset:auto -20% -65% 20%;
    height:180px;
    pointer-events:none;
    background:radial-gradient(circle,rgba(49,190,112,.10),transparent 68%);
}
.edition-connection-card.bedrock-connection-card::after {
    background:radial-gradient(circle,rgba(80,150,255,.10),transparent 68%);
}
.edition-connection-card header {
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}
.edition-connection-card header div { display:flex;flex-direction:column;gap:4px; }
.edition-connection-card header span { color:var(--green-bright);font-size:.58rem;font-weight:900;letter-spacing:1.8px; }
.edition-connection-card header strong { color:white;font-family:"Space Grotesk",sans-serif;font-size:1rem; }
.edition-connection-card header i { padding:5px 7px;border:1px solid var(--green-border);border-radius:999px;color:#81dca8;background:rgba(49,190,112,.06);font-style:normal;font-size:.49rem;font-weight:900;letter-spacing:1px; }
.bedrock-connection-card header i { color:#a9cbff;border-color:rgba(92,151,255,.22);background:rgba(64,120,235,.08); }
.edition-connection-fields { position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px;margin-bottom:14px; }
.edition-connection-fields.single-field { grid-template-columns:1fr; }
.edition-connection-fields > div { min-width:0;padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(0,0,0,.15); }
.edition-connection-fields small { display:block;margin-bottom:5px;color:#56665d;font-size:.5rem;font-weight:900;letter-spacing:1.2px; }
.edition-connection-fields strong { display:block;color:#d8e5dd;font-family:monospace;font-size:.78rem;overflow-wrap:anywhere; }
.edition-copy-row { position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.edition-copy { position:relative;z-index:1;width:100%; }
.join-meta-row { margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-top:1px solid var(--border); }
.join-meta-row span,.join-meta-row a { color:#66776d;font-size:.58rem;font-weight:900;letter-spacing:1px; }
.join-meta-row a { color:var(--green-light); }

.final-connect-v5 {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:10px;
    text-align:left;
}
.final-connect-v5 .final-edition-card {
    padding:16px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:9px;
    background:rgba(0,0,0,.14);
}
.final-connect-v5 .final-edition-card > span { color:var(--green-bright);font-size:.54rem;letter-spacing:1.5px; }
.final-connect-v5 .final-edition-card > strong { display:block;margin:7px 0 13px;color:#dce8e0;font-family:monospace;font-size:.78rem;overflow-wrap:anywhere; }
.final-bedrock-fields { display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:8px;margin:8px 0 13px; }
.final-bedrock-fields div { min-width:0;padding:8px;border:1px solid rgba(255,255,255,.05);border-radius:7px; }
.final-bedrock-fields small { display:block;color:#59685f;font-size:.46rem;font-weight:900; }
.final-bedrock-fields strong { display:block;margin-top:3px;color:#dce8e0;font-family:monospace;font-size:.7rem;overflow-wrap:anywhere; }

/* Keep the fixed Nexus input as type=text (prevents browser password prompts),
   but visually mask typed characters in Chromium/Safari. */
#archiveCode.nexus-key-input {
    -webkit-text-security:disc;
    text-security:disc;
}

.minecraft-edition-picker { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.minecraft-edition-option { position:relative;cursor:pointer; }
.minecraft-edition-option > input { position:absolute;opacity:0;pointer-events:none; }
.minecraft-edition-body { min-height:76px;padding:14px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.02);transition:.2s ease; }
.minecraft-edition-body strong { color:#c4d0c8;font-family:"Space Grotesk",sans-serif;font-size:.9rem; }
.minecraft-edition-body small { margin-top:4px;color:#66766d;font-family:monospace;font-size:.58rem; }
.minecraft-edition-option > input:checked + .minecraft-edition-body { border-color:rgba(49,190,112,.48);background:rgba(49,190,112,.08);box-shadow:0 0 0 3px rgba(49,190,112,.055); }
.minecraft-edition-option > input:checked + .minecraft-edition-body strong { color:#d6ffe5; }
.minecraft-link-note { padding:12px 13px;display:grid;gap:4px;border:1px solid rgba(49,190,112,.12);border-radius:9px;background:rgba(49,190,112,.035); }
.minecraft-link-note strong { color:var(--green-light);font-size:.56rem;letter-spacing:1.3px; }
.minecraft-link-note span { color:#728279;font-size:.64rem;line-height:1.5; }
.minecraft-code-panel { margin-top:16px;padding:18px;border:1px solid rgba(49,190,112,.2);border-radius:13px;background:linear-gradient(145deg,rgba(49,190,112,.06),rgba(0,0,0,.12)); }
.minecraft-code-panel > p { margin:8px 0 15px;color:#8b9d92;font-size:.7rem; }
.minecraft-code-panel form { display:grid;gap:12px; }

.profile-minecraft-link { margin:18px 0;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(49,190,112,.15);border-radius:12px;background:rgba(49,190,112,.035); }
.profile-minecraft-link > div { min-width:0;display:flex;flex-direction:column; }
.profile-minecraft-link span { color:#65786c;font-size:.55rem;font-weight:900;letter-spacing:1.5px; }
.profile-minecraft-link strong { margin-top:4px;color:#d6ffe5;font-size:.78rem; }
.profile-minecraft-link small { margin-top:3px;color:#697a70;font-family:monospace;font-size:.6rem;overflow-wrap:anywhere; }
.profile-minecraft-link i { flex:0 0 auto;padding:6px 8px;border:1px solid rgba(49,190,112,.22);border-radius:999px;color:var(--green-bright);background:rgba(49,190,112,.06);font-style:normal;font-size:.52rem;font-weight:900;letter-spacing:1px; }
.profile-minecraft-link i.offline { color:#ff9bb4;border-color:rgba(255,91,132,.22);background:rgba(255,91,132,.05); }
.staff-result.warning { color:#ffd796;border-color:rgba(255,191,84,.25);background:rgba(117,75,10,.10); }

@media (max-width:760px) {
    .edition-connection-grid,.final-connect-v5 { grid-template-columns:1fr; }
    .minecraft-edition-picker { grid-template-columns:1fr; }
    .edition-connection-fields { grid-template-columns:1fr 84px; }
    .join-meta-row { align-items:flex-start;flex-direction:column; }
}


/* ======================================================
   SABIS WEBSITE V6 — FINAL STAFF + RESPONSIVE PASS
====================================================== */
.staff-panel-note{margin:-4px 0 16px;color:#7f8d84;font-size:.68rem;line-height:1.6}
.staff-panel-head-row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.staff-action-group{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055)}
.staff-action-group>small{display:block;margin-bottom:7px;color:#77847c;font-size:.52rem;font-weight:900;letter-spacing:1.5px}
.staff-profile-actions button{min-height:34px}
.staff-profile-actions button[data-staff-action="ban"],.staff-profile-actions button[data-staff-action="kill"],.staff-profile-actions button[data-staff-action="clear"],.staff-profile-actions button[data-staff-action^="reset-"]{border-color:rgba(255,91,132,.17)}
.button.danger{border-color:rgba(255,91,132,.32)!important;color:#ff9bb5!important;background:rgba(255,70,112,.075)!important}
.owner-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.owner-tool-card{display:grid;gap:10px;min-width:0;padding:15px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.018)}
.owner-tool-card>span{color:#a48cff;font-size:.52rem;font-weight:900;letter-spacing:1.5px}.owner-tool-card>strong{font-size:.82rem}.owner-tool-card>small{color:#78877f;font-size:.6rem;overflow-wrap:anywhere}
.owner-tool-actions,.command-manager-actions{display:flex;flex-wrap:wrap;gap:7px}.owner-tool-actions .button{flex:1 1 120px}
.command-manager-form{display:grid;grid-template-columns:1.25fr .75fr;gap:10px}.command-manager-form label{display:grid;gap:6px;color:#78877f;font-size:.56rem}.command-manager-form label.wide,.command-manager-actions{grid-column:1/-1}
.command-manager-list{display:grid;gap:8px;margin-top:14px}.command-manager-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.014)}
.command-manager-row>div:first-child{min-width:0}.command-manager-row code{display:block;color:#b9ffd0;overflow-wrap:anywhere}.command-manager-row span{display:block;margin-top:4px;color:#a48cff;font-size:.54rem;font-weight:800}.command-manager-row p{margin:5px 0;color:#8d9a92;font-size:.64rem}.command-manager-row small{display:block;color:#65736b;font-size:.56rem;overflow-wrap:anywhere}.command-manager-row>div:last-child{display:flex;gap:6px}
.staff-console{max-height:calc(100svh - 44px);overflow-y:auto;overscroll-behavior:contain}.staff-overlay{overflow:hidden}.staff-result{position:sticky;bottom:4px;z-index:8;backdrop-filter:blur(16px)}
@media (max-width:900px){.owner-tool-grid{grid-template-columns:1fr}.staff-console{max-height:none}.staff-overlay{overflow-y:auto}.staff-panel-head-row{align-items:flex-start}.command-manager-form{grid-template-columns:1fr}.command-manager-form label.wide,.command-manager-actions{grid-column:auto}}
@media (max-width:720px){.staff-panel{padding:14px}.staff-profile-card{padding:13px}.staff-profile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.staff-profile-actions button{width:100%;min-width:0;white-space:normal;line-height:1.15}.staff-panel-head-row{flex-direction:column}.staff-panel-head-row .button{width:100%}.owner-tool-actions,.command-manager-actions{display:grid;grid-template-columns:1fr}.command-manager-row{grid-template-columns:1fr}.command-manager-row>div:last-child{display:grid;grid-template-columns:1fr 1fr}.command-manager-row>div:last-child .button{width:100%}.owner-tool-card .button{width:100%}.staff-search .button{width:100%}}
@media (max-width:430px){.staff-profile-actions{grid-template-columns:1fr}.command-manager-row>div:last-child{grid-template-columns:1fr}.staff-console{padding:13px!important}.staff-panel{padding:12px}.owner-tool-card{padding:12px}.staff-console-head h2{font-size:2.35rem}}


/* ======================================================
   SABIS PUBLISH FIX — STATUS / MEMORIES / ARCHIVE / STAFF
====================================================== */
.server-status-text { transition:color .25s ease,text-shadow .25s ease; }
.server-status-text.status-online,.server-access-current.status-online { color:var(--green-light)!important; }
.server-status-text.status-development,.server-access-current.status-development { color:#d7aa58!important; }
.server-status-text.status-maintenance,.server-access-current.status-maintenance { color:#ff738b!important; }
.server-access-current { font-family:monospace;font-size:.68rem;letter-spacing:1.2px; }
.server-access-actions { display:flex;flex-wrap:wrap;gap:8px; }
.server-access-actions .selected { border-color:rgba(49,190,112,.55)!important;box-shadow:0 0 0 1px rgba(49,190,112,.12),0 0 24px rgba(49,190,112,.08); }

.profile-stat-grid-v4 { grid-template-columns:repeat(5,1fr); }
.memory-profile-stat { position:relative;overflow:hidden;transition:border-color .25s ease,background .25s ease; }
.memory-profile-stat small { display:block;margin-top:6px;color:#66756c;font-family:monospace;font-size:.5rem;letter-spacing:.65px;line-height:1.35; }
.memory-profile-stat.memory-locked { border-color:rgba(132,112,161,.16);background:linear-gradient(145deg,rgba(66,42,83,.07),rgba(0,0,0,.12)); }
.memory-profile-stat.memory-locked::after { content:"";position:absolute;inset:-40% -20%;pointer-events:none;background:radial-gradient(circle,rgba(117,73,151,.08),transparent 55%); }
.memory-profile-stat.memory-locked strong { color:#806f91!important;letter-spacing:.8px; }
.memory-profile-stat.memory-unlocked { border-color:rgba(155,92,220,.26);background:linear-gradient(145deg,rgba(84,29,123,.11),rgba(0,0,0,.12));box-shadow:inset 0 0 30px rgba(116,56,158,.03); }
.memory-profile-stat.memory-unlocked strong { color:#c794ff!important; }
.memory-profile-stat.memory-unlocked small { color:#8f71aa; }
.memory-lock-icon { font-style:normal;display:inline-block;margin-right:4px;transform:rotate(45deg); }

.archive-code-row { grid-template-columns:24px minmax(0,1fr) auto auto!important; }
.archive-visibility-toggle { min-width:58px;height:38px;padding:0 10px;border:1px solid rgba(49,190,112,.17);border-radius:7px;background:rgba(255,255,255,.025);color:#819087;cursor:pointer;font-family:monospace;font-size:.58rem;letter-spacing:.9px;transition:.2s ease; }
.archive-visibility-toggle:hover { color:#fff;border-color:rgba(49,190,112,.38);background:rgba(49,190,112,.055); }

.staff-profile-actions button[data-staff-action="spy"] { border-color:rgba(142,91,255,.28);color:#c4a8ff;background:rgba(97,47,170,.06); }
.staff-profile-actions button[data-staff-action="spy"]:hover { border-color:rgba(164,116,255,.52);color:#e0d1ff; }

@media (max-width:980px){.profile-stat-grid-v4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){
    .profile-stat-grid-v4{grid-template-columns:1fr 1fr!important}
    .archive-code-row{grid-template-columns:24px minmax(0,1fr) auto!important}
    .archive-code-row #archiveUnlockButton{grid-column:1/-1;width:100%;margin:0}
    .server-access-actions{display:grid;grid-template-columns:1fr}
    .server-access-actions .button{width:100%}
}
@media (max-width:430px){.profile-stat-grid-v4{grid-template-columns:1fr!important}.archive-visibility-toggle{min-width:52px;padding:0 7px}}


/* ======================================================
   SABIS PUBLISH QUICK FIX 2 — VOID MEMORY ARCHIVE
   Richer profile presentation + reliable Nexus key reveal
====================================================== */

/* The four normal account stats stay compact; the Void Memory Archive becomes a full-width system panel. */
.profile-stat-grid-v4 {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.memory-profile-stat {
    --memory-progress: 0%;
    grid-column: 1 / -1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 222px;
    padding: 0 !important;
    border: 1px solid rgba(157,92,255,.24) !important;
    border-radius: 17px !important;
    background:
        radial-gradient(circle at 13% 15%,rgba(183,99,255,.16),transparent 26%),
        radial-gradient(circle at 83% 78%,rgba(79,34,122,.20),transparent 34%),
        linear-gradient(135deg,rgba(27,9,40,.88),rgba(4,8,8,.96) 46%,rgba(14,5,24,.93)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.018),
        inset 0 0 70px rgba(126,57,185,.075),
        0 20px 55px rgba(0,0,0,.22);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.memory-profile-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .26;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(182,111,255,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(182,111,255,.04) 1px,transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to right,rgba(0,0,0,.88),transparent 86%);
}

.memory-profile-stat::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -235px;
    top: -245px;
    z-index: -1;
    border: 1px solid rgba(190,123,255,.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 31px rgba(156,83,220,.025),
        0 0 0 70px rgba(156,83,220,.018),
        0 0 110px rgba(135,59,204,.12);
}

.memory-profile-stat.memory-unlocked {
    border-color: rgba(183,112,255,.42) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        inset 0 0 78px rgba(129,50,197,.10),
        0 0 36px rgba(109,45,173,.08),
        0 20px 55px rgba(0,0,0,.22);
}

.memory-profile-stat.memory-complete {
    border-color: rgba(205,161,255,.65) !important;
    box-shadow:
        inset 0 0 0 1px rgba(226,202,255,.08),
        inset 0 0 92px rgba(152,73,222,.14),
        0 0 42px rgba(142,65,214,.16),
        0 20px 55px rgba(0,0,0,.24);
}

.memory-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.memory-ambient i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c799ff;
    box-shadow: 0 0 14px rgba(199,153,255,.9);
    opacity: .36;
    animation: memoryDrift 5.8s ease-in-out infinite alternate;
}
.memory-ambient i:nth-child(1){left:9%;top:69%;animation-delay:-1.6s}
.memory-ambient i:nth-child(2){left:54%;top:18%;animation-delay:-3.1s}
.memory-ambient i:nth-child(3){right:8%;bottom:17%;animation-delay:-4.4s}

.memory-profile-head,
.memory-vault-track,
.memory-profile-footer {
    position: relative;
    z-index: 2;
}

.memory-profile-head {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    gap: 15px;
    align-items: center;
    padding: 20px 22px 15px;
}

.memory-sigil {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(183,112,255,.34);
    border-radius: 50%;
    color: #bb78ff;
    background:
        radial-gradient(circle,rgba(174,95,255,.14),rgba(61,24,88,.08) 46%,transparent 48%),
        rgba(11,5,17,.55);
    box-shadow: inset 0 0 24px rgba(163,79,233,.12),0 0 24px rgba(125,55,189,.10);
}
.memory-sigil::before,.memory-sigil::after {
    content:"";
    position:absolute;
    border:1px solid rgba(184,119,255,.20);
    border-radius:50%;
}
.memory-sigil::before{inset:7px;transform:rotate(24deg)}
.memory-sigil::after{inset:14px;border-style:dashed;animation:memoryOrbit 9s linear infinite}
.memory-sigil span { position:relative;z-index:2;font-size:1.25rem;text-shadow:0 0 14px rgba(196,139,255,.65); }

.memory-profile-copy { min-width:0; }
.memory-profile-copy > span {
    display: block;
    color: #a77bc9 !important;
    font-family: monospace;
    font-size: .54rem !important;
    font-weight: 900;
    letter-spacing: 2.1px !important;
}
.memory-profile-copy > strong {
    display: block;
    margin-top: 5px !important;
    color: #d8b7ff !important;
    font-family: "Space Grotesk",sans-serif;
    font-size: 1.16rem !important;
    letter-spacing: .25px;
    text-shadow: 0 0 18px rgba(171,100,239,.20);
}
.memory-profile-copy > strong em { color:#725987;font-size:.72em;font-style:normal;font-weight:700; }
.memory-profile-copy > small {
    display: block;
    margin-top: 4px !important;
    color: #766a80 !important;
    font-family: monospace;
    font-size: .53rem !important;
    letter-spacing: 1px !important;
}

.memory-state-badge {
    justify-self: end;
    padding: 7px 10px;
    border: 1px solid rgba(143,100,176,.22);
    border-radius: 999px;
    color: #846f94;
    background: rgba(38,20,49,.32);
    font-family: monospace;
    font-size: .49rem;
    font-weight: 900;
    letter-spacing: 1.35px;
    white-space: nowrap;
}
.memory-unlocked .memory-state-badge {
    color:#ca9cff;
    border-color:rgba(183,112,255,.34);
    background:rgba(129,56,188,.10);
    box-shadow:0 0 20px rgba(146,72,214,.08);
}
.memory-complete .memory-state-badge {
    color:#ead8ff;
    border-color:rgba(221,186,255,.48);
    background:rgba(164,91,225,.15);
}

.memory-vault-track {
    margin: 1px 22px 0;
    padding: 19px 15px 14px;
    border: 1px solid rgba(173,105,236,.10);
    border-radius: 12px;
    background: linear-gradient(180deg,rgba(0,0,0,.20),rgba(74,29,104,.05));
}

.memory-vault-line {
    position: absolute;
    left: 7.5%;
    right: 7.5%;
    top: 38px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(154,110,184,.12);
}
.memory-vault-line i {
    display: block;
    width: var(--memory-progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#7541a7,#ba72ff,#ddbcff);
    box-shadow: 0 0 15px rgba(182,104,255,.48);
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}

.memory-node-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 9px;
}

.memory-node {
    position: relative;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #594e60;
}
.memory-node b {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(129,104,146,.17);
    border-radius: 9px;
    background: rgba(8,6,10,.84);
    color: #5d5363;
    font-family: monospace;
    font-size: .54rem;
    letter-spacing: .6px;
    transition: .3s ease;
}
.memory-node i {
    color:#5b4d65;
    font-style:normal;
    font-size:.7rem;
    opacity:.75;
    transition:.3s ease;
}
.memory-node.recovered b {
    color:#dfc2ff;
    border-color:rgba(187,112,255,.48);
    background:radial-gradient(circle,rgba(173,91,242,.18),rgba(16,7,24,.92));
    box-shadow:0 0 16px rgba(157,77,225,.12),inset 0 0 16px rgba(157,77,225,.06);
}
.memory-node.recovered i { color:#c987ff;opacity:1;text-shadow:0 0 12px rgba(196,127,255,.7); }
.memory-node.next b {
    border-color:rgba(154,104,194,.30);
    color:#8d729e;
    animation:memoryNextPulse 1.8s ease-in-out infinite;
}
.memory-node.next i { color:#80618f; }

.memory-profile-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding: 12px 22px 17px;
}
.memory-profile-footer span,
.memory-profile-footer strong {
    font-family: monospace;
    font-size: .49rem;
    letter-spacing: 1.15px;
}
.memory-profile-footer span { color:#514858; }
.memory-profile-footer strong { color:#766282;font-weight:800;text-align:right; }
.memory-unlocked .memory-profile-footer strong { color:#a67ac8; }
.memory-complete .memory-profile-footer strong { color:#d9b9fa;text-shadow:0 0 13px rgba(194,128,255,.28); }

.memory-lock-icon {
    display:inline-grid !important;
    place-items:center;
    margin-right:6px !important;
    transform:none !important;
    color:#776782;
    font-style:normal;
}

@keyframes memoryOrbit { to{transform:rotate(360deg)} }
@keyframes memoryDrift { from{transform:translateY(-4px);opacity:.18} to{transform:translateY(8px);opacity:.55} }
@keyframes memoryNextPulse { 50%{box-shadow:0 0 0 4px rgba(153,92,205,.04),0 0 18px rgba(157,91,216,.10)} }

/* Reliable Restricted Archive SHOW/HIDE behavior. The older text-security rule kept text visually masked even after type=text. */
#archiveCode.nexus-key-input[type="password"] {
    -webkit-text-security: disc !important;
    text-security: disc !important;
}
#archiveCode.nexus-key-input[type="text"],
#archiveCode.nexus-key-input.archive-key-visible {
    -webkit-text-security: none !important;
    text-security: none !important;
}
.archive-visibility-toggle[aria-pressed="true"] {
    color:#d9ffe6;
    border-color:rgba(49,190,112,.48);
    background:rgba(49,190,112,.09);
    box-shadow:inset 0 0 18px rgba(49,190,112,.04);
}

@media (max-width:980px){
    .profile-stat-grid-v4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .memory-profile-stat{grid-column:1/-1}
}
@media (max-width:700px){
    .memory-profile-head{grid-template-columns:48px minmax(0,1fr);padding:17px 16px 13px}
    .memory-sigil{width:46px;height:46px}
    .memory-state-badge{grid-column:1/-1;justify-self:start;margin-left:63px;margin-top:-7px}
    .memory-vault-track{margin:0 16px;padding:16px 10px 12px;overflow-x:auto}
    .memory-node-grid{min-width:500px;gap:7px}
    .memory-vault-line{left:35px;right:35px;top:35px;min-width:430px}
    .memory-profile-footer{padding:11px 16px 15px;align-items:flex-start;flex-direction:column}
    .memory-profile-footer strong{text-align:left}
}
@media (max-width:430px){
    .profile-stat-grid-v4{grid-template-columns:1fr!important}
    .memory-profile-copy>strong{font-size:1rem!important}
}

/* ======================================================
   SABIS WEBSITE V8 — STATUS + SITE EDITOR + POWER CONTROL
====================================================== */
.server-status-text{
    position:relative;display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;
    width:min(420px,100%);padding:12px 16px 11px;border:1px solid currentColor;border-radius:10px;
    background:linear-gradient(100deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 12px 35px rgba(0,0,0,.16);
    font-family:"Space Grotesk",sans-serif;letter-spacing:1.4px;text-transform:uppercase;overflow:hidden;
}
.server-status-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:.55;transform-origin:left;animation:sabisStatusScan 2.8s ease-in-out infinite}
.server-status-text .status-beacon{grid-row:1/3;font-style:normal;font-size:1.05rem;filter:drop-shadow(0 0 7px currentColor);animation:sabisStatusPulse 1.7s ease-in-out infinite}
.server-status-text span{font-size:.82rem;font-weight:900;line-height:1.1}
.server-status-text small{color:#819087;font-family:monospace;font-size:.52rem;font-weight:700;letter-spacing:1px;line-height:1.2}
.server-status-text.status-online{background:linear-gradient(100deg,rgba(49,190,112,.11),rgba(49,190,112,.015))}
.server-status-text.status-development{background:linear-gradient(100deg,rgba(215,170,88,.12),rgba(215,170,88,.015))}
.server-status-text.status-maintenance{background:linear-gradient(100deg,rgba(255,115,139,.12),rgba(255,115,139,.015))}
@keyframes sabisStatusPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes sabisStatusScan{0%,100%{transform:scaleX(.18);opacity:.28}50%{transform:scaleX(1);opacity:.7}}

.power-control-card{grid-column:1/-1;border-color:rgba(164,140,255,.18)!important;background:linear-gradient(120deg,rgba(118,89,225,.055),rgba(255,255,255,.012))!important}
.power-control-card p{margin:0;color:#7f8d84;font-size:.66rem;line-height:1.55}
.server-power-state{padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#040806;color:#68776e;font-family:monospace;font-size:.6rem;letter-spacing:1px}
.server-power-state b{color:#c5b9ff}

.site-editing-launch{border-color:rgba(164,140,255,.22);background:linear-gradient(125deg,rgba(117,88,220,.05),rgba(255,255,255,.012))}
.site-editor-overlay{padding:60px 18px 26px;overflow-y:auto;z-index:52000}
.site-editor-modal{position:relative;width:min(1120px,96vw);margin:auto;padding:26px;border:1px solid rgba(164,140,255,.24);border-radius:22px;background:linear-gradient(145deg,rgba(8,11,14,.99),rgba(3,7,5,.99));box-shadow:0 28px 90px rgba(0,0,0,.52)}
.site-editor-x{position:absolute;top:16px;right:16px;z-index:4;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(164,140,255,.32);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;font-size:1.45rem;line-height:1;cursor:pointer;transition:.18s ease}
.site-editor-x:hover{border-color:rgba(164,140,255,.7);background:rgba(164,140,255,.1);transform:scale(1.05)}
.site-editor-head{padding-right:56px}
.site-editor-head{padding-bottom:18px;border-bottom:1px solid var(--border)}
.site-editor-head span,.site-editor-copy>span{color:#a48cff;font-size:.57rem;font-weight:900;letter-spacing:1.8px}
.site-editor-head h2{margin-top:5px;font-family:"Space Grotesk",sans-serif;font-size:clamp(2.35rem,5vw,3.8rem);letter-spacing:-2px}
.site-editor-head p,.site-editor-copy p{margin-top:6px;color:#7c8a82;font-size:.68rem;line-height:1.6}
.site-editor-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.site-editor-tabs button{padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.02);color:#78877f;font-size:.57rem;font-weight:900;letter-spacing:1px;cursor:pointer}
.site-editor-tabs button.active{border-color:rgba(164,140,255,.5);color:#d7ceff;background:rgba(164,140,255,.08);box-shadow:0 0 22px rgba(128,92,230,.08)}
.site-editor-panel{padding:18px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.012)}
.site-editor-copy h3{margin-top:4px;font-size:1rem}
.site-player-count-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:16px}
.site-player-count-form label{display:grid;gap:6px;color:#75847b;font-size:.56rem;font-weight:800;letter-spacing:1px}
.site-player-count-form input{width:100%;padding:12px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.03);color:white}
.site-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:16px}
.site-image-card{display:grid;grid-template-columns:132px 1fr;gap:13px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:11px;background:#040806;min-width:0}
.site-image-preview{height:78px;border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden;background:#020403}
.site-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.site-image-card>div:last-child{min-width:0}.site-image-card span{display:block;color:#68776e;font-size:.51rem;font-weight:900;letter-spacing:1.2px}.site-image-card strong{display:block;margin:4px 0 9px;font-size:.75rem}
.site-image-upload{display:inline-flex;cursor:pointer}.site-image-upload input{position:absolute;opacity:0;pointer-events:none}.site-image-upload b{padding:7px 9px;border:1px solid rgba(164,140,255,.28);border-radius:7px;color:#c9bcff;background:rgba(164,140,255,.055);font-size:.52rem;letter-spacing:.8px}
.site-editor-result{display:none;margin-top:12px;padding:11px;border:1px solid var(--border);border-radius:8px;color:#91a098;font-size:.65rem}.site-editor-result.show{display:block}.site-editor-result.success{color:#b7ffd0;border-color:rgba(49,190,112,.25)}.site-editor-result.error{color:#ff9ab2;border-color:rgba(255,91,132,.25)}
@media(max-width:760px){.site-editor-overlay{padding:58px 7px 14px}.site-editor-modal{width:100%;padding:16px}.site-image-grid{grid-template-columns:1fr}.site-image-card{grid-template-columns:105px 1fr}.site-player-count-form{grid-template-columns:1fr}.server-status-text{width:100%}}

/* V8 final: destructive player wipe mode buttons */
.wipe-mode-actions{align-items:stretch;}
.wipe-mode-actions .button{flex:1 1 220px;}


/* ==========================================================
   V8 // SABIS PULSE MINECRAFT SCREEN BROADCAST EDITOR
========================================================== */
#staffAnnouncementForm.announcement-editor-form { display:grid;gap:14px; }
.announcement-text-field { display:grid;gap:7px; }
.announcement-text-field > span,.announcement-style-row label > span { color:#6f8377;font-size:.58rem;font-weight:900;letter-spacing:1.5px; }
.announcement-style-row { display:grid;grid-template-columns:minmax(130px,.55fr) minmax(210px,1fr) auto auto;gap:10px;align-items:end; }
.announcement-style-row > label:not(.staff-check) { display:grid;gap:7px; }
.announcement-style-row input[type="color"] { width:100%;height:44px;padding:4px;border:1px solid var(--border);border-radius:10px;background:#071009;cursor:pointer; }
.announcement-style-row .staff-check.compact { min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.018);display:flex;align-items:center;gap:7px;white-space:nowrap; }
.announcement-style-row .staff-check.compact span { color:#9aac9f;font-size:.58rem;letter-spacing:1px; }
.announcement-font-note { color:#59695f;font-size:.62rem;line-height:1.55; }
.announcement-font-note b { color:#9aac9f; }
.announcement-screen-preview { position:relative;min-height:190px;padding:28px 24px;border:1px solid rgba(108,255,160,.18);border-radius:15px;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(49,190,112,.09),transparent 44%),linear-gradient(180deg,#06100a,#020604);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.announcement-screen-preview::before { content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent); }
.announcement-screen-preview > small { position:absolute;top:13px;left:15px;color:#4d6255;font-family:monospace;font-size:.56rem;letter-spacing:1.5px; }
.announcement-screen-preview strong,.announcement-screen-preview span { position:relative;z-index:1;max-width:92%;word-break:break-word;text-shadow:0 2px 8px rgba(0,0,0,.85); }
.announcement-screen-preview strong { font-size:clamp(2rem,4vw,3.3rem);line-height:1;font-family:"Space Grotesk",sans-serif; }
.announcement-screen-preview span { margin-top:12px;font-size:clamp(.85rem,1.5vw,1.15rem);line-height:1.2;color:#b8c7bd; }
@media (max-width:760px){ .announcement-style-row { grid-template-columns:1fr 1fr; } .announcement-style-row .staff-check.compact { justify-content:center; } }

/* ==========================================================
   V8 ROLE TEST MODE + GRANULAR STAFF ROLES
========================================================== */

.role-test-banner{
    position:fixed;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    z-index:70000;
    width:min(760px,calc(100vw - 28px));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 14px 12px 18px;
    border:1px solid rgba(172,126,255,.42);
    border-radius:16px;
    background:linear-gradient(135deg,rgba(20,10,35,.97),rgba(8,12,17,.97));
    box-shadow:0 16px 50px rgba(0,0,0,.42),0 0 30px rgba(137,86,255,.12);
    backdrop-filter:blur(18px);
}
.role-test-banner.hidden{display:none!important;}
.role-test-banner>div{min-width:0;display:grid;gap:2px;}
.role-test-banner span{
    color:#b99aff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
}
.role-test-banner strong{
    color:#fff;
    font-size:15px;
    letter-spacing:.04em;
}
.role-test-banner small{
    color:#aeb9b2;
    font-size:10px;
    letter-spacing:.06em;
    white-space:normal;
}
.role-test-banner .button{flex:0 0 auto;min-height:38px;padding:0 14px;font-size:10px;}

.staff-role-access{
    background:linear-gradient(135deg,rgba(16,23,20,.88),rgba(13,10,22,.82));
}
.staff-permission-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}
.staff-permission-list span{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 10px;
    border:1px solid rgba(130,255,183,.18);
    border-radius:999px;
    background:rgba(116,255,169,.06);
    color:#d7ffe5;
    font-size:10px;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.staff-permission-list span.muted{
    border-style:dashed;
    border-color:rgba(190,198,194,.18);
    background:rgba(255,255,255,.025);
    color:#95a39b;
}
.role-test-panel{
    border-color:rgba(170,125,255,.28)!important;
    background:linear-gradient(135deg,rgba(35,20,55,.48),rgba(8,15,12,.82));
}
.role-test-controls{
    display:grid;
    grid-template-columns:minmax(190px,1fr) auto auto;
    gap:10px;
    align-items:end;
    margin-top:16px;
}
.role-test-controls label{display:grid;gap:7px;}
.role-test-controls label>span{
    color:#a99aba;
    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
}
.role-test-controls select{
    width:100%;
    min-height:44px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;
    background:#0c1210;
    color:#f6fff8;
    padding:0 12px;
    font:inherit;
}
.role-test-controls .button{min-height:44px;}

@media(max-width:720px){
    .role-test-banner{top:8px;align-items:flex-start;}
    .role-test-banner small{display:none;}
    .role-test-controls{grid-template-columns:1fr;}
    .role-test-controls .button{width:100%;}
}


/* ==========================================================
   V8.1 STAFF RECORDINGS + ANNOUNCEMENT SPLIT
========================================================== */
.hidden-copy{display:none!important;}
.preview-hidden{display:none!important;}
.compact-announcement-preview{min-height:168px!important;justify-content:flex-start!important;padding-top:50px!important;}
.compact-announcement-preview strong{font-size:clamp(1.65rem,3.2vw,2.65rem)!important;line-height:.96!important;}
.compact-announcement-preview span{margin-top:8px!important;font-size:clamp(.78rem,1.25vw,1rem)!important;}
.admin-abuse-preview{background:radial-gradient(circle at 50% 38%,rgba(145,74,255,.13),transparent 45%),linear-gradient(180deg,#0b0710,#030205)!important;border-color:rgba(180,120,255,.24)!important;}
.staff-recordings-list{display:grid;gap:10px;margin-top:14px;}
.staff-recording-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid rgba(108,255,160,.14);border-radius:14px;background:rgba(4,12,8,.72);}
.staff-recording-row>div:first-child{display:grid;gap:4px;min-width:0;}
.staff-recording-row span,.staff-recording-row small{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7e9587;font-size:.68rem;letter-spacing:.06em;overflow-wrap:anywhere;}
.staff-recording-row h4{margin:0;color:#f2fff6;font-size:1rem;}
.staff-recording-actions{display:flex;gap:8px;flex:0 0 auto;}
@media(max-width:720px){.staff-recording-row{align-items:flex-start;flex-direction:column}.staff-recording-actions{width:100%}.staff-recording-actions .button{width:100%}}


/* SABIS V8 // STAFF MATRIX + LIVE PLAYER STATUS + COMMUNITY SOCIALS */
.support-social-actions{margin-top:24px;display:grid;grid-template-columns:1fr;gap:8px;width:100%;}
.support-social-actions .button{width:100%;text-align:center;justify-content:center;}
.staff-live-status{margin:12px 0 15px;padding:12px;border:1px solid rgba(108,255,160,.12);border-radius:10px;background:rgba(0,0,0,.16);}
.staff-live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.staff-live-head strong{font-size:.58rem;letter-spacing:.12em;color:#a5b8ac;}
.staff-live-head button{border:0;background:transparent;color:var(--green-bright);font-size:.54rem;font-weight:900;cursor:pointer;}
.staff-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.staff-live-badge{min-width:0;padding:7px 8px;border:1px solid var(--border);border-radius:7px;display:grid;gap:2px;color:#c2cec6;font-size:.61rem;overflow-wrap:anywhere;}
.staff-live-badge b{font-size:.47rem;letter-spacing:.08em;color:#6f8175;}
.staff-live-badge.good{border-color:rgba(49,190,112,.28);color:#86f7b2;}
.staff-live-badge.bad{border-color:rgba(255,91,132,.27);color:#ff94ae;}
.staff-live-badge.unknown{color:#8b978f;}
.staff-live-loading,.staff-live-error,.staff-live-recording{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.59rem;color:#77877d;}
.staff-live-error{color:#ff8ca9;}
.staff-live-recording{display:block;margin-top:9px;color:#c3a3ff;}
@media(max-width:760px){.staff-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:430px){.staff-live-grid{grid-template-columns:1fr;}}


/* V8 MEMORY UPDATE // unlocked node hover story */
.memory-node.recovered{position:relative;cursor:help;}
.memory-node.recovered[data-memory-story]::after{
    content:attr(data-memory-story);
    position:absolute;
    left:50%;
    bottom:calc(100% + 12px);
    transform:translate(-50%,8px);
    width:min(290px,72vw);
    padding:10px 12px;
    border:1px solid rgba(226,93,255,.44);
    border-radius:10px;
    background:rgba(16,5,28,.96);
    box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 24px rgba(190,55,255,.14);
    color:#f6eaff;
    font-size:12px;
    line-height:1.45;
    letter-spacing:.02em;
    text-transform:none;
    white-space:normal;
    opacity:0;
    pointer-events:none;
    transition:opacity .45s ease,transform .45s ease;
    z-index:30;
}
.memory-node.recovered[data-memory-story]:hover::after,
.memory-node.recovered[data-memory-story]:focus-visible::after{opacity:1;transform:translate(-50%,0);}

/* ==========================================================
   SABIS WEBSITE V9 — RESPONSIVE / PULSE / MEMORY POLISH
========================================================== */
html,body{width:100%;max-width:100%;}
img,video,canvas,svg{max-width:100%;}

/* SABIS Pulse now reflects the appearance selected in Staff Console. */
#pulseTitle,#pulseMessage{transition:color .2s ease,font-weight .2s ease,font-style .2s ease;overflow-wrap:anywhere;}

/* Community card: prevent the social action wrapper from inheriting the generic
   support-card > div 44x44 icon box, which caused TikTok to spill outside the card. */
.discord-card>.support-social-actions{
    width:100%!important;height:auto!important;min-height:0!important;
    margin:24px 0 0!important;padding:0!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;
    place-items:stretch!important;border:0!important;border-radius:0!important;
    color:inherit!important;background:transparent!important;
}
.discord-card>.support-social-actions .button{min-width:0;width:100%;height:auto;min-height:48px;padding:12px 14px;line-height:1.15;white-space:normal;}
.discord-card{height:auto!important;min-height:270px;}

/* Click-to-read Void Memory archive. Hover tooltips are disabled in V9 because
   touch devices and some browsers handled them inconsistently. */
.memory-node.recovered{cursor:pointer!important;touch-action:manipulation;}
.memory-node.recovered[data-memory-story]::after{display:none!important;content:none!important;}
.memory-node.recovered.selected{
    border-color:rgba(220,112,255,.7)!important;
    background:radial-gradient(circle at 50% 45%,rgba(194,95,255,.22),rgba(87,40,110,.1))!important;
    box-shadow:0 0 0 2px rgba(206,112,255,.08),0 0 20px rgba(182,75,255,.16);
}
.memory-story-panel{
    display:grid;gap:7px;margin-top:14px;padding:13px 14px;
    border:1px solid rgba(197,113,255,.18);border-radius:11px;
    background:linear-gradient(120deg,rgba(130,61,177,.08),rgba(255,255,255,.012));
}
.memory-story-panel span{color:#bc91e8;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.55rem;font-weight:900;letter-spacing:1.35px;}
.memory-story-panel p{margin:0;color:#a6b1aa;font-size:.68rem;line-height:1.6;overflow-wrap:anywhere;}
.memory-story-panel.open{border-color:rgba(211,114,255,.34);}

/* Admin Abuse preview mirrors the V9 in-game presentation: compact top header,
   larger centered signed message. */
.admin-abuse-preview{padding-top:30px!important;justify-content:flex-start!important;}
.admin-abuse-preview>strong{font-size:clamp(.78rem,1.25vw,1.05rem)!important;letter-spacing:1.4px!important;line-height:1.1!important;text-transform:uppercase;margin-top:10px;}
.admin-abuse-preview>span{margin-top:34px!important;font-size:clamp(1.15rem,2.5vw,1.9rem)!important;font-weight:700!important;line-height:1.15!important;}

/* Tablet / iPad refinement */
@media (max-width:1180px){
    .shell{width:min(94%,1040px);}
    .navbar{padding-left:max(3.25%,env(safe-area-inset-left));padding-right:max(3.25%,env(safe-area-inset-right));}
    .staff-console{width:min(96vw,980px);}
    .staff-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .pulse-grid{grid-template-columns:1fr 1fr;}
    .pulse-primary{grid-column:1/-1;grid-row:auto;}
    .support-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:900px){
    :root{--nav:70px;}
    .navbar{gap:10px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
    .brand{min-width:0;flex:0 1 auto;}
    .brand>div{min-width:0;}
    .brand strong,.brand span{white-space:nowrap;}
    .nav-actions{gap:6px;min-width:0;}
    .profile-shortcut,.staff-shortcut{height:38px;padding:0 10px;min-width:0;}
    .hero-content{width:min(92%,760px);}
    .hero h1{max-width:100%;overflow-wrap:normal;}
    .section .shell{padding-top:78px;padding-bottom:78px;}
    .support-card,.game-panel{min-height:0;height:auto;}
    .staff-overlay{padding:calc(var(--nav) + 8px) 10px 12px!important;align-items:flex-start!important;overflow-y:auto!important;}
    .staff-console{width:100%!important;max-width:100%!important;max-height:none!important;margin:0!important;border-radius:16px!important;padding:18px!important;overflow-x:hidden!important;}
    .staff-console-head{position:relative;gap:12px;}
    .staff-console-head h2{font-size:clamp(2rem,8vw,3.25rem)!important;line-height:1;}
    .staff-panel{min-width:0;overflow:hidden;}
    .staff-profile-card,.owner-tool-card{min-width:0;}
    .announcement-style-row{grid-template-columns:1fr 1fr!important;}
    .announcement-style-row .staff-check.compact{min-width:0;}
    .staff-audit>div{grid-template-columns:1fr;gap:3px;}
}

@media (max-width:720px){
    :root{--nav:66px;}
    body{font-size:15px;}
    .navbar{height:var(--nav);padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}
    .brand-logo-frame{width:39px!important;height:39px!important;flex-basis:39px!important;}
    .brand>div{display:none!important;}
    .nav-actions{margin-left:auto;}
    .profile-shortcut{max-width:112px;}
    .profile-shortcut span{max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .staff-shortcut{display:flex;align-items:center;justify-content:center;padding:0 9px;font-size:.56rem;letter-spacing:.7px;}
    .staff-shortcut.hidden{display:none!important;}
    .mobile-menu{flex:0 0 38px;display:block;}
    .nav-links.open{top:var(--nav);padding:18px 14px max(22px,env(safe-area-inset-bottom));max-height:calc(100svh - var(--nav));overflow-y:auto;}

    .hero{min-height:100svh;padding-top:var(--nav);overflow:hidden;}
    .hero-content{width:min(92%,560px);padding-left:0;padding-right:0;}
    .hero h1{font-size:clamp(3rem,15vw,5rem)!important;line-height:.93!important;letter-spacing:-3px!important;}
    .hero p{font-size:.92rem;line-height:1.65;}
    .hero-buttons{width:100%;}
    .hero-buttons .button{width:100%;min-height:52px;justify-content:center;}

    .shell{width:92%!important;padding:64px 0!important;}
    .wide-heading h2,.section-heading h2{font-size:clamp(2.25rem,11vw,3.7rem)!important;letter-spacing:-2px;}
    .support-grid,.feature-grid,.worker-grid,.realm-navigation,.connection-grid,.final-connect{grid-template-columns:1fr!important;}
    .support-card{padding:21px;}
    .discord-card>.support-social-actions{grid-template-columns:1fr!important;}

    .profile-overlay,.staff-overlay,.trial-overlay,.form-overlay,.documentary-overlay{padding-left:6px!important;padding-right:6px!important;}
    .profile-modal-v4,.staff-console,.trial-modal,.form-modal{width:100%!important;max-width:100%!important;border-radius:14px!important;}
    .profile-stat-grid-v4{grid-template-columns:1fr 1fr!important;}
    .profile-id-card-v4{grid-template-columns:auto 1fr!important;}
    .profile-verified-stamp{grid-column:1/-1;justify-self:start;}
    .memory-vault-track{overflow-x:auto;padding-bottom:4px;overscroll-behavior-x:contain;}
    .memory-node-grid{min-width:0!important;width:100%;grid-template-columns:repeat(4,minmax(46px,1fr))!important;gap:7px!important;}
    .memory-node{min-width:0!important;}
    .memory-story-panel{padding:12px;}

    .staff-stat-grid{grid-template-columns:1fr 1fr!important;}
    .staff-search{grid-template-columns:1fr!important;}
    .staff-search .button{width:100%;}
    .staff-profile-actions{grid-template-columns:1fr 1fr!important;display:grid!important;}
    .owner-tool-grid{grid-template-columns:1fr!important;}
    .announcement-style-row{grid-template-columns:1fr!important;}
    .announcement-style-row .staff-check.compact{justify-content:flex-start!important;}
    .announcement-screen-preview{min-height:160px;padding-left:14px;padding-right:14px;}
    .staff-result{left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));}
}

@media (max-width:480px){
    .navbar{gap:5px;padding-left:9px;padding-right:9px;}
    .profile-shortcut{padding:0 8px;max-width:92px;}
    .profile-shortcut span{max-width:60px;font-size:.55rem;}
    .staff-shortcut{padding:0 7px;font-size:.51rem;}
    .mobile-menu{width:34px;height:38px;flex-basis:34px;}
    .hero-content{width:94%;}
    .hero h1{font-size:clamp(2.85rem,16vw,4.35rem)!important;letter-spacing:-2.8px!important;}
    .profile-stat-grid-v4,.staff-stat-grid{grid-template-columns:1fr!important;}
    .staff-profile-actions{grid-template-columns:1fr!important;}
    .memory-node-grid{grid-template-columns:repeat(4,minmax(40px,1fr))!important;}
    .memory-node b{font-size:.58rem;}
    .staff-console{padding:12px!important;}
    .staff-panel{padding:11px!important;}
    .staff-console-head h2{font-size:2.15rem!important;}
}