html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    color:#fff;
    font-family:Arial, sans-serif;
}

/*
|--------------------------------------------------------------------------
| PLAYER
|--------------------------------------------------------------------------
*/

.player-wrapper{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background:#000;
}

.song-container{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    transform:translateY(0);
    transition:transform .5s linear;
    box-sizing:border-box;
    padding:0 20px;
}

/*
|--------------------------------------------------------------------------
| SONG LINE
|--------------------------------------------------------------------------
*/
.song-line{
    position:relative;
    margin-bottom:85px;
    transform:scale(.94);
    transition:all .35s ease;
}

/*
|--------------------------------------------------------------------------
| DEFAULT (righe lontane)
|--------------------------------------------------------------------------
*/

.song-line .text-line{
    color:rgba(255,255,255,.10);
}

.song-line .chord{
    color:rgba(255,213,79,.10);
}

.song-line.active{
    transform:scale(1);
}

.song-line.active .text-line{
    color:#ffffff;
}
/*
|--------------------------------------------------------------------------
| NEXT LINE
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| NEXT LINE
|--------------------------------------------------------------------------
*/

.song-line.next{

    transform:scale(.97);

}

.song-line.next .text-line{

    color:rgba(255,255,255,.60);

}

.song-line.next .chord{

    color:rgba(255,213,79,.60);

}

/*
|--------------------------------------------------------------------------
| ACTIVE deve vincere sempre
|--------------------------------------------------------------------------
*/

.song-line.active .text-line{
    color:#fff !important;
}

.song-line.active .chord{
    color:#ffd54f !important;
}

.song-line.completed .text-line{
    color:rgba(255,255,255,.08);
}

.song-line.completed .chord{
    color:rgba(255,213,79,.08);
}

.song-line.bold .text-line{
    font-weight:bold;
}

.song-line.italic .text-line{
    font-style:italic;
}

/*
|--------------------------------------------------------------------------
| TEXT
|--------------------------------------------------------------------------
*/

.text-line{
    white-space:nowrap;
    overflow:visible;
    line-height:1.5;
    padding-top:1.8em;
}

.char{
    position:relative;
    display:inline-block;
    width:.62em;
    text-align:left;
    vertical-align:top;
    font-family:monospace;
    font-size:clamp(24px, 4vw, 48px);
    line-height:1em;
}
/*
|--------------------------------------------------------------------------
| CHORD
|--------------------------------------------------------------------------
*/

.chord{
    position:absolute;
    left:0;
    bottom:100%;
    margin-bottom:.15em;
    color:#ffd54f;
    /*font-size:.58em;*/
    font-weight:bold;
    white-space:nowrap;
    font-family:monospace;
    line-height:1em;
}

/*
|--------------------------------------------------------------------------
| PROGRESS
|--------------------------------------------------------------------------
*/

.progress-line{
    position:absolute;
    left:0;
    bottom:-12px;
    width:0%;
    height:4px;
    border-radius:10px;
    background:#00e676;

    opacity:1;

    transition:
        width linear,
        opacity .4s ease;
}

.song-line.completed .progress-line{
    opacity:0;
}

/*
|--------------------------------------------------------------------------
| COUNTER
|--------------------------------------------------------------------------
*/

.counter-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
    font-size:clamp(80px, 18vw, 180px);
    font-weight:bold;
}

/*
|--------------------------------------------------------------------------
| SONG INFO
|--------------------------------------------------------------------------
*/

.song-info{
    position:fixed;
    top:15px;
    left:18px;
    z-index:50;
    max-width:90%;
}

.song-info h1{
    margin:0;
    font-size:clamp(20px, 4vw, 34px);
}

.song-info p{
    margin:0;
    opacity:.7;
    font-size:clamp(14px, 2vw, 18px);
}

/*
|--------------------------------------------------------------------------
| MOBILE LANDSCAPE
|--------------------------------------------------------------------------
*/

@media (orientation:landscape){

    .char{
        font-size:clamp(18px, 2vw, 34px);
    }

    .song-line{
        margin-bottom:50px;
    }

}
.floating-actions{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:9999;
    display:flex;
    gap:10px;
}

.floating-btn{
    background:#ffffff10;
    backdrop-filter:blur(10px);
    border:1px solid #ffffff20;
    color:#fff;
    text-decoration:none;
    padding:12px 18px;
    border-radius:14px;
    font-size:14px;
    transition:.2s ease;
}

.floating-btn:hover{
    background:#ffffff20;
    color:#fff;
    transform:translateY(-2px);
}

.transpose-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(0,0,0,0.8);
    padding:10px;
    border-radius:12px;
    color:white;
    font-size:1em;
}

.transpose-box button{
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;

    background: #ffffff22;
    color: white;

    font-size: 22px;
    cursor: pointer;
}

.transpose-box button:hover{
    background: #ffffff44;
}

/*
|--------------------------------------------------------------------------
| TOP RIGHT TOOLS
|--------------------------------------------------------------------------
*/

.top-right-tools{

    position:fixed;

    top:20px;
    right:20px;

    z-index:9999;

    display:flex;
    flex-direction:column;

    gap:10px;

    align-items:flex-end;
}

/*
|--------------------------------------------------------------------------
| CAPO
|--------------------------------------------------------------------------
*/

.capo-box{

    background:rgba(0,0,0,0.8);

    color:white;

    padding:10px 14px;

    border-radius:12px;

    font-size:18px;
}

/*
|--------------------------------------------------------------------------
| AUDIO
|--------------------------------------------------------------------------
*/
.audio-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(0,0,0,0.8);
    color:white;
    padding:10px 14px;
    border-radius:12px;
}

.audio-label{
    font-size:18px;
}

.audio-btn{
    border:none;
    background:#ffffff22;
    border-radius:8px;
    width:42px;
    height:42px;
    cursor:pointer;
    font-size:22px;
    transition:0.2s;
}

.audio-btn:hover{
    background:#ffffff55;
}

/*
|--------------------------------------------------------------------------
| AUDIO POPUP
|--------------------------------------------------------------------------
*/
.audio-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:20000;
}

.audio-popup.active{
    display:flex;
}

.audio-popup-content{
    background:#111;
    padding:25px;
    border-radius:18px;
    position:relative;
    width:min(500px, 90vw);
}

.audio-popup audio{
    width:100%;
}

.audio-close{
    position:absolute;
    top:10px;
    right:10px;
    border:none;
    background:none;
    color:white;
    font-size:24px;
    cursor:pointer;
}

.song-line.waiting{
    border-left: 6px solid orange;
    opacity: 0.7;
}

.song-line.waiting .text-line{
    color: orange;
}