:root{
    /* ===== THE CYBERVoid / MABBS PALETTE =====
       Interface = fria / digital
       Personagem = quente / vermelho / laranja
    */

    --black:#030305;
    --black-2:#07070b;
    --panel:#0b0b10;
    --panel-2:#101018;

    --cyan:#18e6ff;
    --cyan-dim:#087c8e;

    --blue:#315cff;
    --blue-dim:#18234f;

    --purple:#7628ff;
    --purple-dim:#24124a;

    --pink:#ff3fc7;
    --pink-dim:#591443;

    --lime:#c7ff19;
    --lime-dim:#607d0b;

    --white:#eeeeee;
    --gray:#a9a9b6;
    --gray-dark:#555563;

    --line:#292936;
    --line-light:#444456;

    --shadow-cyan:rgba(24,230,255,.18);
    --shadow-purple:rgba(118,40,255,.18);
    --shadow-pink:rgba(255,63,199,.16);
}

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;

    background:
        radial-gradient(
            ellipse at 75% 18%,
            rgba(49,92,255,.10) 0%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 25% 75%,
            rgba(118,40,255,.07) 0%,
            transparent 32%
        ),
        #030305;

    color:var(--white);

    font-family:'VT323', monospace;
    font-size:24px;
    line-height:1.05;

    overflow-x:hidden;
}

/* =========================================================
   OLD WEB / CRT TEXTURE
   ========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:9997;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 50%,
            transparent 50%
        );

    background-size:100% 4px;

    opacity:.25;
}

body::after{
    content:"";
    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:9996;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0,0,0,.32) 100%
        );

    box-shadow:
        inset 0 0 120px rgba(0,0,0,.75);
}

.scanlines{
    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:9999;

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

    mix-blend-mode:screen;
    opacity:.28;
}

/* =========================================================
   TOP BAR
   ========================================================= */

.topbar{
    min-height:38px;

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

    padding:8px 18px;

    background:#020204;

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

    box-shadow:
        0 2px 0 rgba(24,230,255,.18),
        0 5px 18px rgba(0,0,0,.7);

    font-family:'Press Start 2P', monospace;
    font-size:9px;

    letter-spacing:.2px;
}

.welcome{
    color:var(--lime);

    text-shadow:
        0 0 5px rgba(199,255,25,.4);
}

.welcome::before{
    content:"◈ ";
    color:var(--pink);
}

.player{
    color:var(--gray);
}

.player::before{
    content:"NOW PLAYING: ";
    color:var(--cyan);
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.layout{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:14px;

    max-width:1450px;
    margin:0 auto;

    padding:14px;
}

main{
    min-width:0;
}

.sidebar{
    display:flex;
    flex-direction:column;
    gap:14px;

    min-width:0;
}

/* =========================================================
   WINDOWS
   ========================================================= */

.window{
    position:relative;

    background:
        linear-gradient(
            135deg,
            rgba(24,230,255,.025),
            transparent 28%
        ),
        linear-gradient(
            315deg,
            rgba(118,40,255,.035),
            transparent 35%
        ),
        var(--panel);

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

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.015),
        0 8px 22px rgba(0,0,0,.28);

    overflow:hidden;

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

.window:hover{
    border-color:#505066;

    box-shadow:
        inset 0 0 20px rgba(24,230,255,.025),
        0 8px 24px rgba(0,0,0,.4),
        0 0 10px rgba(118,40,255,.06);
}

/* =========================================================
   WINDOW TITLE BAR
   ========================================================= */

.titlebar{
    min-height:32px;

    display:flex;
    align-items:center;

    padding:7px 9px;

    background:
        linear-gradient(
            90deg,
            #12121b 0%,
            #191529 50%,
            #101018 100%
        );

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

    color:#d7d7e2;

    font-family:'Press Start 2P', monospace;
    font-size:9px;

    letter-spacing:.2px;

    text-shadow:0 1px #000;
}

.titlebar::before{
    content:"■";

    margin-right:8px;

    color:var(--pink);

    text-shadow:
        0 0 6px rgba(255,63,199,.5);
}

.titlebar::after{
    content:"×";

    margin-left:auto;

    color:var(--gray-dark);

    font-family:Arial,sans-serif;
    font-size:13px;
}

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

.menu{
    list-style:none;

    padding:13px 12px;
}

.menu li{
    margin-bottom:8px;

    border-bottom:1px dotted #22222c;
}

.menu li:last-child{
    margin-bottom:0;
}

.menu li::before{
    content:">";

    display:inline-block;
    width:19px;

    color:var(--pink);

    transition:.15s ease;
}

.menu a{
    color:#d8d8df;

    text-decoration:none;

    transition:.15s ease;
}

.menu a:hover{
    color:var(--cyan);

    text-shadow:
        0 0 6px rgba(24,230,255,.45);
}

.menu li:hover::before{
    color:var(--lime);

    transform:translateX(3px);
}

/* =========================================================
   STATUS
   ========================================================= */

.status{
    padding:13px;
}

.status img{
    width:96px;
    height:96px;

    display:block;
    margin:0 auto 12px;

    object-fit:contain;
    image-rendering:auto;

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

    background:
        radial-gradient(
            circle,
            rgba(118,40,255,.12),
            transparent 70%
        );

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

.status p{
    color:var(--gray);

    margin:4px 0;
}

.status p::first-letter{
    color:var(--cyan);
}

.bar{
    position:relative;

    height:14px;

    margin-top:13px;

    background:#171720;

    border:1px solid #3a3a47;

    overflow:hidden;
}

.fill{
    width:75%;
    height:100%;

    background:
        repeating-linear-gradient(
            90deg,
            var(--lime) 0,
            var(--lime) 7px,
            var(--lime-dim) 7px,
            var(--lime-dim) 9px
        );

    box-shadow:
        0 0 8px rgba(199,255,25,.35);
}

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

.hero{
    margin-bottom:14px;
}

.hero-content{
    min-height:440px;

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,430px);
    align-items:center;

    gap:15px;

    padding:24px;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.98) 0%,
            rgba(7,7,13,.94) 45%,
            rgba(14,10,29,.82) 100%
        );
}

/* linhas decorativas do painel */

.hero-content::before{
    content:"SYSTEM // MABBS.sh // INSTANCE_341";

    position:absolute;
    top:43px;
    left:27px;

    color:#464652;

    font-family:'Press Start 2P', monospace;
    font-size:7px;

    letter-spacing:.4px;
}

.hero-content::after{
    content:"ONLINE";

    position:absolute;
    right:20px;
    bottom:14px;

    color:var(--lime);

    font-family:'Press Start 2P', monospace;
    font-size:7px;

    text-shadow:
        0 0 6px rgba(199,255,25,.35);
}

.hero-text{
    position:relative;
    z-index:3;

    padding-top:28px;
}

.hero h1{
    display:inline-block;

    margin-bottom:8px;

    font-size:clamp(68px,8vw,110px);
    line-height:.8;

    color:var(--lime);

    letter-spacing:-2px;

    text-shadow:
        3px 0 var(--pink),
        -2px 0 var(--cyan),
        0 0 18px rgba(199,255,25,.18);
}

.hero h2{
    max-width:620px;

    margin:16px 0;

    color:var(--cyan);

    font-family:'VT323',monospace;
    font-size:31px;
    font-weight:400;

    text-shadow:
        0 0 7px rgba(24,230,255,.3);
}

.hero p{
    max-width:580px;

    color:#c7c7d2;

    line-height:1.12;
}

.hero-image{
    position:relative;

    align-self:stretch;

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

    min-height:390px;

    overflow:visible;

    background:
        radial-gradient(
            ellipse at 50% 58%,
            rgba(24,230,255,.13) 0%,
            rgba(49,92,255,.08) 25%,
            rgba(118,40,255,.07) 43%,
            transparent 69%
        );

    border-left:1px solid rgba(24,230,255,.35);
    border-right:1px solid rgba(255,63,199,.18);
}

.hero-image::before{
    content:"CHARACTER // SIGNAL LOCKED";

    position:absolute;
    top:7px;
    left:10px;

    color:var(--pink);

    font-family:'Press Start 2P',monospace;
    font-size:7px;

    text-shadow:
        0 0 6px rgba(255,63,199,.35);
}

.hero-image::after{
    content:"01 10 01 00 11";

    position:absolute;
    right:8px;
    bottom:8px;

    color:#343444;

    font-family:'VT323',monospace;
    font-size:17px;
}

.hero-image img{
    position:relative;
    z-index:2;

    width:min(100%,430px);
    max-height:500px;

    object-fit:contain;

    /* IMPORTANTE:
       não altera a paleta do personagem.
       O brilho frio fica ao redor dele. */
    filter:
        drop-shadow(0 0 7px rgba(24,230,255,.45))
        drop-shadow(0 12px 16px rgba(0,0,0,.65));

    transform:translateY(3px);

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

.hero-image:hover img{
    transform:translateY(-3px);

    filter:
        drop-shadow(0 0 9px rgba(24,230,255,.65))
        drop-shadow(0 0 16px rgba(118,40,255,.28))
        drop-shadow(0 15px 18px rgba(0,0,0,.65));
}

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

button{
    margin-top:20px;

    padding:8px 16px;

    background:#09090e;

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

    color:var(--cyan);

    font-family:'VT323',monospace;
    font-size:22px;

    cursor:pointer;

    box-shadow:
        inset 0 0 10px rgba(24,230,255,.035);

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
}

button:hover{
    background:var(--cyan);

    color:#020305;

    border-color:var(--lime);

    box-shadow:
        0 0 10px rgba(24,230,255,.45);
}

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

/* =========================================================
   THREE INFORMATION CARDS
   ========================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:14px;

    margin-bottom:14px;
}

.card{
    min-height:160px;
    padding-bottom:14px;
}

.card ul{
    padding:15px 28px;
}

.card p{
    padding:14px 16px;

    color:#c9c9d3;
}

.card li{
    margin-bottom:4px;
}

.card li::marker{
    color:var(--pink);
}

/* =========================================================
   TERMINAL
   ========================================================= */

.terminal{
    margin-bottom:14px;
}

#terminal{
    min-height:220px;

    padding:18px;

    background:
        radial-gradient(
            ellipse at 75% 20%,
            rgba(24,230,255,.05),
            transparent 35%
        ),
        #020204;

    color:var(--lime);

    font-family:'VT323',monospace;
    font-size:24px;

    line-height:1.1;

    text-shadow:
        0 0 6px rgba(199,255,25,.3);

    overflow:auto;
}

#terminal::selection{
    background:var(--lime);
    color:#000;
}

/* =========================================================
   GALLERY
   ========================================================= */

.gallery{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:9px;

    padding:14px;
}

.gallery img{
    width:100%;
    aspect-ratio:1 / 1;

    display:block;

    object-fit:cover;

    background:#05050a;

    border:1px solid #292936;

    filter:
        saturate(.82)
        contrast(1.04);

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

.gallery img:hover{
    border-color:var(--pink);

    filter:
        saturate(1.05)
        contrast(1.08);

    transform:translateY(-2px);

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

/* =========================================================
   MUSIC PLAYER
   ========================================================= */

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

    gap:18px;

    padding:16px;
}

.music img{
    width:170px;
    height:170px;

    object-fit:cover;

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

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

.music h3{
    color:var(--cyan);

    font-size:28px;
}

.music p{
    color:var(--gray);
}

.controls{
    margin-top:4px;
}

.controls button{
    min-width:48px;

    margin-right:4px;
    margin-top:12px;

    padding:6px 10px;
}

/* =========================================================
   LINKS
   ========================================================= */

.links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    padding:15px;
}

.links a{
    padding:5px 9px;

    color:var(--pink);

    border:1px solid transparent;

    text-decoration:none;

    transition:.15s ease;
}

.links a:hover{
    color:var(--lime);

    border-color:#30302e;

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

    text-shadow:
        0 0 7px rgba(199,255,25,.35);
}

/* =========================================================
   SMALL CYBERPUNK DETAILS
   ========================================================= */

.hero h1::after{
    content:"_";

    color:var(--pink);

    animation:cursorBlink 1s steps(1) infinite;
}

@keyframes cursorBlink{
    0%,49%{
        opacity:1;
    }

    50%,100%{
        opacity:0;
    }
}

a{
    text-underline-offset:3px;
}

::selection{
    background:var(--pink);
    color:#050505;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#030305;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            var(--purple),
            var(--cyan)
        );

    border:2px solid #030305;
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            var(--pink),
            var(--cyan)
        );
}

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

@media(max-width:1050px){

    .layout{
        grid-template-columns:210px minmax(0,1fr);
    }

    .hero-content{
        grid-template-columns:minmax(0,1fr) minmax(240px,340px);
    }

    .hero-image{
        min-height:360px;
    }

    .hero-image img{
        max-height:430px;
    }
}

@media(max-width:800px){

    .topbar{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

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

        padding:10px;
    }

    .sidebar{
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:start;
    }

    .hero-content{
        grid-template-columns:1fr;

        padding:20px;
    }

    .hero-text{
        padding-top:25px;
    }

    .hero-image{
        min-height:400px;

        border-left:0;
        border-right:0;
        border-top:1px solid rgba(24,230,255,.2);
    }

    .hero-image img{
        width:min(90%,430px);
    }

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

@media(max-width:520px){

    body{
        font-size:21px;
    }

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

    .hero h1{
        font-size:65px;
    }

    .hero h2{
        font-size:27px;
    }

    .hero-image{
        min-height:330px;
    }

    .hero-image img{
        max-height:370px;
    }

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

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

    .music img{
        width:140px;
        height:140px;
    }
}