/* =====================================================
   GLOBAL
===================================================== */

body{
    margin:0;
    background:radial-gradient(circle at top,#32105f,#0b0415);
    transition:1.2s;
}

.fade-out{opacity:0;transform:scale(1.05);}

.pixel{font-family:'Press Start 2P',cursive;}
.terminal{font-family:'VT323',monospace;}

.glow{
    text-shadow:0 0 8px #9333ea,0 0 20px #9333ea,0 0 40px #7e22ce;
}

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

button{
    box-shadow:0 0 20px #9333ea;
    transition:.25s;
}

button:hover{
    transform:scale(1.05);
}

.start-btn{
    font-family:'Press Start 2P';
    color:#fff;
    padding:18px 40px;
    background:#5b21b6;
    border:4px solid #a855f7;
}

/* ==================== EFFECTS ==================== */

.scanlines{
    position:fixed;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(
        rgba(255,255,255,.02) 0px,
        rgba(255,255,255,.02) 1px,
        transparent 2px,
        transparent 4px
    );
    animation:flicker .15s infinite;
}

#stars{
    position:fixed;
}

.star{
    position:absolute;
    width:2px;
    height:2px;
    background:#fff;
    border-radius:50%;
    animation:twinkle 3s infinite;
}

@keyframes flicker{
    0%,100%{opacity:.35;}
    50%{opacity:.28;}
}

@keyframes twinkle{
    0%,100%{opacity:.2;}
    50%{opacity:1;}
}

@keyframes blink{50%{opacity:0;}}
.blink{animation:blink 1.3s infinite;}

@keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
}
.floating{animation:float 3s ease-in-out infinite;}

/* ==================== PAGE TRANSITION ==================== */

#page-transition{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#090312;
    z-index:99999;
    animation:fade .9s forwards;
}

.pokeball{
    width:80px;
    animation:spin .9s ease;
}

@keyframes spin{
    from{transform:rotate(0) scale(.3);opacity:0;}
    to{transform:rotate(360deg) scale(1);opacity:1;}
}

@keyframes fade{
    70%{opacity:1;}
    100%{opacity:0;visibility:hidden;}
}

/* ====================== MENU =====================*/
.menu{ width:500px; padding:40px; background:#160d29; border:4px solid #8b5cf6; box-shadow:0 0 30px #6d28d9; } .title{ margin-bottom:50px; text-align:center; color:white; font-size:28px; text-shadow:0 0 20px #a855f7; } .menu ul{ list-style:none; padding:0; margin:0; } .menu li{ font-family:'VT323'; font-size:34px; color:#ddd6fe; padding:12px; transition:.2s; } .menu li.selected{ color:white; transform:translateX(15px); } .menu li.selected::before{ content:"► "; color:#c084fc; } .pixel{ font-family:'Press Start 2P', cursive; } .terminal{ font-family:'VT323', monospace; } .terminal p{ color:#d8b4fe; }

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

.player-window{
    width:min(1350px,95vw);
    height:85vh;
    margin:4vh auto 0;
    display:flex;
    flex-direction:column;
    background:#12081f;
    border:4px solid #8b5cf6;
    box-shadow:0 0 15px #7c3aed,0 0 60px rgba(124,58,237,.45);
    overflow:hidden;
}

.window-title{
    height:55px;
    display:flex;
    align-items:center;
    padding:0 20px;
    background:linear-gradient(90deg,#7c3aed,#a855f7);
    color:#fff;
    font-family:'Press Start 2P';
    font-size:12px;
}

.player-content{
    flex:1;
    display:grid;
    grid-template-columns:320px 1fr;
}

.playlist{
    background:#1a0f2d;
    border-right:3px solid #7c3aed;
    padding:25px;
    overflow-y:auto;
}

.playlist h2{
    text-align:center;
    color:#d8b4fe;
    font-family:'Press Start 2P';
    margin-bottom:30px;
    font-size:18px;
}

.playlist ul{list-style:none;padding:0;margin:0;}

.playlist li{
    padding:14px;
    color:#d8b4fe;
    font:32px 'VT323';
    cursor:pointer;
    transition:.25s;
}

.playlist li.active{
    color:#fff;
    transform:translateX(12px);
}

.playlist li.active::before{content:"► ";}

.right-panel{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 60px;
}

.viewer{
    padding:70px 50px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
}

#songTitle{
    font-family:'Press Start 2P';
    color:white;
    font-size:20px;

    margin-bottom:35px;
    text-align:center;
    line-height:1.6;
}

#description{

    font-family:'VT323';
    font-size:28px;

    color:#ddd6fe;

    text-align:center;

    line-height:1.7;

    margin-bottom:30px;
}

.spotify{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:auto;

    padding:20px;

}

.spotify iframe{

    border-radius:28px;

}