/* =========================================================
   COSMIC CHARACTER ARCHIVE
   ========================================================= */


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

:root {

    --background:
        #07030f;

    --background-2:
        #0d0618;

    --panel:
        rgba(13, 7, 27, 0.94);

    --panel-light:
        rgba(30, 15, 48, 0.92);

    --purple:
        #a83cff;

    --purple-bright:
        #d66cff;

    --green:
        #66ff9c;

    --green-bright:
        #a2ffc1;

    --cyan:
        #55eaff;

    --text:
        #eee5ff;

    --muted:
        #988ca9;

    --border:
        #7935a8;

}


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

* {
    box-sizing: border-box;
}


html,
body {

    width: 100%;
    height: 100%;

    margin: 0;

}


body {

    overflow: hidden;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

}


/* ================= FONDO ================= */

.space-background {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 20% 20%,
            rgba(126, 36, 191, 0.28),
            transparent 38%
        ),

        radial-gradient(
            ellipse at 80% 80%,
            rgba(25, 160, 93, 0.20),
            transparent 38%
        ),

        radial-gradient(
            ellipse at 50% 50%,
            rgba(77, 21, 111, 0.15),
            transparent 55%
        ),

        var(--background);

}


/* ================= ESTRELLAS ================= */

.stars {

    position: absolute;

    inset: -50%;

    background-repeat:
        repeat;

    opacity: 0.75;

}


.stars-1 {

    background-image:
        radial-gradient(
            circle,
            white 1px,
            transparent 1px
        );

    background-size:
        85px 85px;

    transform:
        rotate(8deg);

}


.stars-2 {

    background-image:
        radial-gradient(
            circle,
            var(--green) 1px,
            transparent 1px
        );

    background-size:
        137px 137px;

    transform:
        rotate(-12deg);

    opacity:
        0.35;

}


.stars-3 {

    background-image:
        radial-gradient(
            circle,
            var(--purple-bright) 1px,
            transparent 1px
        );

    background-size:
        211px 211px;

    transform:
        rotate(17deg);

    opacity:
        0.30;

}


/* ================= SITIO ================= */

.site {

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100vh;

    height: 100dvh;

    padding:
        10px;

    display: flex;

    flex-direction: column;

}


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

.header {

    height:
        76px;

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        22px;

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

    background:
        linear-gradient(
            90deg,
            rgba(27, 8, 50, 0.96),
            rgba(9, 31, 24, 0.96),
            rgba(27, 8, 50, 0.96)
        );

    box-shadow:

        0 0 10px
        rgba(168, 60, 255, 0.65),

        inset 0 0 20px
        rgba(90, 255, 161, 0.06);

}


.logo {

    text-align:
        center;

}


.logo h1 {

    margin:
        0;

    font-size:
        clamp(20px, 2.5vw, 34px);

    letter-spacing:
        2px;

    color:
        white;

    text-shadow:

        0 0 4px
        var(--purple-bright),

        0 0 13px
        var(--purple);

}


.logo p {

    margin:
        3px 0 0;

    font-size:
        10px;

    letter-spacing:
        5px;

    color:
        var(--green);

}


.logo-symbol {

    font-size:
        27px;

    color:
        var(--green);

    text-shadow:
        0 0 12px
        var(--green);

}


/* ================= CONTENIDO ================= */

.content {

    flex:
        1;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(155px, 17%)
        minmax(0, 1fr)
        minmax(155px, 17%);

    gap:
        10px;

    margin-top:
        10px;

}


/* ================= SIDEBARS ================= */

.sidebar {

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.panel {

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

    background:
        var(--panel);

    box-shadow:

        0 0 8px
        rgba(168, 60, 255, 0.30),

        inset 0 0 18px
        rgba(101, 48, 138, 0.12);

}


.panel-title {

    padding:
        8px 5px;

    text-align:
        center;

    color:
        white;

    background:
        linear-gradient(
            90deg,
            #19072b,
            #30104a,
            #19072b
        );

    border-bottom:
        2px solid var(--green);

    font-size:
        clamp(12px, 1vw, 15px);

    font-weight:
        bold;

    letter-spacing:
        1px;

    text-shadow:
        0 0 6px var(--purple);

}


/* ================= NAVEGACIÓN ================= */

.navigation {

    display:
        flex;

    flex-direction:
        column;

    padding:
        8px;

    gap:
        5px;

}


.navigation a {

    display:
        block;

    padding:
        7px 8px;

    color:
        var(--green);

    text-decoration:
        none;

    font-size:
        11px;

    border:
        1px solid transparent;

    transition:
        0.18s ease;

}


.navigation a:hover {

    color:
        white;

    border-color:
        var(--green);

    background:
        rgba(79, 255, 153, 0.10);

    text-shadow:
        0 0 7px var(--green);

    transform:
        translateX(3px);

}


/* ================= ESTADÍSTICAS ================= */

.stats-panel {

    padding-bottom:
        8px;

}


.stat {

    padding:
        10px 8px;

    text-align:
        center;

}


.stat span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        9px;

    letter-spacing:
        2px;

}


.stat strong {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--green-bright);

    font-family:
        "Courier New",
        monospace;

    font-size:
        19px;

    letter-spacing:
        3px;

    text-shadow:
        0 0 8px var(--green);

}


.status {

    margin:
        2px 8px 4px;

    padding:
        5px;

    text-align:
        center;

    color:
        var(--green);

    border:
        1px solid #286e49;

    background:
        rgba(40, 255, 130, 0.06);

    font-size:
        8px;

    letter-spacing:
        1px;

}


.status-dot {

    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    margin-right:
        4px;

    border-radius:
        50%;

    background:
        var(--green);

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

}


/* ================= MINI PANEL ================= */

.mini-panel {

    flex:
        1;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    padding:
        12px;

}


.cosmic-symbol {

    font-size:
        38px;

    color:
        var(--green);

    text-shadow:
        0 0 14px var(--green),
        0 0 30px var(--purple);

}


.mini-panel p {

    max-width:
        170px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.5;

}


/* ================= CENTRO ================= */

.main {

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

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

    background:
        rgba(7, 5, 14, 0.78);

    box-shadow:
        0 0 14px
        rgba(168, 60, 255, 0.35);

    padding:
        clamp(12px, 2vw, 25px);

}


/* ================= INTRO ================= */

.intro {

    text-align:
        center;

    flex:
        0 0 auto;

}


.intro h2 {

    margin:
        3px 0;

    font-size:
        clamp(20px, 2vw, 29px);

    color:
        white;

    letter-spacing:
        2px;

    text-shadow:
        0 0 8px var(--purple);

}


.intro p {

    margin:
        5px 0;

    color:
        var(--green);

    font-size:
        9px;

    letter-spacing:
        2px;

}


.decorative-line {

    color:
        var(--purple-bright);

    font-size:
        11px;

    text-shadow:
        0 0 7px var(--purple);

}


/* ================= TARJETAS ================= */

.archive-grid {

    flex:
        1;

    min-height:
        0;

    display:
        grid;

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

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;

    margin-top:
        14px;

}


/* ================= CARD ================= */

.archive-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    padding:
        18px;

    text-decoration:
        none;

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

    background:

        radial-gradient(
            circle at center,
            rgba(91, 27, 127, 0.28),
            transparent 65%
        ),

        linear-gradient(
            145deg,
            rgba(24, 9, 38, 0.98),
            rgba(8, 27, 20, 0.98)
        );

    box-shadow:
        inset 0 0 20px
        rgba(138, 48, 192, 0.12);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.archive-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        5px;

    border:
        1px solid rgba(102, 255, 156, 0.25);

    pointer-events:
        none;

}


.archive-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--green);

    box-shadow:

        0 0 12px
        rgba(102, 255, 156, 0.45),

        inset 0 0 25px
        rgba(168, 60, 255, 0.18);

}


/* ================= CARD STARS ================= */

.card-stars {

    position:
        absolute;

    top:
        8px;

    left:
        0;

    width:
        100%;

    color:
        #816c91;

    font-size:
        9px;

}


/* ================= ICON ================= */

.planet-icon {

    width:
        clamp(45px, 5vw, 70px);

    height:
        clamp(45px, 5vw, 70px);

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin-bottom:
        8px;

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

    border-radius:
        50%;

    color:
        var(--green);

    font-size:
        clamp(23px, 2.5vw, 35px);

    text-shadow:
        0 0 10px var(--green);

    box-shadow:

        0 0 12px
        rgba(102, 255, 156, 0.35),

        inset 0 0 12px
        rgba(168, 60, 255, 0.20);

}


/* ================= TEXTO CARD ================= */

.generation {

    color:
        white;

    font-size:
        clamp(20px, 2vw, 30px);

    font-weight:
        bold;

    letter-spacing:
        2px;

    text-shadow:

        0 0 5px white,

        0 0 12px var(--purple);

}


.card-description {

    margin-top:
        5px;

    color:
        var(--green);

    font-size:
        9px;

    letter-spacing:
        1px;

}


.card-count {

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        9px;

}


.enter {

    margin-top:
        13px;

    padding:
        5px 10px;

    color:
        var(--purple-bright);

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

    font-size:
        9px;

    letter-spacing:
        1px;

}


.archive-card:hover .enter {

    color:
        var(--green);

    border-color:
        var(--green);

}


/* ================= NO OFICIALES ================= */

.unofficial {

    grid-column:
        1 / -1;

}


.unofficial .planet-icon {

    color:
        var(--purple-bright);

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

    text-shadow:
        0 0 12px var(--purple);

    box-shadow:
        0 0 15px
        rgba(168, 60, 255, 0.45);

}


.unofficial .card-description {

    color:
        var(--purple-bright);

}


/* ================= MENSAJE ================= */

.archive-message {

    flex:
        0 0 auto;

    margin-top:
        12px;

    padding:
        8px;

    text-align:
        center;

    border-top:
        1px solid #3e3150;

    border-bottom:
        1px solid #3e3150;

    color:
        #8d7d99;

    font-size:
        9px;

    letter-spacing:
        2px;

}


.archive-message span {

    color:
        var(--green);

}


/* ================= RIGHT UPDATE ================= */

.update-panel {

    padding-bottom:
        10px;

}


.update-date {

    padding:
        12px 10px 4px;

    color:
        var(--green);

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

}


.update-panel p {

    padding:
        0 10px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.45;

}


.update-status {

    margin:
        5px 8px;

    padding:
        5px;

    text-align:
        center;

    color:
        var(--purple-bright);

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

    font-size:
        8px;

}


/* ================= CONSTELACIÓN ================= */

.constellation {

    flex:
        1;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

}


.constellation-art {

    color:
        var(--green);

    font-size:
        22px;

    text-shadow:
        0 0 10px var(--green);

}


.constellation-art span {

    color:
        var(--purple-bright);

    font-size:
        10px;

}


.constellation p {

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.5;

    letter-spacing:
        2px;

}


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

footer {

    height:
        28px;

    min-height:
        28px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-top:
        10px;

    padding:
        0 12px;

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

    background:
        rgba(8, 3, 15, 0.95);

    color:
        #756a82;

    font-size:
        8px;

    letter-spacing:
        1px;

}


/* =========================================================
   PANTALLAS PEQUEÑAS
   ========================================================= */

@media (max-width: 800px) {

    .site {

        padding:
            5px;

    }


    .content {

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

        gap:
            5px;

    }


    .header {

        height:
            60px;

        min-height:
            60px;

    }


    .logo h1 {

        font-size:
            17px;

    }


    .logo p {

        font-size:
            7px;

    }


    .archive-grid {

        gap:
            7px;

    }


    .generation {

        font-size:
            17px;

    }

}