@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500&display=swap");
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);

:root{
    --bg1:#3b3b3a;
    --bg2:#6f6f6d;
    --bg3:#a8a8a5;
    --accent:#ef3f3f;
    --accent2:#b91f2d;
    --accent3:#ff6b5f;
/*    --surface:rgba(245,245,242,.17);
    --surface-strong:rgba(255,255,255,.075);*/
    --surface:rgba(245,245,242,.25);
    --surface-strong:rgba(255,255,255,.05);
    --text:#fff;
    --muted:#d0d0cd;
    --border:rgba(235,235,230,.34);
    --shadow:0 0 60px rgba(255,255,255,.08),0 10px 50px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.12);
    --shadow-card:inset 0 1px 2px rgba(255,255,255,.07),inset 0 -2px 3px rgba(0,0,0,.07),2px 2px 5px rgba(0,0,0,.4);
    --page-margin:24px;
--page-top:24px;
}

body.teema-ice::before{
    background:
        radial-gradient(circle at 20% 20%,rgba(120,220,255,.28),transparent 25%),
        radial-gradient(circle at 80% 30%,rgba(150,130,255,.24),transparent 28%),
        radial-gradient(circle at 50% 80%,rgba(70,150,255,.22),transparent 35%),
        linear-gradient(135deg,#b9e8f7,#4c82c9,#6555a8);
    background-size:350% 350%;
}

body.teema-ice .particle{
    background:radial-gradient(circle,rgba(225,250,255,1),rgba(100,215,255,.98) 45%,rgba(70,150,255,.20));
    box-shadow:
        0 0 12px rgba(130,225,255,1),
        0 0 28px rgba(80,190,255,.9),
        0 0 45px rgba(100,130,255,.6);
}


body.teema-frost::before{
    background:
        radial-gradient(circle at 20% 20%,rgba(150,215,240,.18),transparent 25%),
        radial-gradient(circle at 80% 30%,rgba(110,180,220,.16),transparent 25%),
        radial-gradient(circle at 50% 80%,rgba(100,190,235,.14),transparent 35%),
        linear-gradient(135deg,#3b3b3a,#666d70,#9aa6a9);
    background-size:350% 350%;
}

body.teema-frost .particle{
    background:radial-gradient(circle,rgba(225,252,255,1),rgba(100,220,245,.98) 45%,rgba(60,170,210,.18));
    box-shadow:
        0 0 12px rgba(150,235,255,1),
        0 0 28px rgba(80,200,235,.9),
        0 0 45px rgba(45,150,190,.55);
}


*{box-sizing:border-box}
html,body{min-height:100%;margin:0}

body{min-height:100vh;font-family:"Barlow Semi Condensed",sans-serif;font-stretch:condensed;color:var(--text);background:#858583;
    overflow-x:hidden;position:relative;}

body::before{
    content:"";
    position:absolute;
    inset:0;
    min-height:100%;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at 20% 20%,rgba(255,70,70,.25),transparent 25%),radial-gradient(circle at 80% 30%,rgba(255,105,95,.20),transparent 25%),radial-gradient(circle at 50% 80%,rgba(180,35,45,.20),transparent 35%),linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
    background-size:350% 350%;
    animation:bgMove 16s ease infinite;
    pointer-events:none;
    z-index:-5;
}
@keyframes bgMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.particles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particle{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,245,210,1),rgba(255,125,55,.95) 45%,rgba(235,45,35,.18));
    box-shadow:0 0 12px rgba(255,120,70,1),0 0 28px rgba(245,65,45,.85),0 0 45px rgba(190,30,35,.55);
    animation:float linear infinite;
}
@keyframes float{from{transform:translateY(110vh) scale(.5);opacity:0}10%{opacity:1}to{transform:translateY(-20vh) scale(1.2);opacity:0}}

.page{position:relative;z-index:5;width:min(2880px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:32px 0 50px}
.page-header{margin-bottom:20px}
.page-header h1{margin:0 0 0 15px;font-family:"Exo 2",sans-serif;font-size:calc(2.4rem + 20px);font-weight:500;letter-spacing:-.04em;color:#fff;text-shadow:0 0 8px rgba(255,70,70,.60),0 0 16px rgba(245,45,45,.48),0 0 25px rgba(190,30,40,.35),0 0 35px rgba(160,20,30,.18);transform:translateY(-20px)}

.lukkari-rivi{display:flex;align-items:flex-start;gap:35px}
.lukujarjestys{margin-top:76px;width:min(var(--maksimileveys),calc(100% - 32px));margin:0;padding:12px 12px 15px;border:1px solid var(--border);border-radius:34px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;position:relative;z-index:20;top:-20px}
.lukujarjestys::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 35%)}
.lukujarjestys-otsikot{display:grid;grid-template-columns:105px minmax(0,1fr);gap:12px;padding:5px 4px 4px}
.lukujarjestys-otsikko{font-size:30px;font-weight:500;color:#666;text-align:center;line-height:1;padding:0 4px; /*text-shadow:0 2px 5px rgba(0,0,0,.25) */}
.oppitunti{--tiiviys:100%;position:relative;display:grid;grid-template-columns:105px minmax(0,1fr);gap:12px;padding:5px 4px;z-index:1}
.oppitunti:has(.aineet[style*="--aineita: 3"]) .oppiaine:has(.aineen-lisatieto){container-type:inline-size}

@container (max-width:200px){.oppiaine .aineen-lisatieto{display:none!important}}

.kellonaika{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:calc(50px * var(--tiiviys) / 100);font-weight:600;color:#333;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.25)}
.aineet{display:grid;grid-template-columns:repeat(var(--aineita,1),minmax(0,1fr));gap:8px;min-width:0}


.oppiaine{position:relative;min-width:0;height:calc((64px + 2px) * var(--tiiviys) / 100);min-height:0;display:flex;flex-direction:column;justify-content:center;padding:1px 16px;border:1px solid rgba(0,0,0,.30);font:inherit;color:#fff;text-align:left;background:rgba(255,255,255,.70);box-shadow:inset 0 1px 1px #fff,var(--shadow-card);cursor:pointer;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border .25s ease}

.oppiaine::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 10%,rgba(255,255,255,.11) 45%,rgba(245,60,60,.24) 50%,transparent 80%);transform:translate3d(-120%,0,0);transition:transform 1s;z-index:2}
.oppiaine:hover::before{transform:translateX(120%)}
.oppiaine::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.);box-shadow:inset -1px -1px 2px rgba(0,0,0,.06);pointer-events:none;z-index:1}
.oppiaine{background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.30));background-size:calc(100% - 4px) 33.333%;background-position:2px 2px;background-repeat:no-repeat}
.oppiaine:hover{transform:translateY(-6px) scale(1.025);border:1px solid rgba(180,55,55,.68);box-shadow:0 0 12px rgba(245,55,55,.45),0 0 40px rgba(190,25,40,.25),0 10px 30px rgba(0,0,0,.40),inset 0 1px 2px rgba(255,255,255,.10)}
.oppiaine:active{transform:translateY(0) scale(1)}
.oppiaine:focus-visible{outline:2px solid rgba(255,90,90,.75);outline-offset:3px}

.aineen-nimi{position:relative;z-index:3;display:flex;align-items:center;font-size:calc(55px * var(--tiiviys) / 100);line-height:1;padding:2px 0 6px;font-weight:500;color:#000;text-shadow:none;white-space:nowrap}
.aineen-emoji{flex:0 0 60.75px;width:60.75px;display:flex;align-items:center;line-height:1;white-space:nowrap;font-size:calc(55px * var(--tiiviys) / 100);transform-origin:left center}
.aineen-teksti{display:inline;white-space:nowrap;font-size:1em;transform:translateX(calc(2px * (100 - var(--tiiviys)) / 40))}
.aineen-lisatieto{position:absolute!important;top:5px!important;right:12px!important;z-index:10;margin:0!important;font-size:1.5rem;line-height:1.13;color:#000;text-align:right;white-space:nowrap;text-shadow:none}

.tyyppi-koe {background:linear-gradient(180deg,rgba(155,105,165,1) 0%,rgba(92,55,125,1) 45%,rgba(53,32,102,1) 100%); }
.tyyppi-koe .aineen-nimi,.tyyppi-koe .aineen-lisatieto,
.tyyppi-oma .aineen-nimi,.tyyppi-oma .aineen-lisatieto {color:#fff}
.tyyppi-oma { 
    background:linear-gradient(180deg,rgba(235,195,105,1) 0%,rgba(220,160,45,1) 45%,rgba(185,85,10,1) 100%); 
    color:#fEfEFF; 
    box-shadow:2px 2px 3px rgba(0,0,0,0.4); 
}

.tyyppi-ruoka{background:rgba(255,255,255,.70)}

.tila-ensin{padding-bottom:0}
.tila-keski{padding-top:0;padding-bottom:0}
.tila-sitten{padding-top:0}
.tila-ensin .oppiaine{border-radius:18px 18px 0 0}
.tila-keski .oppiaine{border-radius:0}
.tila-sitten .oppiaine{border-radius:0 0 18px 18px}

.oppitunti:not(.tila-ensin):not(.tila-keski):not(.tila-sitten) .oppiaine{border-radius:18px}

.tunnin-tarkennus{font-family:"Barlow",sans-serif; font-weight: 500; box-shadow:var(--shadow-card); grid-column:2;margin:calc(4px * var(--tiiviys) / 100) 0 calc(5px * var(--tiiviys) / 100);padding:calc(8px * var(--tiiviys) / 100) calc(18px * var(--tiiviys) / 100);border:1px solid rgba(0,0,0,.30);border-radius:18px;background:rgba(255,255,255,.40);backdrop-filter:blur(10px);font-size:calc(1.425rem * var(--tiiviys) / 100);line-height:1.5;color:#333;animation:tarkennusAuki 180ms ease-out}
.oppitunti.tila-keski:has(.tunnin-tarkennus:not([hidden])),.oppitunti.tila-ensin:has(.tunnin-tarkennus:not([hidden])){
    row-gap:0;
}

.oppitunti.tila-keski .tunnin-tarkennus,.oppitunti.tila-ensin .tunnin-tarkennus{margin:0;border-radius:0;border-top:0;border-bottom:0}


.oppitunti.tila-keski:has(.tunnin-tarkennus:not([hidden])) + .oppitunti{
    padding-top:0;
}



@keyframes tarkennusAuki{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

.valitunti{position:relative;z-index:1;display:grid;grid-template-columns:105px minmax(0,1fr);gap:12px;padding:2px 4px 5px}
.valitunti time,.valitunti span{font-size:1.3875rem;text-shadow:none; }
.valitunti time {padding-left:0;text-align:right;color:#333;text-shadow:0 2px 5px rgba(0,0,0,.25);font-weight:600;}
.valitunti span {margin-left:15px;text-align:left;color:#333;font-weight:400;}


/* ====================================================== */
/*  MEDIA                                                 */
/* ====================================================== */



@media(max-width:950px){
    .oppiaine {backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
    .oppiaine::after{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

}



@media(max-width:700px){
    .oppilas-tervehdys{display:none}
    .page{width:calc(100% - 16px);padding-top:18px}
    .lukujarjestys{padding:7px 7px 10px;border-radius:18px}
    .page-header h1{font-size:2rem}
    .oppitunti{grid-template-columns:70px minmax(0,1fr);gap:7px}
    .kellonaika{padding-left:4px;font-size:28px}
    .oppiaine{box-shadow:inset 0 .15px .2px rgba(0,0,0,.035),inset 0 -.15px .3px rgba(0,0,0,.025),2px 3px 4px rgba(0,0,0,.16)!important}.tila-keski .oppiaine{border-radius:0}
    .oppiaine{height:calc((64px + 2px) * .75 * var(--tiiviys) / 100)}
    .oppiaine::after{box-shadow:inset -1px -1px 1px rgba(0,0,0,.06)!important}
    .tila-sitten .oppiaine{border-radius:0 0 13px 13px}
    .oppitunti:not(.tila-ensin):not(.tila-keski):not(.tila-sitten) .oppiaine{border-radius:13px}
    .aineet{min-width:0}
    .oppiaine{min-width:0}
    
    .aineen-nimi{min-width:0;margin-right:0!important;padding-right:0!important;white-space:nowrap}
    .aineen-emoji{flex:0 0 40px;width:40px;font-size:2.25rem}
    .aineen-nimi{font-size:2.25rem;transform:translateX(-6px)}
    .aineen-lisatieto{font-size:1.02rem}
    
    .oppitunti:has(.aineet[style*="--aineita: 3"]) .aineen-lisatieto{display:none!important}
    .oppitunti:has(.aineet[style*="--aineita: 3"]) .aineen-nimi{ margin-right:0!important; padding-right:0!important;}
    .oppitunti:has(.aineet[style*="--aineita: 2"]) .aineen-lisatieto{display:none!important}
    .tunnin-tarkennus{padding:2px 10px 2px 18px;font-size:calc(.85rem * var(--tiiviys) / 100)}
    .valitunti time,.valitunti span{font-size:1.1375rem}
    .valitunti{padding-top:0;padding-bottom:1px}
    .lukujarjestys{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
}


/* ====================================================== */
/*  TEEMAT                                                */
/* ====================================================== */


/* ICE – sininen / lila */
body.teema-ice .page-header h1{
    text-shadow:
        0 0 8px rgba(120,220,255,.75),
        0 0 16px rgba(80,180,255,.60),
        0 0 25px rgba(110,120,255,.48),
        0 0 35px rgba(150,100,255,.30);
}

body.teema-ice .oppiaine:hover{
    border-color:rgba(120,220,255,.75);
    box-shadow:
        0 0 12px rgba(100,215,255,.55),
        0 0 40px rgba(70,160,255,.35),
        0 10px 30px rgba(0,0,0,.40),
        inset 0 1px 2px rgba(255,255,255,.12);
}

body.teema-ice::before{
    background:
        radial-gradient(circle at 15% 20%,rgba(180,240,255,.40),transparent 25%),
        radial-gradient(circle at 85% 30%,rgba(45,165,235,.35),transparent 28%),
        radial-gradient(circle at 50% 85%,rgba(15,70,150,.38),transparent 38%),
        linear-gradient(135deg,#d5f6ff,#3b9fe0,#123f82);
    background-size:350% 350%;
}

/* FROST – lämmin harmaa / viileä sininen */
body.teema-frost .page-header h1{
    text-shadow:
        0 0 8px rgba(150,225,245,.65),
        0 0 16px rgba(105,195,225,.50),
        0 0 25px rgba(75,165,195,.38),
        0 0 35px rgba(60,140,170,.22);
}

body.teema-frost .oppiaine:hover{
    border-color:rgba(140,220,240,.70);
    box-shadow:
        0 0 12px rgba(120,215,240,.48),
        0 0 40px rgba(70,170,200,.28),
        0 10px 30px rgba(0,0,0,.40),
        inset 0 1px 2px rgba(255,255,255,.12);
}

body.teema-frost::before{
    background:
        radial-gradient(circle at 15% 20%,rgba(190,235,250,.32),transparent 25%),
        radial-gradient(circle at 85% 30%,rgba(90,175,215,.30),transparent 28%),
        radial-gradient(circle at 50% 85%,rgba(30,105,150,.30),transparent 38%),
        linear-gradient(135deg,#50575a,#879da5,#c5e5ed);
    background-size:350% 350%;
}


/* oranssi */

body.teema-fire::before{
    background:
        radial-gradient(circle at 15% 20%,rgba(235,205,95,.38),transparent 25%),
        radial-gradient(circle at 85% 30%,rgba(255,150,35,.34),transparent 28%),
        radial-gradient(circle at 50% 85%,rgba(220,65,15,.36),transparent 38%),
        linear-gradient(135deg,#eebd52,#f28a24,#7f1f08);   
        background-size:350% 350%;
}

body.teema-fire .particle{
    background:radial-gradient(
        circle,
        rgba(255,255,235,1),
        rgba(255,205,75,1) 40%,
        rgba(255,105,20,.30)
    );
    box-shadow:
        0 0 14px rgba(255,215,90,1),
        0 0 32px rgba(255,135,25,1),
        0 0 50px rgba(240,65,10,.72);
}
body.teema-fire .page-header h1{
    text-shadow:none;
}

body.teema-fire .oppiaine:hover{
    border-color:rgba(255,190,65,.90);
    box-shadow:
        0 0 14px rgba(255,170,45,.70),
        0 0 42px rgba(240,90,15,.50),
        0 10px 30px rgba(0,0,0,.40),
        inset 0 1px 2px rgba(255,255,255,.14);
}

body.teema-fire .oppiaine::before{
    background:linear-gradient(
        115deg,
        transparent 10%,
        rgba(255,255,255,.08) 45%,
        rgba(255,175,45,.30) 50%,
        transparent 80%
    );
}

body.teema-fire .page-header h1{
    color:#8f421f;
    text-shadow:none;
}

body.teema-fire .oppiaine:hover{
    border-color:rgba(165,78,30,.90);
    box-shadow:
        0 0 14px rgba(165,78,30,.72),
        0 0 42px rgba(145,62,20,.52),
        0 10px 30px rgba(0,0,0,.40),
        inset 0 1px 2px rgba(255,255,255,.14);
}

body.teema-fire .oppiaine::before{
    background:linear-gradient(
        115deg,
        transparent 10%,
        rgba(255,255,255,.08) 45%,
        rgba(255,90,45,.30) 50%,
        transparent 80%
    );
}
body.teema-fire .tunnin-tarkennus{
    color:#6f3218;
    font-family:"Barlow",sans-serif;
}


/* AQUA – turkoosi / sininen / pinkki */

body.teema-aqua{ background: #48BBDE;}

body.teema-aqua::before{
    background:linear-gradient(135deg,#4EFFDF,#48BBDE,#F47EC6);
    background-size:100% 100%;
    animation:none;
}

body.teema-aqua .page-header h1{
    color:#1d8ab9;
    text-shadow:none;
}

body.teema-aqua .particle{
    background:radial-gradient(
        circle,
        rgba(255,255,255,1),
        rgba(145,240,255,1) 45%,
        rgba(72,187,222,.25)
    );
    box-shadow:
        0 0 12px rgba(150,250,255,1),
        0 0 28px rgba(75,210,240,.85),
        0 0 45px rgba(244,126,198,.55);
}

body.teema-aqua .oppiaine:hover{
    border-color:rgba(150,240,255,.98);
    box-shadow:
        0 0 16px rgba(125,230,255,.90),
        0 0 45px rgba(75,200,240,.62),
        0 10px 30px rgba(0,0,0,.40),
        inset 0 1px 2px rgba(255,255,255,.20);
}

body.teema-aqua .oppiaine::before{
    background:linear-gradient(
        115deg,
        transparent 10%,
        rgba(255,255,255,.08) 45%,
        rgba(135,235,255,.32) 50%,
        transparent 80%
    );
}

body.teema-aqua .oppiaine:focus-visible{
    outline-color:rgba(120,225,255,.85);
}

body.teema-aqua .kolikot{background:rgba(255,255,255,.70);color:#666}

body.teema-aqua .kolikot *{color:#666}


body.teema-aqua .tunti,
body.teema-aqua .valitunti,
body.teema-aqua .paiva-otsikko{color:#333}

body.teema-ice .page-header h1,
body.teema-frost .page-header h1{
    text-shadow:none;
}


@media(prefers-reduced-motion:reduce){
    .oppiaine{transition:none}
    .tunnin-tarkennus{animation:none}
    body::before{animation:none}
}


.oppilas-tervehdys{
    top:120px;
    left:calc(50% + min(var(--maksimileveys),100% - 32px)/2 + 35px);
    width:calc(50% - min(var(--maksimileveys),100% - 32px)/2 - 35px);
    color:#fff;
    text-align:left;
    z-index:-10;
}

.tervehdys-otsikko{
    font-family: Source Sans Pro, sans-serif;
    /* font-family:"Barlow Condensed",sans-serif; */
    font-size:clamp(2.8rem,3.5vw,4.5rem);
    font-weight:300; /* 400, 500, 600, 700 */
    line-height:1;
    letter-spacing:.01em;
    color:#fff;
    text-shadow:0 3px 12px rgba(0,0,0,.35);
}

.tervehdys-teksti{
    margin-top:14px;
    font-family:"Barlow",sans-serif;
    font-size:1.35rem;
    font-weight:300; /* 300, 400, 500 */
    line-height:1.45;
    color:#fff;
    text-shadow:0 2px 7px rgba(0,0,0,.35);
}

.oikea-palkki{position:fixed;top:102px;right:15px;width:210px;display:flex;flex-direction:column;gap:15px;}

.kolikot{
    width:210px;
    padding:0 20px 15px;
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow-card);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background:rgba(245,245,242,.12);
    overflow:visible;
    position:relative;
    z-index:0;

} 

.kolikko-ikoni{
    text-align:center;
    font-size:4.2rem;
    line-height:1;
    cursor:pointer;
    margin-top:-41px;
    margin-bottom:15px;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))
}

.kolikko-lista{
    width:100%;
}

.kolikko-rivi{display:table;width:100%;height:40px;padding:0;color:#fff;text-shadow:none;}

.kolikko-rivi .oppilas{display:table-cell;width:100%;vertical-align:bottom;color:#fff;font-size:23px;font-weight:400;white-space:nowrap;transform:translateY(2px)}

.kolikko-rivi .emoji{font-size:37px;line-height:1;margin-right:3px}

.kolikko-rivi .summa{display:table-cell;vertical-align:bottom;color:#fff;font-size:2rem;font-weight:400;text-align:right;white-space:nowrap;transform:translateY(3px)}

.hinnasto{position:fixed;z-index:30;top:var(--page-top);right:calc(var(--page-margin) + 250px);width:320px;padding:18px;border:1px solid rgba(255,255,255,.3);border-radius:18px;background:rgba(30,30,30,.92);box-shadow:0 10px 30px rgba(0,0,0,.4);backdrop-filter:blur(15px);color:#fff;font-size:1.1rem}

.hinnasto ul{margin:10px 0 0;padding-left:24px}
/*
.clock-card{width:210px;min-height:185px;padding:15px 20px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(245,245,242,.12);position:relative;z-index:0}
*/
.clock-card{width:210px;min-width:210px;min-height:185px;padding:15px 20px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(245,245,242,.12);position:relative;z-index:30;cursor:move;overflow:hidden}
.clock-card.resizing{cursor:nwse-resize}
.clock-card.dragging{user-select:none; }
.raised{z-index:30000!important}

.clock-card-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.timer-view{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:max-content;height:max-content;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center}
.clock-view{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center}


.timer-clock{position:relative;width:155px;height:155px;display:flex;align-items:center;justify-content:center;background-color:var(--main-bg-color);background-image:url("../images/clock.png");background-position:center center;background-size:cover;border-radius:35%;overflow:hidden}
.timer-ring{position:absolute;inset:7px;border-radius:50%;background:conic-gradient(#999 calc(var(--timer-progress,100) * 1%),rgba(255,255,255,.12) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));filter:drop-shadow(0 0 5px rgba(255, 255, 255, 1));pointer-events:none}
.timer-display{position:relative;z-index:2;width:100%;padding:0;border:0;outline:0;background:transparent;font-family:"Barlow Semi Condensed",sans-serif;font-size:3rem;font-weight:600;line-height:1;color:#333;letter-spacing:.04em;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.45);cursor:text}

.timer-buttons{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:3px;width:100%}
.timer-buttons button{width:42px;height:30px;border:1px solid rgba(255,255,255,.3);border-radius:9px;background:rgba(255,255,255,.13);color:#fff;font-size:1rem;cursor:pointer;box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 2px 4px rgba(0,0,0,.2)}
.timer-buttons button:hover{background:rgba(255,255,255,.22)}
.timer-buttons button:active{transform:translateY(1px)}
#timer-reset{font-size:1.25rem}
.timer-toggle{position:absolute;right:8px;bottom:7px;width:32px;height:32px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.10);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 5px rgba(0,0,0,.25);transition:.2s}
.timer-toggle:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}
.timer-view.finished .timer-display{color:#ff7777;text-shadow:0 0 12px rgba(255,50,50,.65),0 0 25px rgba(255,40,40,.35)}
.timer-view.finished .timer-ring{background:conic-gradient(#ff5555 100%,#ff5555 100%);filter:drop-shadow(0 0 7px rgba(255,50,50,.7))}