/* ======================================================
   BTVD PAGE - STYLE
   Purple Glass / Space Theme
====================================================== */


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    user-select:none;
    -webkit-user-select:none;
}


:root {

    --purple:#a855f7;
    --purple2:#c084fc;

    --bg:#050507;

    --panel:rgba(18,19,23,.82);

    --border:rgba(168,85,247,.35);

    --text:#e5e7eb;

}


body {

    width:100%;
    height:100vh;

    overflow:hidden;

    background:var(--bg);

    color:var(--text);

    font-family:
    Consolas,
    monospace;

}


body.dragging-window {

    cursor:grabbing;

}


body.gallery-bg #space {

    background:
    linear-gradient(rgba(5,5,7,.55),rgba(5,5,7,.82)),
    var(--gallery-bg) center/cover fixed;

}


body.theme-cyan {

    --purple:#22d3ee;
    --purple2:#67e8f9;
    --border:rgba(34,211,238,.35);

}


body.theme-red {

    --purple:#fb7185;
    --purple2:#fda4af;
    --border:rgba(251,113,133,.35);

}


body.theme-green {

    --purple:#34d399;
    --purple2:#86efac;
    --border:rgba(52,211,153,.35);

}



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


#space {

    position:fixed;

    inset:0;

    z-index:-1;


    background:

    radial-gradient(
        circle at center,
        #1b0933,
        #050507 70%
    );

}



.star {

    position:absolute;

    width:2px;

    height:2px;

    background:white;

    border-radius:50%;

    opacity:.5;

    animation:

    twinkle 4s infinite alternate;

}



@keyframes twinkle {

from {

opacity:.2;

transform:scale(1);

}


to {

opacity:1;

transform:scale(2);

}

}






/* =========================
   ENTER
========================= */


#enter {

    position:fixed;

    inset:0;


    display:flex;

    align-items:center;

    justify-content:center;


    background:#050507;


    z-index:999;


    cursor:pointer;


    transition:.6s;

}



#enter h1 {

    font-size:3rem;

    color:white;


    animation:pulse 2s infinite alternate;

}



#enter span {

    color:var(--purple);

    text-shadow:

    0 0 25px var(--purple);

}



@keyframes pulse {

from {

transform:scale(.95);

}

to {

transform:scale(1.05);

}

}







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


#dock {

    position:fixed;

    top:16px;

    right:16px;

    z-index:800;

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    justify-content:flex-end;

    max-width:360px;

    pointer-events:auto;

}


.shooting-star {

    position:absolute;

    width:90px;

    height:2px;

    opacity:0;

    border-radius:999px;

    background:linear-gradient(90deg,white,rgba(255,255,255,0));

    transform:rotate(135deg);

    animation:shooting-star 5s linear infinite;

}


.shooting-stars-off .shooting-star {

    display:none;

}


@keyframes shooting-star {

0% {

    opacity:0;

    transform:translate(0,0) rotate(135deg);

}

8% {

    opacity:.9;

}

28% {

    opacity:0;

    transform:translate(-360px,360px) rotate(135deg);

}

100% {

    opacity:0;

    transform:translate(-360px,360px) rotate(135deg);

}

}


.dock-btn {

    width:auto;

    margin:0;

    padding:8px 10px;

    font-size:.72rem;

    border-color:var(--border);

    background:rgba(18,19,23,.78);

    backdrop-filter:blur(12px);

}


#settings-toggle {

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:850;

    width:auto;

    margin:0;

    height:42px;

    width:42px;

    padding:0;

    font-size:1.1rem;

    border-color:var(--border);

    background:rgba(18,19,23,.86);

    backdrop-filter:blur(12px);

}


.window {


    position:absolute;


    width:340px;


    background:

    var(--panel);


    backdrop-filter:

    blur(18px);



    border:

    1px solid var(--border);



    border-radius:12px;



    overflow:hidden;



    box-shadow:


    0 20px 60px black,


    0 0 30px rgba(168,85,247,.15);



    opacity:0;


    transform:

    translateY(20px)

    scale(.96);



    transition:.3s;

    touch-action:none;



}


.window.dragging {

    transition:none;

}



.window.show {


    opacity:1;


    transform:none;


}



.window:hover {


    border-color:

    rgba(168,85,247,.8);


}






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


.header {


    height:42px;


    padding:0 14px;


    display:flex;


    justify-content:space-between;


    align-items:center;



    background:

    rgba(20,20,25,.9);



    color:var(--purple2);


    font-size:.8rem;


    cursor:move;

    touch-action:none;

}


.settings-window {

    position:fixed;

    width:250px;

    right:25px;

    bottom:76px;

    left:auto!important;

    top:auto!important;

}


.header:active {

    cursor:grabbing;

}



.close {

    cursor:pointer;

    color:#888;

    font-size:20px;

}


.close:hover {

    color:red;

}







/* =========================
   CONTENT
========================= */


.content {

    padding:14px;

}



.panel {


    padding:12px;


    border-radius:10px;


    background:

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


    border:

    1px solid rgba(255,255,255,.06);

}







/* =========================
   DISCORD
========================= */


.discord {

    display:flex;

    align-items:flex-start;

    gap:12px;

}



.discord-info {

    flex:1;

}



.avatar {


    width:55px;

    height:55px;


    border-radius:14px;


    object-fit:cover;


}



.status {


    width:12px;

    height:12px;


    border-radius:50%;


    background:#747f8d;


    margin-top:5px;


    box-shadow:

    0 0 10px currentColor;

}



.device {


    margin-top:5px;


    color:#9ca3af;


    font-size:.72rem;


}





.activity-box {


    margin-top:8px;


    color:#aaa;


    font-size:.75rem;


}



.activity-item {


    display:flex;


    gap:10px;


    align-items:center;


    margin-top:8px;


}



.activity-image {


    width:38px;

    height:38px;


    border-radius:8px;


}



.activity-title {


    color:white;


    font-weight:bold;


}



.activity-small {


    color:#999;


    font-size:.7rem;


}







/* =========================
   SPOTIFY BAR
========================= */


.spotify-progress {


    width:100%;


    height:5px;


    margin-top:8px;


    background:

    rgba(255,255,255,.1);


    border-radius:10px;


    overflow:hidden;


}



.spotify-progress-bar {


    height:100%;


    background:

    var(--purple);


    transition:.5s;

}







/* =========================
   CLOCKS
========================= */


.clocks p {


    display:flex;


    justify-content:space-between;


    padding:8px 0;


    color:#aaa;


}



.clocks b {


    color:white;

}







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


#gallery-img {


    width:100%;


    max-height:240px;


    object-fit:cover;


    border-radius:10px;


}







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


button {


    width:100%;


    margin-top:10px;


    padding:9px;


    border-radius:7px;



    background:

    rgba(40,40,50,.9);



    color:white;


    border:

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



    cursor:pointer;


}



button:hover {


    background:var(--purple);


    box-shadow:

    0 0 15px var(--purple);


}






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


#music {


    position:fixed;


    bottom:25px;


    left:25px;


    width:340px;



    padding:14px;


    background:

    rgba(18,19,23,.9);



    backdrop-filter:

    blur(15px);



    border:

    1px solid var(--border);


    border-radius:12px;



}



#track-name {


    color:white;


    margin-bottom:8px;


}


#profile-desc {

    white-space:pre-line;

}


.terminal-panel {

    min-height:150px;

}


#terminal-lines {

    display:grid;

    gap:6px;

    max-height:150px;

    overflow:hidden;

}


.terminal-line {

    color:#b7f7d4;

    font-size:.72rem;

    line-height:1.35;

}


.settings-actions {

    display:grid;

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

    gap:8px;

    margin-bottom:12px;

}


.settings-actions button,
.music-buttons button {

    display:grid;

    place-items:center;

    aspect-ratio:1;

    width:100%;

    min-width:0;

    padding:0;

    font-size:1rem;

}


.music-buttons button {

    flex:1;

}


#music-time {


    color:#9ca3af;


    font-size:.72rem;


    margin-bottom:8px;


}



.music-progress {


    width:100%;


    height:7px;


    margin-bottom:10px;


    border-radius:10px;


    overflow:hidden;


    cursor:pointer;


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


}



#music-progress-bar {


    width:0;


    height:100%;


    background:var(--purple);


}



.music-buttons {


    display:flex;


    gap:8px;


}


.music-buttons button {


    min-width:0;


}






input[type="range"] {


    width:100%;


    margin-top:10px;


}







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


@media(max-width:800px){


body {

    overflow:auto;

}


#dock {

    left:5%;

    right:5%;

    top:10px;

    max-width:none;

    justify-content:center;

}



.window {


    width:90%;


    left:5%!important;


}



#music {


    width:90%;


    left:5%;


}


#settings-toggle {

    right:5%;

    bottom:18px;

}


.settings-window {

    width:90%;

    right:5%;

    bottom:70px;

    left:auto!important;

}


}


.theme-grid {

    display:grid;

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

    gap:8px;

}


.settings-title {

    margin-bottom:8px;

    color:#9ca3af;

    font-size:.72rem;

}


.theme-swatch {

    height:42px;

    margin:0;

    border-radius:8px;

}


.theme-swatch.purple {

    background:#a855f7;

}


.theme-swatch.cyan {

    background:#22d3ee;

}


.theme-swatch.red {

    background:#fb7185;

}


.theme-swatch.green {

    background:#34d399;

}