@font-face{

    font-family:"Press Start 2P";

    src:url(
        "fonts/PressStart2P-Regular.woff2"
    ) format(
        "woff2"
    );

    font-weight:normal;

    font-style:normal;

}

*{

    font-family:
        "Press Start 2P",
        monospace;

    box-sizing:border-box;

}

:root{

    --papere-bg:#12001f;

    --papere-yellow:#f1ff02;

    --papere-orange:#ff7b2c;

    --papere-pink:#ff43ba;

    --papere-white:#f8f8f8;
	
	--papere-grey:#cccccc;
	
	--papere-blue:#02f1ff;
	
	--papere-green:#02ff4a;
	
	--papere-red:#cc0000;

}

body{
    margin:0;
    padding:20px;

	background:
        var(--papere-bg);
    color:
        var(--papere-white);
}

/* --------------------------
   CONFIGURAZIONE
-------------------------- */

#builder{
    max-width:1000px;
    margin:auto;
}

h1{
    text-align:center;
}

.card{

    background:transparent;

    padding:15px;

    margin-bottom:15px;

    border:0.5dvh solid
        var(--papere-yellow);

}

h2 {
	font-size: 1.0rem;
}

label{

    display:block;

    margin-top:15px;

}

input[type="number"],
input[type="text"]{

    width:100%;

    padding:12px;

    margin-top:5px;

    font-size:1rem;
	
    background:
        transparent;

    color:
        var(--papere-white);

    border:0.25dvh solid
        var(--papere-grey);

    border-radius:0;

}

/* --------------------------
   FASI
-------------------------- */

.actions{

    display:flex;

    gap:15px;

    margin-top:20px;

}

button{

    border:0.0dvh solid
        var(--papere-yellow);

    background:
        transparent;

    color:
        var(--papere-yellow);

    border-radius:0;

    padding:12px 12px;

    cursor:pointer;

    font-size:1.0rem;

}

.actions button{

    flex:1;

}

#addWorkBtn{

    background:#02ff4a;
    color:var(--papere-bg);
	font-size: 1.0rem;

}

#addRestBtn{

    background:#f1ff02;
    color:var(--papere-bg);
	font-size: 1.0rem;

}



.phaseCard{

    background:transparent;

    padding:8px;

    margin-bottom:8px;

    border:0.5dvh solid;

}

.workPhase{

    border-color:var(--papere-green);

}

.restPhase{

    border-color:var(--papere-yellow);

}

.phaseTitle{

    font-size:1.2rem;

    font-weight:bold;

    margin:0;

}

.workPhase .phaseTitle{

    color:var(--papere-white);

}

.restPhase .phaseTitle{

    color:var(--papere-white);

}

.phaseHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.phaseRow{

    display:grid;

    grid-template-columns:3.5fr 1fr;

    gap:12px;

    align-items:center;

}

.phaseName{

    flex:1;
	width:100%;

}

.phaseDuration{

    width:100%;

    text-align:center;

}


.phaseDeleteBtn{

    background:trasparent;

    color:var(--papere-red);
	
	font-size:1.8rem;

}

/* --------------------------
   CICLI
-------------------------- */

.cyclesHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

#cycleInfoDisplay{

    font-size:1.2rem;

    font-weight:bold;

    color:#1976d2;

}

.cycleInputs{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

/* --------------------------
   DURATA TOTALE
-------------------------- */

.totalCard{

    text-align:center;

}

#totalDuration{

    font-size:3rem;

    font-weight:bold;

    margin-top:15px;

    color:#1976d2;

}

/* --------------------------
   AVVIO
-------------------------- */

#startBtn{

    width:100%;

    background:#1976d2;

    color:white;

    font-size:1.3rem;

    padding:15px;

}

/* --------------------------
   SCHERMATA ALLENAMENTO
-------------------------- */

#trainingScreen{

    display:none;

    position:fixed;

    inset:0;

    color:var(--papere-bg);

    background:var(--papere-green);

    overflow:hidden;

}

/* ---------- FULLSCREEN ---------- */

#fullscreenBtn{

    position:absolute;

    top:2dvh;

    right:2dvh;

    background:rgba(255,255,255,0.2);

    color:white;

    font-size:1.4rem;

    z-index:10;

}

/* ---------- AREA CENTRALE ---------- */

#trainingContent{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:75dvh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    padding:0dvh;

}

/* ---------- NOME FASE ---------- */

#phaseName{

    font-size:4dvh;

    font-weight:bold;

    text-align:center;

    line-height:1.1;

}

/* ---------- TIMER ---------- */

#timerDisplay{

    font-size:18dvh;

    font-weight:bold;

    line-height:1.8;

    text-align:center;

}

/* ---------- STATUS ---------- */

#statusBar{

    position:absolute;

    left:0;

    right:0;

    bottom:25dvh;

    height:15dvh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 2dvw;

    box-sizing:border-box;

}

/* ---------- CONTATORI ---------- */

#phaseCounter,
#cycleCounter{

    display:flex;

    flex-direction:column;

}

#cycleCounter{

    text-align:right;

}

#phaseValue,
#cycleValue{

    font-size:6dvh;

    font-weight:bold;

    line-height:1;

}

#phaseLabel,
#cycleLabel{

    font-size:3dvh;

    letter-spacing:2px;

    opacity:0.8;

}

/* ---------- CONTROLLI ---------- */

#controls{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:25dvh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:1.2dvh;

}

/* ---------- PAUSA ---------- */

#pauseBtn{

    min-width:60dvw;

    min-height:12dvh;

    font-size:3dvh;

    font-weight:bold;

    background:#ff9800;

    color:white;

}

/* ---------- SKIP ---------- */

#skipBtn{

    min-width:40dvw;

    min-height:8dvh;

    font-size:2dvh;

    font-weight:bold;

    background:#2196f3;

    color:white;

}

/* ---------- ANNULLA ---------- */

#cancelBtn{

    display:none;

    min-width:40dvw;

    min-height:8dvh;

    font-size:2dvh;

    font-weight:bold;

    background:#d32f2f;

    color:white;

}

/* --------------------------
   MOBILE
-------------------------- */

@media(max-width:768px){

    .cycleInputs{

        grid-template-columns:1fr;

    }

    #trainingFooter{

        flex-direction:column;

    }

    #phaseCounter,
    #cycleCounter{

        text-align:center;

    }

}

#trainingScreen.fullscreen-mode #trainingContent{

    height:80dvh;

}

#trainingScreen.fullscreen-mode #timerDisplay{

    font-size:40dvh;

}

#trainingScreen.fullscreen-mode #statusBar{

    bottom:10dvh;

}

#trainingScreen.fullscreen-mode #phaseName{

    font-size:5dvh;

}

#trainingScreen.fullscreen-mode #phaseValue,
#trainingScreen.fullscreen-mode #cycleValue{

    font-size:15dvh;

}

#trainingScreen.fullscreen-mode #phaseLabel,
#trainingScreen.fullscreen-mode #cycleLabel{

    font-size:6dvh;

}

#trainingScreen.fullscreen-mode #controls{

    height:25dvh;
	z-index:5;
	bottom: 2dvh;

}

#trainingScreen.fullscreen-mode #pauseBtn{

	min-width: 30dvw;
	max-width: 40dvw;
	font-size:6dvh;

}

#trainingScreen.fullscreen-mode #skipBtn,
#trainingScreen.fullscreen-mode #cancelBtn{

	min-width: 20dvw;
	max-width: 30dvw;
	font-size:4dvh;

}