/* =========================================================
   JEDI ARCHIVES
   GLOBAL STYLESHEET
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --bg: #02080d;
    --bg-light: #06131b;
    --panel: rgba(5, 18, 26, 0.82);

    --blue: #35d8ff;
    --blue-dark: #087d9d;

    --gold: #e8ad3d;

    --white: #eefaff;
    --muted: #7895a4;

    --red: #ff405d;
    --green: #4dff85;

    --border: rgba(70, 190, 230, 0.22);

    --font-display: 'Barlow Condensed', sans-serif;
    --font-mono: 'Space Mono', monospace;

}


/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(13, 68, 94, 0.18),
            transparent 40%
        ),
        #02080d;

    color: var(--white);

    font-family: var(--font-display);

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

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


/* =========================================================
   STARFIELD
   ========================================================= */

.global-stars,
.global-stars-small {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: -5;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.75) 1px,
            transparent 1px
        );

    background-size: 90px 90px;

    opacity: .25;
}

.global-stars-small {

    background-size: 43px 43px;

    opacity: .12;

    transform: translate3d(0,0,0);
}


/* =========================================================
   SCANLINES
   ========================================================= */

.scanlines {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 1000;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 3px,
            rgba(50,200,255,.015) 4px
        );
}


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

.main-header {

    height: 74px;

    padding: 0 4vw;

    border-bottom: 1px solid rgba(60,150,190,.2);

    background: rgba(2,8,13,.88);

    backdrop-filter: blur(12px);

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: sticky;

    top: 0;

    z-index: 500;
}


.brand {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 180px;
}

.brand-symbol {

    color: var(--gold);

    font-size: 27px;

    text-shadow:
        0 0 15px var(--gold);
}

.brand-text {

    font-family: var(--font-mono);

    font-size: 12px;

    letter-spacing: 3px;

    line-height: 1.1;
}

.brand-text strong {
    color: var(--blue);
}


.main-nav {

    display: flex;

    height: 100%;

    align-items: stretch;

    gap: 3px;
}

.main-nav a {

    display: flex;

    align-items: center;

    padding: 0 15px;

    color: #73909e;

    font-family: var(--font-mono);

    font-size: 10px;

    letter-spacing: 1px;

    position: relative;

    transition: .25s ease;
}

.main-nav a span {

    color: var(--gold);

    margin-right: 6px;

    font-size: 8px;
}

.main-nav a:hover,
.main-nav a.active {

    color: var(--white);
}

.main-nav a.active::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 10px;

    right: 10px;

    height: 2px;

    background: var(--blue);

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


.header-status {

    font-family: var(--font-mono);

    font-size: 9px;

    letter-spacing: 1.5px;

    color: #7895a4;

    min-width: 160px;

    text-align: right;
}

.status-dot {

    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4dff85;

    box-shadow:
        0 0 10px #4dff85;

    margin-right: 7px;
}


/* =========================================================
   GENERAL
   ========================================================= */

.page {

    width: min(1140px, 90%);

    margin: auto;

    padding: 75px 0 100px;
}

.eyebrow,
.section-label {

    color: var(--gold);

    font-family: var(--font-mono);

    font-size: 10px;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

h1,
h2,
h3 {

    font-weight: 600;
}

h1 {

    font-size: clamp(55px, 7vw, 92px);

    line-height: .86;

    letter-spacing: -2px;
}

h1 span {

    color: transparent;

    -webkit-text-stroke: 1px var(--blue);

    text-shadow:
        0 0 20px rgba(53,216,255,.25);
}

h2 {

    font-size: 38px;

    letter-spacing: 1px;
}

p {

    color: var(--muted);

    line-height: 1.6;
}


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

.btn {

    border: 1px solid;

    padding: 14px 19px;

    background: rgba(5,18,26,.7);

    color: var(--white);

    font-family: var(--font-mono);

    font-size: 10px;

    letter-spacing: 1px;

    transition: .25s ease;

    position: relative;

    overflow: hidden;
}

.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 0 25px rgba(53,216,255,.15);
}

.btn-primary {

    border-color: var(--blue);

    color: #bceeff;
}

.btn-gold {

    border-color: var(--gold);

    color: var(--gold);
}

.btn-danger {

    border-color: var(--red);

    color: #ff8799;
}


/* =========================================================
   HOME
   ========================================================= */

.home-hero {

    min-height: 540px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;
}

.hero-copy {

    max-width: 570px;
}

.hero-title {

    margin-bottom: 25px;
}

.hero-description {

    max-width: 500px;

    font-size: 17px;

    margin-bottom: 28px;
}

.hero-buttons {

    display: flex;

    gap: 8px;
}


.holocron-display {

    height: 430px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}

.holocron {

    position: relative;

    width: 150px;

    height: 90px;

    filter:
        drop-shadow(0 0 30px var(--blue));

    transform:
        perspective(500px)
        rotateX(20deg)
        rotateZ(-8deg);

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

.holocron-top {

    position: absolute;

    width: 125px;
    height: 60px;

    top: 0;
    left: 13px;

    border: 2px solid var(--blue);

    background: rgba(26,150,190,.18);

    transform:
        skewX(-25deg)
        rotateX(50deg);
}

.holocron-body {

    position: absolute;

    width: 125px;
    height: 50px;

    bottom: 5px;
    left: 13px;

    border: 2px solid var(--blue);

    background:
        linear-gradient(
            120deg,
            rgba(0,80,110,.5),
            rgba(0,20,30,.8)
        );

    transform:
        skewX(-25deg);
}

.orbit {

    position: absolute;

    width: 440px;

    height: 160px;

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

    border-radius: 50%;

    transform: rotateX(65deg);

    animation: orbit 10s linear infinite;
}

.orbit-two {

    width: 320px;

    height: 280px;

    transform:
        rotateX(65deg)
        rotateZ(60deg);
}

.touch-label {

    position: absolute;

    bottom: 30px;

    font-family: var(--font-mono);

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--blue);
}

@keyframes float {

    0%,100% {
        transform:
            perspective(500px)
            rotateX(20deg)
            rotateZ(-8deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(500px)
            rotateX(20deg)
            rotateZ(-8deg)
            translateY(-18px);
    }
}

@keyframes orbit {

    from {
        transform:
            rotateX(65deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }
}


/* =========================================================
   QUICK ACCESS
   ========================================================= */

.quick-access {

    margin-top: 30px;
}

.quick-grid {

    display: grid;

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

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

.quick-card {

    min-height: 190px;

    padding: 25px;

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

    background:
        linear-gradient(
            140deg,
            rgba(7,30,42,.65),
            rgba(2,10,15,.7)
        );

    position: relative;

    transition: .3s;
}

.quick-card:last-child {
    border-right: 0;
}

.quick-card:hover {

    background: rgba(8,44,59,.8);

    transform: translateY(-4px);
}

.quick-number {

    color: var(--gold);

    font-family: var(--font-mono);

    font-size: 10px;
}

.quick-card h3 {

    margin-top: 22px;

    font-size: 23px;
}

.quick-card p {

    font-size: 14px;

    margin-top: 7px;
}

.quick-arrow {

    position: absolute;

    bottom: 20px;

    right: 25px;

    color: var(--blue);
}


/* =========================================================
   NEWS
   ========================================================= */

.news-section {

    margin-top: 70px;
}

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    border-bottom: 1px solid rgba(50,150,190,.18);

    padding-bottom: 18px;

    margin-bottom: 20px;
}

.swipe-hint {

    font-family: var(--font-mono);

    color: var(--blue);

    font-size: 10px;
}

.news-slider {

    display: flex;

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

    overflow-x: auto;

    scrollbar-width: none;

    cursor: grab;
}

.news-slider:active {
    cursor: grabbing;
}

.news-slider::-webkit-scrollbar {
    display: none;
}

.news-card {

    flex: 0 0 33.333%;

    min-height: 170px;

    padding: 27px 23px;

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

    background: rgba(3,15,22,.55);
}

.news-date {

    color: var(--gold);

    font-family: var(--font-mono);

    font-size: 9px;
}

.news-card h3 {

    margin: 17px 0 5px;

    font-size: 18px;
}

.news-card p {
    font-size: 13px;
}


/* =========================================================
   BEGINNER BANNER
   ========================================================= */

.beginner-banner {

    margin-top: 70px;

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

    padding: 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background:
        linear-gradient(
            100deg,
            rgba(8,40,53,.5),
            rgba(2,10,15,.7)
        );
}

.beginner-banner h2 {

    font-size: 29px;

    max-width: 650px;
}


/* ============================================================
   JEDI ARCHIVES — THE FORGE
   INTERACTIVE SYSTEM
============================================================ */

.forge-page {
    --forge-bg: #02070c;
    --forge-panel: rgba(3, 12, 18, 0.88);
    --forge-border: rgba(54, 217, 255, 0.24);

    --saber-color: #36d9ff;
    --saber-rgb: 54, 217, 255;

    position: relative;
    min-height: calc(100vh - 80px);
    padding: 70px 7vw 100px;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(var(--saber-rgb), .055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #02070c,
            #010509
        );

    overflow: hidden;
}


/* ============================================================
   STAR FIELD
============================================================ */

.forge-page::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .45;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.6) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    animation:
        forgeStars 18s linear infinite;
}

@keyframes forgeStars {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(74px);
    }

}


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

.forge-heading {
    position: relative;
    z-index: 2;

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

    max-width: 1280px;
    margin: 0 auto 35px;
}

.forge-heading .eyebrow {
    margin-bottom: 16px;

    color: #e8aa32;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    letter-spacing: 4px;
}

.forge-heading h1 {
    margin: 0;

    color: #effaff;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: clamp(
        58px,
        7vw,
        110px
    );

    line-height: .82;

    letter-spacing: -3px;
}

.forge-intro {
    margin: 0;

    max-width: 390px;

    color: #88a6b5;

    font-size: 16px;
    line-height: 1.7;

    text-align: right;
}


/* ============================================================
   MAIN INTERFACE
============================================================ */

.forge-interface {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        330px minmax(0, 1fr);

    max-width: 1280px;
    min-height: 650px;

    margin: 0 auto;

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

    background:
        rgba(1,8,13,.76);

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

    backdrop-filter:
        blur(10px);
}


/* ============================================================
   LEFT CONTROL PANEL
============================================================ */

.forge-controls {
    padding: 34px 28px;

    border-right:
        1px solid
        rgba(54,217,255,.22);

    background:
        linear-gradient(
            180deg,
            rgba(5,17,24,.8),
            rgba(2,8,13,.95)
        );
}

.forge-section {
    margin-bottom: 32px;
}

.forge-section-title {
    margin-bottom: 16px;

    color: #e8aa32;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    letter-spacing: 3px;
}


/* ============================================================
   HILT OPTIONS
============================================================ */

.hilt-list {
    display: flex;
    flex-direction: column;
}

.hilt-option {
    display: flex;

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

    width: 100%;

    padding: 14px 6px;

    border: 0;
    border-bottom:
        1px solid
        rgba(91,132,148,.18);

    background: transparent;

    color: #7897a7;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 16px;

    text-align: left;

    cursor: pointer;

    transition:
        color .25s ease,
        padding-left .25s ease,
        background .25s ease;
}

.hilt-option:hover {
    color: #dff9ff;

    padding-left: 13px;

    background:
        linear-gradient(
            90deg,
            rgba(54,217,255,.07),
            transparent
        );
}

.hilt-option.active {
    color: #effcff;

    padding-left: 10px;

    text-shadow:
        0 0 12px
        rgba(54,217,255,.45);
}

.hilt-option.active .hilt-plus {
    color: var(--saber-color);
}

.hilt-plus {
    color: #55a8bd;

    font-size: 18px;

    transition:
        transform .25s ease;
}

.hilt-option:hover .hilt-plus {
    transform: rotate(90deg);
}


/* ============================================================
   CRYSTALS
============================================================ */

.crystal-selector {
    display: flex;
    gap: 13px;

    padding: 5px 0 14px;
}

.crystal-option {
    position: relative;

    width: 48px;
    height: 48px;

    padding: 0;

    border:
        1px solid
        rgba(139,170,181,.22);

    background:
        rgba(10,25,32,.7);

    transform:
        rotate(45deg);

    cursor: pointer;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.crystal-option:hover {
    transform:
        rotate(45deg)
        scale(1.13)
        translateY(-5px);

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

    box-shadow:
        0 0 28px
        color-mix(
            in srgb,
            var(--crystal-color),
            transparent 55%
        );
}

.crystal-option.active {
    transform:
        rotate(45deg)
        scale(1.12);

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

    box-shadow:
        0 0 30px
        color-mix(
            in srgb,
            var(--crystal-color),
            transparent 45%
        );
}

.crystal-gem {
    position: absolute;

    width: 27px;
    height: 27px;

    left: 10px;
    top: 10px;

    background:
        var(--crystal-color);

    box-shadow:
        0 0 18px
        var(--crystal-color),
        inset 0 0 8px
        rgba(255,255,255,.8);
}

.selected-crystal {
    color: var(--saber-color);

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    letter-spacing: .5px;

    transition:
        color .3s ease;
}


/* ============================================================
   IGNITION
============================================================ */

.ignition-options {
    display: flex;
}

.ignition-option {
    padding: 10px 13px;

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

    margin-right: -1px;

    background:
        rgba(5,18,25,.7);

    color: #668392;

    font-size: 11px;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.ignition-option:hover {
    color: white;
}

.ignition-option.active {
    position: relative;
    z-index: 2;

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

    background:
        rgba(var(--saber-rgb), .1);

    color: #ecfbff;

    box-shadow:
        0 0 18px
        rgba(var(--saber-rgb), .08);
}


/* ============================================================
   OWNER
============================================================ */

.owner-section {
    margin-top: 5px;
}

.owner-label {
    display: block;

    margin-bottom: 8px;

    color: #547481;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 2px;
}

.owner-input {
    width: 100%;

    padding: 11px 12px;

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

    outline: none;

    background:
        rgba(0,8,13,.8);

    color: #eafcff;

    font-family:
        "Courier New",
        monospace;

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

.owner-input::placeholder {
    color: #405a65;
}

.owner-input:focus {
    border-color:
        var(--saber-color);

    box-shadow:
        0 0 20px
        rgba(var(--saber-rgb), .1);
}


/* ============================================================
   STATS
============================================================ */

.forge-stats {
    display: grid;

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

    gap: 10px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(54,217,255,.2);
}

.stat span {
    display: block;

    margin-bottom: 8px;

    color: #557482;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 1px;
}

.stat strong {
    color: #eefcff;

    font-family:
        "Courier New",
        monospace;

    font-size: 18px;
}

.status-active {
    color: #38ff9b !important;

    text-shadow:
        0 0 12px
        rgba(56,255,155,.5);
}

.status-warning {
    color: #ff405e !important;

    animation:
        warningPulse .5s
        infinite alternate;
}

.status-pulse {
    color: var(--saber-color) !important;
}

.status-retracted {
    color: #627b86 !important;
}

@keyframes warningPulse {

    from {
        opacity: .6;
    }

    to {
        opacity: 1;
    }

}


/* ============================================================
   WORKBENCH
============================================================ */

.saber-workbench {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 52%,
            rgba(var(--saber-rgb), .08),
            transparent 25%
        ),
        #02080d;

    cursor: crosshair;
}

.workbench-grid {
    position: absolute;
    inset: -50px;

    opacity: .55;

    background-image:
        linear-gradient(
            rgba(54,217,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(54,217,255,.045) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    transform:
        translate(
            var(--grid-x, 0px),
            var(--grid-y, 0px)
        );

    transition:
        transform .5s ease;

    pointer-events: none;
}

.workbench-grid::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 0%,
            rgba(0,0,0,.15) 55%,
            rgba(0,0,0,.7) 100%
        );
}


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

.workbench-header {
    position: absolute;

    z-index: 5;

    top: 24px;
    left: 28px;
    right: 28px;

    display: flex;

    justify-content: space-between;

    color: #547581;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 1px;
}

.workbench-header strong {
    color: var(--saber-color);

    font-weight: normal;
}


/* ============================================================
   SABER
============================================================ */

.saber-container {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 51%;

    width: 100px;
    height: 500px;

    transform:
        translate(-50%, -50%)
        rotate(0deg);

    transform-origin:
        50% 90%;

    transition:
        transform .12s ease-out;

    pointer-events: none;
}


/* ============================================================
   BLADE
============================================================ */

.blade {
    position: absolute;

    left: 50%;

    bottom: 135px;

    width: 17px;
    height: 345px;

    transform:
        translateX(-50%)
        scaleY(0);

    transform-origin:
        bottom center;

    border-radius:
        50% 50% 8px 8px;

    background:
        var(--blade-color);

    box-shadow:
        0 0 12px
        var(--blade-color),

        0 0 30px
        rgba(var(--blade-rgb), .9),

        0 0 65px
        rgba(var(--blade-rgb), .6),

        0 0 120px
        rgba(var(--blade-rgb), .25);

    opacity: 0;

    transition:
        transform .38s
        cubic-bezier(.2,.8,.2,1),
        opacity .15s;
}

.blade::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 3px;

    width: 5px;
    height: calc(100% - 6px);

    transform:
        translateX(-50%);

    border-radius: 10px;

    background:
        #ffffff;

    box-shadow:
        0 0 8px white;
}

.blade.ignited {
    opacity: 1;

    transform:
        translateX(-50%)
        scaleY(1);
}

.blade.retracting {
    opacity: 0;

    transform:
        translateX(-50%)
        scaleY(0);
}


/* ============================================================
   IGNITION MODES
============================================================ */

.blade.mode-standard {
    animation:
        standardBlade 2s
        ease-in-out infinite;
}

@keyframes standardBlade {

    0%, 100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.15);
    }

}

.blade.mode-unstable {
    animation:
        unstableBlade .08s
        infinite alternate;
}

@keyframes unstableBlade {

    from {
        width: 13px;

        filter:
            brightness(.85);
    }

    to {
        width: 22px;

        filter:
            brightness(1.5);
    }

}

.blade.mode-pulse {
    animation:
        pulseBlade .7s
        ease-in-out infinite;
}

@keyframes pulseBlade {

    0%, 100% {
        opacity: .55;

        filter:
            brightness(.8);
    }

    50% {
        opacity: 1;

        filter:
            brightness(1.5);
    }

}


/* ============================================================
   HILT
============================================================ */

.saber-hilt {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 82px;
    height: 145px;

    transform:
        translateX(-50%);

    transition:
        filter .3s ease,
        transform .3s ease;
}

.hilt-top {
    position: absolute;

    top: 0;
    left: -6px;

    width: 94px;
    height: 34px;

    border:
        2px solid
        #9eb6bd;

    background:
        linear-gradient(
            90deg,
            #26343b,
            #d7e0e1 45%,
            #495960
        );

    box-shadow:
        0 0 5px
        rgba(255,255,255,.2);
}

.hilt-body {
    position: absolute;

    top: 30px;
    left: 5px;

    width: 72px;
    height: 105px;

    border:
        2px solid
        #71878e;

    background:
        linear-gradient(
            90deg,
            #172127,
            #87969b 45%,
            #263238
        );

    box-shadow:
        inset 0 0 20px
        rgba(0,0,0,.5);
}

.hilt-bottom {
    position: absolute;

    bottom: 0;
    left: -5px;

    width: 92px;
    height: 18px;

    border:
        2px solid
        #80959b;

    background:
        #26343a;
}

.hilt-detail {
    width: 30px;
    height: 9px;

    margin:
        20px auto 0;

    background:
        var(--saber-color);

    box-shadow:
        0 0 12px
        var(--saber-color);

    transition:
        background .3s ease,
        box-shadow .3s ease;
}


/* ============================================================
   HILT VARIATIONS
============================================================ */

.hilt-saberstaff {
    transform:
        translateX(-50%)
        scaleX(1.25);
}

.hilt-sentinel {
    transform:
        translateX(-50%)
        rotate(5deg);
}

.hilt-temple {
    transform:
        translateX(-50%)
        scaleX(.9);
}


/* ============================================================
   RETICLE
============================================================ */

.saber-reticle {
    position: absolute;

    z-index: 3;

    width: 30px;
    height: 30px;

    border:
        1px solid
        rgba(var(--saber-rgb), .45);

    border-radius: 50%;

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

    pointer-events: none;

    opacity: .6;

    box-shadow:
        0 0 18px
        rgba(var(--saber-rgb), .25);
}

.saber-reticle::before,
.saber-reticle::after {
    content: "";

    position: absolute;

    background:
        var(--saber-color);
}

.saber-reticle::before {
    width: 8px;
    height: 1px;

    left: 10px;
    top: 14px;
}

.saber-reticle::after {
    width: 1px;
    height: 8px;

    left: 14px;
    top: 10px;
}


/* ============================================================
   PARTICLES
============================================================ */

.forge-particle {
    position: absolute;

    z-index: 8;

    border-radius: 50%;

    background:
        var(--particle-color);

    box-shadow:
        0 0 10px
        var(--particle-color);

    pointer-events: none;

    animation:
        forgeParticle .7s
        ease-out forwards;
}

@keyframes forgeParticle {

    0% {
        opacity: 1;

        transform:
            translate(0,0)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--particle-x),
                var(--particle-y)
            )
            scale(.1);
    }

}


/* ============================================================
   CRYSTAL GLOW
============================================================ */

.crystal-glow-burst {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    width: 120px;
    height: 120px;

    border-radius: 50%;

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

    background:
        var(--saber-color);

    filter:
        blur(30px);

    opacity: .4;

    pointer-events: none;

    animation:
        crystalBurst .8s
        ease-out forwards;
}

@keyframes crystalBurst {

    from {
        transform:
            translate(-50%, -50%)
            scale(.2);

        opacity: .5;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(4);

        opacity: 0;
    }

}


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

.saber-actions {
    position: absolute;

    z-index: 10;

    bottom: 25px;
    left: 50%;

    display: flex;

    gap: 12px;

    transform:
        translateX(-50%);

    width: max-content;
}

.forge-button {
    min-width: 155px;

    padding: 14px 18px;

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

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

    color: #a8c5ce;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

.forge-button:hover {
    color: white;

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

    background:
        rgba(var(--saber-rgb), .08);

    box-shadow:
        0 0 20px
        rgba(var(--saber-rgb), .15);

    transform:
        translateY(-2px);
}

.forge-button:active {
    transform:
        translateY(1px);
}

.retract-button {
    border-color:
        rgba(255,64,94,.7);

    color: #ff8192;
}

.retract-button:hover {
    border-color:
        #ff405e;

    background:
        rgba(255,64,94,.1);

    box-shadow:
        0 0 20px
        rgba(255,64,94,.18);
}

.swing-button.active {
    border-color:
        var(--saber-color);

    color:
        var(--saber-color);

    box-shadow:
        0 0 25px
        rgba(var(--saber-rgb), .2);
}

.export-button {
    border-color:
        #d6a23a;

    color:
        #e8b33f;
}


/* ============================================================
   FORGE HINT
============================================================ */

.forge-hint {
    position: absolute;

    z-index: 5;

    bottom: 3px;
    left: 50%;

    transform:
        translateX(-50%);

    color:
        var(--saber-color);

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 2px;

    white-space: nowrap;

    opacity: .8;
}


/* ============================================================
   CLASH
============================================================ */

.clash-overlay {
    position: fixed;

    z-index: 9999;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity .1s ease;
}

.clash-overlay.active {
    opacity: 1;
}

.clash-flash {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.7),
            rgba(var(--saber-rgb), .25),
            transparent 55%
        );

    animation:
        clashFlash .45s
        ease-out;
}

.clash-text {
    position: absolute;

    left: 50%;
    top: 50%;

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

    color:
        white;

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(35px, 6vw, 90px);

    letter-spacing: 5px;

    text-shadow:
        0 0 20px
        var(--saber-color),
        0 0 50px
        var(--saber-color);

    animation:
        clashText .45s
        ease-out;
}

@keyframes clashFlash {

    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}

@keyframes clashText {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.7);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.1);
    }

}


/* ============================================================
   CLASH SPARKS
============================================================ */

.clash-spark {
    position: absolute;

    z-index: 20;

    width: 5px;
    height: 5px;

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

    pointer-events: none;
}

.spark {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    box-shadow:
        0 0 12px
        var(--clash-color);

    animation:
        sparkFly .45s
        ease-out forwards;
}

@keyframes sparkFly {

    from {
        opacity: 1;

        transform:
            translate(0,0)
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            translate(
                var(--spark-x),
                var(--spark-y)
            )
            scale(.1);
    }

}


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

.forge-toast {
    position: fixed;

    z-index: 10000;

    left: 50%;
    bottom: 35px;

    padding: 12px 22px;

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

    background:
        rgba(1,8,12,.95);

    color:
        var(--saber-color);

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    letter-spacing: 1px;

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

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;

    box-shadow:
        0 0 25px
        rgba(var(--saber-rgb), .15);
}

.forge-toast.visible {
    opacity: 1;

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


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

@media (max-width: 900px) {

    .forge-page {
        padding:
            40px 20px 80px;
    }

    .forge-heading {
        display: block;
    }

    .forge-heading h1 {
        font-size: 65px;
    }

    .forge-intro {
        margin-top: 20px;

        text-align: left;
    }

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

    .forge-controls {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(54,217,255,.2);
    }

    .saber-workbench {
        min-height: 650px;
    }

}


@media (max-width: 600px) {

    .forge-page {
        padding:
            30px 12px 60px;
    }

    .forge-heading h1 {
        font-size: 54px;
    }

    .forge-controls {
        padding: 25px 18px;
    }

    .crystal-selector {
        gap: 9px;
    }

    .crystal-option {
        width: 42px;
        height: 42px;
    }

    .crystal-gem {
        width: 23px;
        height: 23px;

        left: 8px;
        top: 8px;
    }

    .saber-actions {
        width: 95%;

        display: grid;

        grid-template-columns:
            1fr;
    }

    .forge-button {
        width: 100%;
    }

    .forge-hint {
        display: none;
    }

}

/* =========================================================
   ARCHIVES
   ========================================================= */

.archives-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    padding-bottom: 25px;

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

.archives-heading h1 {

    font-size: clamp(50px,6vw,72px);
}

.record-count {

    font-family: var(--font-mono);

    color: var(--muted);

    font-size: 10px;
}

.record-count strong {

    font-size: 23px;

    color: var(--blue);
}


.archive-toolbar {

    display: grid;

    grid-template-columns: 1fr auto auto;

    gap: 30px;

    align-items: center;

    padding: 25px 0;
}

.search-box {

    display: flex;

    align-items: center;

    gap: 10px;

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

    max-width: 400px;
}

.search-box span {
    color: var(--blue);
}

.search-box input {

    width: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: white;

    padding: 10px 0;

    font-family: var(--font-mono);

    font-size: 10px;
}

.search-box input::placeholder {
    color: #55717d;
}


.force-toggle {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: var(--font-mono);

    font-size: 8px;
}

.switch input {
    display: none;
}

.switch {

    width: 48px;
    height: 24px;

    position: relative;

    display: block;
}

.slider {

    position: absolute;

    inset: 0;

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

    border-radius: 20px;
}

.slider::before {

    content: '';

    position: absolute;

    width: 17px;
    height: 17px;

    left: 3px;
    top: 2px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow: 0 0 12px var(--blue);

    transition: .3s;
}

.switch input:checked + .slider::before {

    transform: translateX(23px);

    background: var(--red);

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


.filter-buttons {

    display: flex;
}

.filter {

    padding: 10px;

    background: rgba(5,20,28,.6);

    border: 1px solid rgba(70,190,230,.15);

    color: var(--muted);

    font-family: var(--font-mono);

    font-size: 8px;
}

.filter.active {

    border-color: var(--blue);

    color: white;
}


.archive-grid {

    display: grid;

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

    gap: 12px;
}

.archive-card {

    min-height: 360px;

    padding: 20px;

    position: relative;

    overflow: hidden;

    border: 1px solid;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 5px,
            rgba(50,200,255,.025) 6px
        );

    transition: .3s;
}

.jedi-card {

    border-color: rgba(53,216,255,.3);

    background-color: rgba(5,29,39,.65);
}

.sith-card {

    border-color: rgba(255,64,93,.3);

    background-color: rgba(35,5,12,.6);
}

.archive-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 0 30px rgba(53,216,255,.08);
}

.sith-card:hover {

    box-shadow:
        0 0 30px rgba(255,64,93,.12);
}

.file-number,
.affiliation-label {

    font-family: var(--font-mono);

    font-size: 8px;

    color: var(--muted);
}

.affiliation-label {

    position: absolute;

    top: 20px;

    right: 20px;

    color: var(--blue);
}

.sith-card .affiliation-label {
    color: var(--red);
}

.holo-avatar {

    width: 55px;
    height: 55px;

    margin-top: 18px;

    border-radius: 50%;

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

    color: var(--blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    box-shadow:
        0 0 25px rgba(53,216,255,.3);

    animation: hologramFlicker 3s infinite;
}

.sith-card .holo-avatar {

    border-color: var(--red);

    color: var(--red);

    box-shadow:
        0 0 25px rgba(255,64,93,.3);
}

@keyframes hologramFlicker {

    0%,100% {
        opacity: 1;
    }

    49% {
        opacity: .92;
    }

    50% {
        opacity: .65;
    }

    52% {
        opacity: 1;
    }
}

.force-symbol {

    font-size: 28px;

    color: var(--blue);

    margin: 5px 0 10px;
}

.sith-card .force-symbol {
    color: var(--red);
}

.archive-card h2 {

    font-size: 25px;

    margin-top: 10px;
}

.archive-card > p {

    font-size: 13px;
}

.card-data {

    display: grid;

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

    gap: 13px;

    border-top: 1px solid rgba(80,160,190,.15);

    margin-top: 18px;

    padding-top: 15px;
}

.card-data span {

    font-family: var(--font-mono);

    color: #55717d;

    font-size: 7px;
}

.card-data strong {

    display: block;

    color: #9eb4bf;

    font-family: var(--font-display);

    font-size: 12px;

    margin-top: 4px;
}

.archive-card blockquote {

    border-left: 2px solid var(--gold);

    margin-top: 17px;

    padding-left: 10px;

    color: #9eb4bf;

    font-style: italic;

    font-size: 12px;
}

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


/* =========================================================
   HOLONET
   ========================================================= */

.holonet-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

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

    padding-bottom: 30px;
}

.holonet-header p {

    max-width: 550px;

    margin-top: 15px;
}


/* SPOILER TOGGLE */

.spoiler-toggle {

    display: flex;

    align-items: center;

    gap: 15px;

    font-family: var(--font-mono);

    font-size: 9px;

    color: var(--muted);

    cursor: pointer;
}

.spoiler-toggle input {
    display: none;
}

.toggle-track {

    width: 50px;

    height: 25px;

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

    border-radius: 30px;

    padding: 3px;
}

.toggle-track span {

    display: block;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow: 0 0 10px var(--blue);

    transition: .3s;
}

.spoiler-toggle input:not(:checked)
+ .toggle-track span {

    transform: translateX(23px);

    background: var(--red);

    box-shadow: 0 0 10px var(--red);
}


/* ERA */

.era-display {

    margin-top: 45px;

    min-height: 260px;

    padding: 45px;

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

    display: grid;

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

    align-items: center;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(53,216,255,.1),
            transparent 35%
        ),
        rgba(4,17,25,.7);

    transition: background .5s;
}

.era-number {

    font-family: var(--font-mono);

    font-size: 45px;

    color: var(--gold);
}

.era-label {

    font-family: var(--font-mono);

    color: var(--blue);

    font-size: 10px;

    letter-spacing: 2px;
}

.era-info h2 {

    font-size: 55px;

    margin: 5px 0 10px;
}

.era-info p {

    max-width: 600px;
}

.era-faction {

    color: var(--blue);

    font-family: var(--font-mono);

    font-size: 9px;

    letter-spacing: 2px;
}


/* TIMELINE */

.timeline-control {

    margin: 40px 0 60px;
}

.timeline-years {

    display: grid;

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

    color: var(--muted);

    font-family: var(--font-mono);

    font-size: 8px;

    text-align: center;

    margin-bottom: 15px;
}

.timeline-control input {

    width: 100%;

    accent-color: var(--blue);

    cursor: pointer;
}

.timeline-line {

    display: flex;

    justify-content: space-between;

    margin-top: -4px;
}

.timeline-line span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow: 0 0 10px var(--blue);
}


/* EVENTS */

.event-grid {

    display: grid;

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

    gap: 10px;

    margin-top: 20px;
}

.timeline-event {

    min-height: 230px;

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

    padding: 22px;

    background: rgba(3,16,23,.7);

    transition: .3s;
}

.timeline-event:hover {

    transform: translateY(-5px);

    border-color: var(--blue);

    box-shadow:
        0 0 25px rgba(53,216,255,.08);
}

.event-date {

    font-family: var(--font-mono);

    font-size: 8px;

    color: var(--gold);
}

.timeline-event h3 {

    font-size: 19px;

    margin: 25px 0 10px;
}

.timeline-event p {

    font-size: 13px;
}

.event-characters {

    margin-top: 20px;

    font-family: var(--font-mono);

    font-size: 7px;

    color: var(--blue);
}


/* SPOILERS */

.spoiler-text {

    filter: blur(7px);

    cursor: pointer;

    transition: .3s;
}

.spoiler-text:hover,
.spoiler-text.revealed {

    filter: none;
}


/* TIMELINE TIP */

.timeline-tip {

    display: flex;

    gap: 20px;

    align-items: center;

    margin-top: 50px;

    padding: 25px;

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

.tip-icon {

    color: var(--gold);

    font-size: 30px;
}

.timeline-tip strong {

    font-family: var(--font-mono);

    font-size: 10px;

    color: var(--blue);
}

.timeline-tip p {

    margin-top: 5px;

    font-size: 13px;
}


/* =========================================================
   STARTER
   ========================================================= */

.starter-hero {

    max-width: 800px;

    margin-bottom: 80px;
}

.starter-hero h1 {

    font-size: clamp(65px,9vw,105px);

    margin-bottom: 25px;
}

.starter-hero p {

    font-size: 18px;

    max-width: 550px;
}


.starter-tool {

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

    padding-top: 35px;
}

.section-intro {

    max-width: 600px;

    margin: 10px 0 30px;
}

.quiz-card {

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

    padding: 40px;

    background: rgba(4,18,26,.7);

    min-height: 300px;
}

.question-number,
.result-label {

    font-family: var(--font-mono);

    color: var(--gold);

    font-size: 9px;

    letter-spacing: 2px;
}

.question h3 {

    font-size: 30px;

    margin: 12px 0 25px;
}

.answer-grid {

    display: grid;

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

    gap: 12px;
}

.answer {

    min-height: 120px;

    text-align: left;

    padding: 20px;

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

    background: rgba(5,25,35,.7);

    color: white;

    font-family: var(--font-mono);

    transition: .3s;
}

.answer:hover {

    border-color: var(--blue);

    background: rgba(15,65,83,.5);

    transform: translateY(-3px);
}

.answer small {

    display: block;

    color: var(--muted);

    font-family: var(--font-display);

    font-size: 14px;

    margin-top: 10px;
}

.hidden {
    display: none !important;
}


/* RESULT */

.watch-result {

    animation: resultIn .4s ease;
}

@keyframes resultIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.watch-result h3 {

    font-size: 40px;

    color: var(--blue);

    margin: 8px 0;
}

.watch-list {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin: 25px 0;
}

.watch-item {

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

    padding: 12px 17px;

    color: #a8c1cb;

    font-family: var(--font-mono);

    font-size: 9px;
}


/* TERMINOLOGY */

.terminology-section {

    margin-top: 90px;

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

    padding-top: 35px;
}

.terms-grid {

    display: grid;

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

    gap: 12px;
}

.term-card {

    min-height: 160px;

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

    padding: 25px;

    background: rgba(4,17,25,.6);
}

.term-card h3 {

    font-size: 24px;

    margin-bottom: 10px;
}

.galactic-term {

    color: var(--blue);

    text-decoration:
        underline dashed;

    text-underline-offset: 5px;

    cursor: help;

    position: relative;
}

.galactic-term::after {

    content: attr(data-definition);

    position: absolute;

    bottom: calc(100% + 10px);

    left: 0;

    width: 260px;

    padding: 13px;

    background: #06141c;

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

    color: #ccebf5;

    font-family: var(--font-display);

    font-size: 13px;

    line-height: 1.4;

    opacity: 0;

    visibility: hidden;

    transform: translateY(5px);

    transition: .2s;

    z-index: 20;

    box-shadow:
        0 0 20px rgba(53,216,255,.15);
}

.galactic-term:hover::after {

    opacity: 1;

    visibility: visible;

    transform: none;
}


/* ============================================================
   GALAXY EXPLORER
   ============================================================ */

   .galaxy-page {
    --cyan: #45d9ff;
    --cyan-soft: #8beaff;
    --gold: #eab64c;
    --red: #ff405c;
    --green: #66e58c;

    --bg: #02080d;
    --panel: rgba(4, 15, 22, .88);
    --border: rgba(69, 217, 255, .18);

    position: relative;
    min-height: calc(100vh - 75px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(20, 100, 130, .12),
            transparent 40%
        ),
        #02080d;

    color: #dcecf2;

    font-family:
        "Arial Narrow",
        Arial,
        sans-serif;

    isolation: isolate;

    --mouse-x: 0;
    --mouse-y: 0;
}


/* ============================================================
   STARFIELD
   ============================================================ */

.galaxy-stars,
.galaxy-stars--far {

    position: absolute;

    inset: -10%;

    pointer-events: none;

    z-index: -3;

    background-image:
        radial-gradient(
            1px 1px at 10% 20%,
            rgba(255,255,255,.8),
            transparent
        ),
        radial-gradient(
            1px 1px at 30% 80%,
            rgba(255,255,255,.7),
            transparent
        ),
        radial-gradient(
            1px 1px at 60% 30%,
            rgba(255,255,255,.7),
            transparent
        ),
        radial-gradient(
            1px 1px at 80% 70%,
            rgba(255,255,255,.8),
            transparent
        ),
        radial-gradient(
            1px 1px at 90% 15%,
            rgba(255,255,255,.6),
            transparent
        );

    background-size:
        160px 160px,
        220px 220px,
        300px 300px,
        190px 190px,
        260px 260px;

    opacity: .5;

    transform:
        translate(
            calc(var(--mouse-x) * -15px),
            calc(var(--mouse-y) * -15px)
        );

    transition:
        transform .4s ease-out;
}


.galaxy-stars--far {

    z-index: -4;

    opacity: .25;

    background-size:
        90px 90px,
        170px 170px,
        240px 240px;

    transform:
        translate(
            calc(var(--mouse-x) * -6px),
            calc(var(--mouse-y) * -6px)
        );

}


.galaxy-nebula {

    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 45%;

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

    background:
        radial-gradient(
            circle,
            rgba(22, 150, 190, .10),
            transparent 65%
        );

    filter: blur(30px);

    pointer-events: none;

    z-index: -2;
}


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

.galaxy-header {

    width: min(1400px, 92%);

    margin: 0 auto;

    padding:
        55px 0 35px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;
}


.galaxy-eyebrow,
.section-label,
.panel-header,
.planet-file {

    color: var(--gold);

    font-family: monospace;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.galaxy-title {

    margin: 12px 0;

    font-size:
        clamp(42px, 6vw, 76px);

    line-height: .85;

    letter-spacing: -2px;

    font-weight: 900;

    color: #eef8fb;
}


.galaxy-title span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px var(--cyan);

    text-shadow:
        0 0 25px rgba(69,217,255,.15);
}


.galaxy-intro {

    max-width: 600px;

    color: #7898a6;

    line-height: 1.7;

    font-size: 14px;

}


.galaxy-status {

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 1.5px;

    color: #7898a6;

    text-align: right;

}


.galaxy-status small {

    display: block;

    margin-top: 8px;

    color: #476773;
}


.status-dot {

    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #59ed91;

    box-shadow:
        0 0 12px #59ed91;

    margin-right: 8px;

    animation:
        statusPulse 2s infinite;
}


@keyframes statusPulse {

    0%,100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }

}


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

.galaxy-controls {

    width: min(1400px, 92%);

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}


.galaxy-search {

    width: 250px;

    height: 42px;

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

    background:
        rgba(3,14,20,.75);

    display: flex;

    align-items: center;

    padding: 0 14px;

    transition: .3s;
}


.galaxy-search:focus-within {

    border-color: var(--cyan);

    box-shadow:
        0 0 20px rgba(69,217,255,.12);
}


.galaxy-search span {

    color: var(--cyan);

    font-size: 18px;

    margin-right: 10px;
}


.galaxy-search input {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: white;

    font-family: monospace;

    font-size: 11px;

    letter-spacing: 1px;
}


.galaxy-search input::placeholder {

    color: #496570;
}


.galaxy-filter {

    display: flex;

    gap: 5px;

    flex-wrap: wrap;
}


.filter-btn {

    height: 42px;

    padding:
        0 14px;

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

    background:
        rgba(5,18,26,.7);

    color: #61808c;

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 1px;

    cursor: pointer;

    transition: .25s;
}


.filter-btn:hover {

    color: white;

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


.filter-btn.active {

    color: var(--cyan);

    border-color: var(--cyan);

    background:
        rgba(69,217,255,.08);

    box-shadow:
        inset 0 0 20px rgba(69,217,255,.04);
}


/* ============================================================
   INTERFACE
   ============================================================ */

.galaxy-interface {

    width: min(1400px, 92%);

    height: 680px;

    margin: 0 auto 60px;

    display: grid;

    grid-template-columns:
        190px minmax(0,1fr) 330px;

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

    background:
        rgba(2,10,15,.75);

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

    position: relative;

}


/* ============================================================
   SIDEBAR
   ============================================================ */

.galaxy-sidebar {

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

    background:
        rgba(3,14,20,.65);

    padding: 20px;

    z-index: 5;
}


.panel-header {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding-bottom: 20px;

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


.panel-header span:last-child {

    color: #456672;

    font-size: 8px;

}


.navigation-controls {

    display: flex;

    gap: 5px;

    margin: 20px 0;
}


.map-control {

    width: 38px;
    height: 38px;

    background:
        #06151d;

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

    color: var(--cyan);

    cursor: pointer;

    font-size: 18px;

    transition: .2s;
}


.map-control:hover {

    background:
        rgba(69,217,255,.12);

    border-color:
        var(--cyan);

}


.sidebar-section {

    margin-top: 28px;

    padding-top: 18px;

    border-top:
        1px solid rgba(69,217,255,.08);
}


.scale-line {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 15px;

    color: #587682;

    font-family: monospace;

    font-size: 8px;
}


.scale-line span:first-child {

    width: 55px;

    height: 1px;

    background:
        var(--cyan);

}


/* ============================================================
   SWITCHES
   ============================================================ */

.switch-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    color: #71909b;

    font-size: 10px;

    cursor: pointer;
}


.switch-row input {

    display: none;
}


.switch {

    width: 30px;
    height: 15px;

    border:
        1px solid #365560;

    border-radius: 20px;

    position: relative;

}


.switch::after {

    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    top: 2px;
    left: 2px;

    border-radius: 50%;

    background: #45616b;

    transition: .25s;

}


.switch-row input:checked + .switch {

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


.switch-row input:checked + .switch::after {

    transform: translateX(15px);

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

}


/* ============================================================
   SOUND
   ============================================================ */

.sound-btn {

    width: 100%;

    margin-top: 14px;

    padding: 12px 8px;

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

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

    color: #668591;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: .5px;

    cursor: pointer;

    transition: .3s;
}


.sound-btn:hover,
.sound-btn.active {

    color: var(--cyan);

    border-color: var(--cyan);

    box-shadow:
        0 0 15px rgba(69,217,255,.1);
}


.sound-icon {

    margin-right: 5px;

    animation:
        soundPulse 1s infinite;

}


@keyframes soundPulse {

    0%,100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

}


.sound-note {

    margin-top: 8px;

    color: #3d5861;

    font-size: 8px;

    line-height: 1.5;

}


/* ============================================================
   STATS
   ============================================================ */

.galaxy-stats {

    position: absolute;

    bottom: 20px;

    left: 20px;
    right: 20px;

    display: grid;

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

    gap: 5px;
}


.galaxy-stats div {

    text-align: center;

    padding: 10px 3px;

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

    border:
        1px solid rgba(69,217,255,.07);
}


.galaxy-stats strong {

    display: block;

    color: var(--cyan);

    font-family: monospace;

    font-size: 15px;
}


.galaxy-stats span {

    font-size: 6px;

    color: #46626d;

    letter-spacing: .5px;

}


/* ============================================================
   MAP
   ============================================================ */

.galaxy-map-container {

    position: relative;

    min-width: 0;

    overflow: hidden;

}


.map-topbar {

    height: 40px;

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

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 18px;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1px;

    color: #55727d;

}


.map-live-dot {

    display: inline-block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

    margin-right: 6px;
}


.galaxy-map {

    position: absolute;

    inset:
        40px 0 35px;

    cursor:
        grab;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(30,90,120,.06),
            transparent 60%
        );
}


.galaxy-map.dragging {

    cursor:
        grabbing;
}


.galaxy-map svg {

    width: 100%;
    height: 100%;

    transform-origin:
        center;

    transition:
        transform .25s ease;

}


/* GRID */

.map-grid line {

    stroke:
        rgba(69,217,255,.045);

    stroke-width: 1;
}


/* CORE */

.core-ring {

    fill: none;

    stroke:
        rgba(69,217,255,.12);

    stroke-width: 1;

    stroke-dasharray: 5 8;

    animation:
        rotateCore 40s linear infinite;
}


@keyframes rotateCore {

    to {
        transform:
            rotate(360deg);

        transform-origin:
            500px 340px;
    }

}


.core-label {

    fill:
        rgba(69,217,255,.16);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 3px;
}


/* ============================================================
   HYPERLANES
   ============================================================ */

.hyperlane {

    fill: none;

    stroke:
        var(--cyan);

    stroke-width: 1;

    stroke-dasharray: 3 10;

    opacity: 0;

    filter:
        url(#routeGlow);

    transition: opacity .5s;
}


.show-hyperlanes .hyperlane {

    opacity: .7;

    animation:
        routeTravel 3s linear infinite;
}


@keyframes routeTravel {

    to {
        stroke-dashoffset: -100;
    }

}


/* ============================================================
   PLANETS
   ============================================================ */

.planet-group {

    cursor: pointer;

    transition:
        opacity .3s,
        transform .3s;
}


.planet {

    fill:
        var(--planet-color);

    stroke:
        white;

    stroke-width: 1;

    filter:
        url(#planetGlow);

    transition:
        r .3s,
        filter .3s;
}


.planet-glow {

    fill:
        var(--planet-color);

    opacity: .12;

    filter:
        blur(7px);

}


.planet-core {

    fill: white;

    opacity: .9;
}


.planet-orbit {

    fill: none;

    stroke:
        rgba(69,217,255,.15);

    stroke-width: 1;

    stroke-dasharray: 2 5;

    animation:
        orbitSpin 8s linear infinite;

}


@keyframes orbitSpin {

    to {
        transform:
            rotate(360deg);

        transform-origin:
            center;
    }

}


.planet-group:hover .planet {

    r: 12;

    filter:
        url(#planetGlow)
        drop-shadow(
            0 0 15px var(--planet-color)
        );

}


.planet-group.selected .planet {

    r: 14;

}


.planet-group.selected .planet-orbit {

    stroke:
        var(--cyan);

    stroke-width: 2;

    animation-duration:
        2s;

}


.planet-label {

    fill: #8caab5;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 1px;

    pointer-events: none;

}


.planet-coordinate {

    fill: #36545e;

    font-family: monospace;

    font-size: 6px;

    pointer-events: none;

}


.hide-planet-labels .planet-label,
.hide-planet-labels .planet-coordinate {

    display: none;
}


.planet-group.filter-hidden,
.planet-group.search-hidden {

    opacity: .05;

    pointer-events: none;

}


.pause-orbits .planet-orbit {

    animation-play-state:
        paused;

}


/* ============================================================
   MAP TOOLTIP
   ============================================================ */

.map-tooltip {

    position: absolute;

    pointer-events: none;

    opacity: 0;

    transform:
        translateY(5px);

    padding:
        9px 12px;

    background:
        rgba(2,10,15,.95);

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.4);

    transition:
        opacity .15s,
        transform .15s;

    z-index: 10;
}


.map-tooltip.visible {

    opacity: 1;

    transform:
        translateY(0);

}


.map-tooltip strong {

    display: block;

    color: white;

    font-family: monospace;

    font-size: 10px;

}


.map-tooltip span {

    color: var(--cyan);

    font-family: monospace;

    font-size: 7px;

}


/* ============================================================
   CROSSHAIR
   ============================================================ */

.map-crosshair {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 20px;
    height: 20px;

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

    opacity: .15;

    pointer-events: none;
}


.map-crosshair::before,
.map-crosshair::after {

    content: "";

    position: absolute;

    background:
        var(--cyan);

}


.map-crosshair::before {

    width: 1px;

    height: 100%;

    left: 50%;
}


.map-crosshair::after {

    height: 1px;

    width: 100%;

    top: 50%;
}


/* ============================================================
   MAP SCANNING
   ============================================================ */

.map-scanning {

    position: absolute;

    inset: 0;

    background:
        rgba(2,8,13,.85);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 25px;

    opacity: 0;

    pointer-events: none;

    transition: opacity .3s;

    z-index: 20;
}


.map-scanning.active {

    opacity: 1;
}


.scanner-ring {

    width: 80px;
    height: 80px;

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

    border-radius: 50%;

    box-shadow:
        0 0 30px rgba(69,217,255,.25);

    animation:
        scanRotate 1s linear infinite;

}


.scanner-ring::after {

    content: "";

    display: block;

    width: 5px;
    height: 5px;

    margin: 7px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 15px var(--cyan);

}


@keyframes scanRotate {

    to {
        transform:
            rotate(360deg);
    }

}


.map-scanning span {

    color:
        var(--cyan);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 3px;

    animation:
        scanningText 1s infinite;

}


@keyframes scanningText {

    50% {
        opacity: .3;
    }

}


/* ============================================================
   MAP BOTTOM
   ============================================================ */

.map-bottom {

    position: absolute;

    bottom: 0;

    left: 0;
    right: 0;

    height: 35px;

    padding:
        0 15px;

    border-top:
        1px solid rgba(69,217,255,.08);

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #486773;

    font-family: monospace;

    font-size: 7px;

    letter-spacing: 1px;
}


.legend-dot {

    display: inline-block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--cyan);

    margin: 0 5px 0 10px;

}


.legend-line {

    display: inline-block;

    width: 20px;
    height: 1px;

    background:
        var(--cyan);

    margin:
        0 5px 0 10px;
}


/* ============================================================
   PLANET PANEL
   ============================================================ */

.planet-panel {

    position: relative;

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

    background:
        rgba(3,13,19,.92);

    padding: 22px;

    overflow-y: auto;

    z-index: 10;
}


.panel-close {

    position: absolute;

    right: 15px;
    top: 15px;

    width: 30px;
    height: 30px;

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

    background:
        transparent;

    color: #60808c;

    cursor: pointer;

    font-size: 20px;

    transition: .2s;
}


.panel-close:hover {

    color: var(--cyan);

    border-color:
        var(--cyan);

}


.planet-panel-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.planet-status {

    font-family: monospace;

    color: #60e990;

    font-size: 7px;

    letter-spacing: 1px;
}


/* ============================================================
   PLANET VISUAL
   ============================================================ */

.planet-visual {

    height: 190px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}


.planet-large {

    width: 105px;
    height: 105px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            white,
            var(--planet-color) 18%,
            color-mix(
                in srgb,
                var(--planet-color) 55%,
                black
            ) 70%,
            #020608
        );

    box-shadow:
        0 0 30px var(--planet-color),
        0 0 80px
            color-mix(
                in srgb,
                var(--planet-color) 25%,
                transparent
            );

    position: relative;

    transition:
        background .4s,
        box-shadow .4s;

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


@keyframes planetFloat {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


.planet-large span {

    position: absolute;

    width: 140%;

    height: 25px;

    left: -20%;

    top: 40%;

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

    border-radius: 50%;

    transform:
        rotate(-18deg);

}


.planet-orbit-large {

    position: absolute;

    width: 180px;
    height: 65px;

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

    border-radius: 50%;

    transform:
        rotate(-20deg);

    animation:
        largeOrbit 12s linear infinite;

}


@keyframes largeOrbit {

    to {
        transform:
            rotate(340deg);
    }

}


/* ============================================================
   PLANET HEADING
   ============================================================ */

.planet-region {

    color:
        var(--gold);

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.planet-heading h2 {

    margin:
        6px 0;

    font-size: 31px;

    letter-spacing: -1px;

    color: white;
}


.planet-faction {

    color:
        var(--cyan);

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.planet-description {

    color:
        #6d8c97;

    line-height: 1.6;

    font-size: 11px;

    margin:
        18px 0;
}


/* ============================================================
   PLANET DATA
   ============================================================ */

.planet-data-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap: 1px;

    background:
        rgba(69,217,255,.1);

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


.planet-data-grid div {

    padding: 12px;

    background:
        #041017;
}


.planet-data-grid span,
.history-event span {

    display: block;

    color:
        #45626d;

    font-family: monospace;

    font-size: 7px;

    margin-bottom: 5px;
}


.planet-data-grid strong {

    color:
        #b4cbd2;

    font-size: 9px;

}


/* ============================================================
   HISTORY
   ============================================================ */

.planet-history,
.planet-characters {

    margin-top: 22px;

    padding-top: 15px;

    border-top:
        1px solid rgba(69,217,255,.08);
}


.history-event {

    margin-top: 12px;

    display: flex;

    justify-content: space-between;

    gap: 15px;
}


.history-event strong {

    color:
        #9ab2ba;

    font-size: 9px;

    text-align: right;
}


.character-list {

    display:
        flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 12px;
}


.character-list span {

    padding:
        6px 8px;

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

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

    color:
        #73919b;

    font-family: monospace;

    font-size: 7px;

}


/* ============================================================
   FLY BUTTON
   ============================================================ */

.fly-button {

    width: 100%;

    margin-top: 25px;

    padding:
        13px;

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

    background:
        rgba(69,217,255,.07);

    color:
        var(--cyan);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 1px;

    cursor: pointer;

    transition: .3s;
}


.fly-button:hover {

    background:
        var(--cyan);

    color:
        #021017;

    box-shadow:
        0 0 30px rgba(69,217,255,.3);

}


.fly-button span {

    margin-right: 7px;

}


/* ============================================================
   JUMP EFFECT
   ============================================================ */

.jump-effect {

    animation:
        galaxyJump .9s ease;
}


@keyframes galaxyJump {

    0% {
        filter:
            blur(0)
            brightness(1);

        transform:
            scale(1);
    }

    40% {

        filter:
            blur(4px)
            brightness(2);

        transform:
            scale(1.04);

    }

    100% {

        filter:
            blur(0)
            brightness(1);

        transform:
            scale(1);

    }

}


/* ============================================================
   SHOOTING STARS
   ============================================================ */

.shooting-star {

    position: absolute;

    width: 100px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            white
        );

    transform:
        rotate(-30deg);

    pointer-events: none;

    z-index: 5;

    animation:
        shootingStar 1.2s linear forwards;

}


@keyframes shootingStar {

    0% {

        opacity: 0;

        transform:
            translate(0,0)
            rotate(-30deg);

    }

    15% {
        opacity: 1;
    }

    100% {

        opacity: 0;

        transform:
            translate(250px,150px)
            rotate(-30deg);

    }

}


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

@media (max-width: 1100px) {

    .galaxy-interface {

        grid-template-columns:
            160px minmax(0,1fr);

    }


    .planet-panel {

        position: absolute;

        right: 0;
        top: 0;
        bottom: 0;

        width: 330px;

        transform:
            translateX(100%);

        transition:
            transform .4s ease;

        box-shadow:
            -20px 0 50px rgba(0,0,0,.5);

    }


    .planet-panel.open {

        transform:
            translateX(0);

    }

}


@media (max-width: 750px) {

    .galaxy-header {

        flex-direction: column;

        align-items: flex-start;

    }


    .galaxy-status {

        text-align: left;

    }


    .galaxy-interface {

        width: 96%;

        height: 600px;

        grid-template-columns:
            1fr;

    }


    .galaxy-sidebar {

        display: none;

    }


    .planet-panel {

        width: 90%;

    }


    .galaxy-title {

        font-size: 46px;

    }


    .galaxy-controls {

        width: 96%;

    }


    .galaxy-search {

        width: 100%;

    }


    .galaxy-filter {

        width: 100%;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;

    }


    .filter-btn {

        flex-shrink: 0;

    }

}


@media (max-width: 500px) {

    .galaxy-interface {

        height: 520px;

    }


    .map-topbar div:last-child {

        display: none;

    }


    .planet-label {

        font-size: 7px;

    }


    .planet-panel {

        width: 100%;

    }

}

/* =========================================================
   AUREBESH
   ========================================================= */

.aurebesh-toggle,
.sound-toggle {

    position: fixed;

    right: 20px;

    z-index: 700;

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

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

    color: var(--gold);

    padding: 10px 14px;

    font-family: var(--font-mono);

    font-size: 8px;

    letter-spacing: 1px;

    transition: .3s;
}

.aurebesh-toggle {

    bottom: 20px;
}

.sound-toggle {

    bottom: 64px;

    border-color: var(--blue);

    color: var(--blue);
}

.aurebesh-toggle:hover,
.sound-toggle:hover {

    box-shadow:
        0 0 20px rgba(53,216,255,.15);
}

body.aurebesh-mode {

    letter-spacing: .5px;
}

body.aurebesh-mode h1,
body.aurebesh-mode h2,
body.aurebesh-mode h3,
body.aurebesh-mode p,
body.aurebesh-mode a,
body.aurebesh-mode button {

    animation: glitchText .2s ease;
}

@keyframes glitchText {

    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(2px);
    }

    75% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(0);
    }
}


/* =========================================================
   HYPERSPACE
   ========================================================= */

body.hyperdrive .global-stars {

    animation:
        hyperdrive 1.5s ease-in forwards;
}

body.hyperdrive .global-stars-small {

    animation:
        hyperdriveSmall 1.5s ease-in forwards;
}

body.hyperdrive #page-content {

    animation:
        hyperspaceFade 1.5s ease forwards;
}

@keyframes hyperdrive {

    to {

        transform:
            scaleX(7)
            scaleY(.15);

        opacity: 1;
    }
}

@keyframes hyperdriveSmall {

    to {

        transform:
            scaleX(15)
            scaleY(.05);

        opacity: .8;
    }
}

@keyframes hyperspaceFade {

    0% {
        opacity: 1;
    }

    60% {
        opacity: .2;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   SITH MODE
   ========================================================= */

body.sith-mode {

    --blue: #ff405d;

    --border:
        rgba(255,64,93,.25);

    --gold: #ff8c42;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(110,0,20,.2),
            transparent 40%
        ),
        #050205;
}

body.sith-mode .global-stars {

    opacity: .1;
}

body.sith-mode .status-dot {

    background: var(--red);

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

body.sith-mode .archive-card.jedi-card {

    border-color:
        rgba(255,64,93,.2);
}

body.sith-mode .archive-card {

    animation:
        sithPulse 2.5s infinite alternate;
}

@keyframes sithPulse {

    from {
        box-shadow:
            0 0 0 rgba(255,0,40,0);
    }

    to {
        box-shadow:
            0 0 18px rgba(255,0,40,.08);
    }
}


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

@media (max-width: 1100px) {

    .main-nav a {

        padding: 0 8px;

        font-size: 8px;
    }

    .header-status {
        display: none;
    }

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

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

}


@media (max-width: 800px) {

    .main-header {

        height: auto;

        min-height: 70px;

        flex-wrap: wrap;

        padding: 15px 20px;
    }

    .main-nav {

        order: 3;

        width: 100%;

        overflow-x: auto;

        height: 45px;
    }

    .main-nav a {

        white-space: nowrap;
    }

    .page {

        width: 92%;

        padding-top: 45px;
    }

    .home-hero {

        grid-template-columns: 1fr;
    }

    .holocron-display {

        height: 350px;
    }

    .quick-grid {

        grid-template-columns: 1fr;
    }

    .quick-card {

        border-right: 0;

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

    .news-card {

        flex-basis: 85%;
    }

    .forge-workspace {

        grid-template-columns: 1fr;
    }

    .forge-controls {

        border-right: 0;

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

    .workbench {

        min-height: 520px;
    }

    .archive-toolbar {

        grid-template-columns: 1fr;

        gap: 15px;
    }

    .archive-grid {

        grid-template-columns: 1fr;
    }

    .holonet-header,
    .galaxy-header,
    .forge-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .era-display {

        grid-template-columns: 1fr;

        gap: 15px;

        padding: 30px;
    }

    .era-faction {
        margin-top: 15px;
    }

    .event-grid {

        grid-template-columns: 1fr;
    }

    .answer-grid {

        grid-template-columns: 1fr;
    }

    .terms-grid {

        grid-template-columns: 1fr;
    }

    .galaxy-workspace {

        grid-template-columns: 1fr;
    }

    .galaxy-map {

        min-height: 500px;
    }

    .planet-panel {

        border-left: 0;

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

    .beginner-banner {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

}


@media (max-width: 500px) {

    h1 {
        font-size: 55px;
    }

    .hero-buttons {

        flex-direction: column;
    }

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

    .forge-actions {

        flex-direction: column;

        padding: 0 20px;
    }

    .forge-actions .btn {
        width: 100%;
    }

    .quiz-card {
        padding: 25px;
    }

    .era-info h2 {
        font-size: 38px;
    }

}