/* =========================================
   BODY
========================================= */

body{
    margin:0;
    font-family:Arial,sans-serif;
    color:white;

    background:
    url("/tlo.jpg")
    center center fixed;

    background-size:cover;

    padding-bottom:120px;
}

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.72);

    z-index:-1;
}

/* =========================================
   BACK
========================================= */

.back{

    position:fixed;

    top:20px;
    left:20px;

    z-index:999;

    padding:10px 16px;

    text-decoration:none;

    color:#00eaff;

    border-radius:12px;

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

    background:
    rgba(0,255,255,.12);

    backdrop-filter:blur(10px);
}

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

.page-header{

    text-align:center;

    padding:40px 20px 20px;
}

.page-header h1{

    margin:0;

    color:#00eaff;

    text-shadow:
    0 0 12px #00eaff;
}

.page-header p{

    opacity:.8;
}

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

.player-bar{

    position:relative;

    width:fit-content;

    margin:25px auto 40px;

    padding:10px 18px;

    display:flex;

    align-items:center;

    gap:14px;

    border-radius:20px;

    overflow:hidden;

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

    background:
    rgba(0,0,0,.15);

    backdrop-filter:blur(8px);

    box-shadow:
    0 0 18px rgba(0,255,255,.22);
}

.player-bar::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    url("/tlo6.jpg")
    center center/cover
    no-repeat;

    opacity:.9;

    pointer-events:none;
}

.player-action{

    position:relative;

    z-index:2;

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:
    rgba(0,0,0,.45);

    color:white;

    cursor:pointer;

    font-size:18px;

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

    transition:.25s;
}

.player-action:hover{

    transform:scale(1.08);

    box-shadow:
    0 0 20px rgba(0,255,255,.45);
}

.current-track{

    position:relative;

    z-index:2;

    min-width:220px;

    text-align:center;
}

#barArtist{

    color:#00eaff;

    font-size:13px;

    font-weight:bold;

    text-transform:uppercase;
}

#barTitle{

    margin-top:4px;

    font-weight:bold;
}

/* =========================================
   TRACK GRID
========================================= */

.tracks{

    max-width:1200px;

    margin:0 auto;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:34px;
}

/* =========================================
   TRACK WRAPPER
========================================= */

.track-wrapper{

    width:140px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}

/* =========================================
   COVER
========================================= */

.track{

    width:120px;
    height:120px;

    border-radius:50%;

    position:relative;

    background-size:cover;

    background-position:center;

    border:
    2px solid rgba(0,255,255,.35);

    box-shadow:
    0 0 14px rgba(0,255,255,.22);

    transition:.25s;
}

.track:hover{

    transform:scale(1.05);

    box-shadow:
    0 0 24px rgba(0,255,255,.55);
}

/* =========================================
   PLAY
========================================= */

.controls{

    position:absolute;

    left:50%;
    top:50%;

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

.btn{

    width:42px;
    height:42px;

    border-radius:50%;

    background:
    rgba(0,0,0,.72);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;
}

.btn:hover{

    background:cyan;

    color:black;
}

/* =========================================
   INFO
========================================= */

.track-info{

    margin-top:10px;

    width:100%;
}

.title{

    font-size:13px;

    min-height:34px;

    line-height:1.35;
}

.artist{

    margin-top:4px;

    font-size:12px;

    color:#cccccc;

    opacity:.9;

    min-height:16px;
}

.genre{

    margin-top:6px;

    display:inline-block;

    padding:4px 10px;

    font-size:10px;

    font-weight:bold;

    text-transform:uppercase;

    color:#00eaff;

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

    border-radius:30px;

    background:
    rgba(0,255,255,.08);
}

.album{

    margin-top:6px;

    font-size:11px;

    opacity:.7;
}

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

.stats{

    margin-top:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:5px 10px;

    border-radius:12px;

    background:
    rgba(0,0,0,.72);

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

    font-size:11px;
}

.like{

    background:none;

    border:none;

    color:white;

    cursor:pointer;
}

/* =========================================
   LOADING
========================================= */

.loading{

    width:100%;

    text-align:center;

    padding:40px;

    font-size:18px;
}