@font-face {

    font-family: 'digital-7';

    src: url('../assets/fonts/digital-7.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;
}

.timer-panel{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:5px;
    overflow:visible;
}

.timer-circle{
   
    width:min(550px, 100%);

    aspect-ratio:1;

    position:relative;
    transform-origin:center center;
}

.timer-value{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.time-main{
    font-family:'digital-7', monospace;
    font-size:clamp(60px, 18vw, 100px);
    font-weight:700;
    line-height:1;
    letter-spacing:1px;
}

.time-seconds{
    font-family:'digital-7', monospace;
    font-size:clamp(28px, 8vw, 50px);
    margin-top:8px;
    opacity:.65;
}

.time-progress{
    margin-top:8px;
    font-size:18px;
    color:#666;
}

.time-display{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    user-select:none;
}

.active-task{
    margin-top:12px;
    font-size:clamp(14px, 4vw, 20px);
    font-weight:600;
    color:#111;
    text-align:center;
}

.planned-time{
    margin-top:15px;
    font-size:15px;
    font-weight:600;
}

.percent-marker{
    position:absolute;
    left:50%;
    width:40px;
    margin-left:-20px;
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:#555;
    z-index:30;
}

.p100{ transform:rotate(0deg) translateY(-255px) rotate(0deg); }
.p90{ transform:rotate(36deg) translateY(-255px) rotate(-36deg); }
.p80{ transform:rotate(72deg) translateY(-255px) rotate(-72deg); }
.p70{ transform:rotate(108deg) translateY(-255px) rotate(-108deg); }
.p60{ transform:rotate(144deg) translateY(-255px) rotate(-144deg); }
.p50{ transform:rotate(180deg) translateY(-255px) rotate(-180deg); }
.p40{ transform:rotate(216deg) translateY(-255px) rotate(-216deg); }
.p30{ transform:rotate(252deg) translateY(-255px) rotate(-252deg); }
.p20{ transform:rotate(288deg) translateY(-255px) rotate(-288deg); }
.p10{ transform:rotate(324deg) translateY(-255px) rotate(-324deg); }

.timer-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:15px;
}

.action-btn{
    width:clamp(32px, 8vw, 60px);
    height:clamp(32px, 8vw, 60px);
    overflow:hidden;
    background:transparent;
    border:none;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.action-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(1.8);
}

.timer-value{

    position:absolute;

    inset:0;

    z-index:20;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transform:scale(1);

    transform-origin:center center;

}

@media (max-width:1200px){
    .timer-value{
        transform:scale(.99);
        transform-origin:center center;
    }
}

@media (max-width:1100px){
    .timer-value{
        transform:scale(.98);
        transform-origin:center center;
    }
}

@media (max-width:1000px){
    .timer-value{
        transform:scale(.97);
        transform-origin:center center;
    }
}

@media (max-width:950px){
    .timer-value{
        transform:scale(.96);
        transform-origin:center center;
    }
}

@media (max-width:900px){
    .timer-value{
        transform:scale(.95);
        transform-origin:center center;
    }
}

@media (max-width:850px){
    .timer-value{
        transform:scale(.93);
        transform-origin:center center;
    }
}

@media (max-width:800px){
    .timer-value{
        transform:scale(.90);
        transform-origin:center center;
    }
}

@media (max-width:750px){
    .timer-value{
        transform:scale(.88);
        transform-origin:center center;
    }
}

@media (max-width:700px){
    .timer-value{
        transform:scale(.85);
        transform-origin:center center;
    }
}

@media (max-width:650px){
    .timer-value{
        transform:scale(.82);
        transform-origin:center center;
    }
}

@media (max-width:600px){
    .timer-value{
        transform:scale(.78);
        transform-origin:center center;
    }
}

@media (max-width:550px){
    .timer-value{
        transform:scale(.74);
        transform-origin:center center;
    }
}

@media (max-width:500px){
    .timer-value{
        transform:scale(.70);
        transform-origin:center center;
    }
}

@media (max-width:470px){
    .timer-value{
        transform:scale(.67);
        transform-origin:center center;
    }
}

@media (max-width:450px){
    .timer-value{
        transform:scale(.65);
        transform-origin:center center;
    }
}

@media (max-width:430px){
    .timer-value{
        transform:scale(.62);
        transform-origin:center center;
    }
}

@media (max-width:400px){
    .timer-value{
        transform:scale(.59);
        transform-origin:center center;
    }
}

@media (max-width:380px){
    .timer-value{
        transform:scale(.56);
        transform-origin:center center;
    }
}

@media (max-width:360px){
    .timer-value{
        transform:scale(.53);
        transform-origin:center center;
    }
}

@media (max-width:340px){
    .timer-value{
        transform:scale(.50);
        transform-origin:center center;
    }
}

@media (max-width:320px){
    .timer-value{
        transform:scale(.47);
        transform-origin:center center;
    }
}

@media (max-width:300px){
    .timer-value{
        transform:scale(.44);
        transform-origin:center center;
    }
}

@media (max-width:280px){
    .timer-value{
        transform:scale(.41);
        transform-origin:center center;
    }
}