/* Context date/time for SINCE label */
.since-context {
    font-size: calc(clamp(0.95rem, 2.5vh, 1.2rem) * var(--font-scale));
    color: var(--label-color);
    margin-top: 2px;
    letter-spacing: normal;
    text-align: center;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

:root {
    --background-color: #f5f5f5;
    --timer-background: #ffffff;
    --text-color: #333333;
    --label-color: #666666;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --progress-color: #4caf50;
    --progress-background: #e0e0e0;
    --title-color: #333333;
    --font-scale: 1; 
}

.dark-theme {
    --background-color: #121212;
    --timer-background: #1e1e1e;
    --text-color: #f0f0f0;
    --label-color: #bbbbbb;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --progress-background: #333333;
    --title-color: #f0f0f0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
    font-family: 'Arial', sans-serif;
    background-color: transparent;
    opacity: 0;
    animation-delay: 0.3s; /* Delay before showing background */
    animation: fadeInBackground 0.3s ease forwards;
    overflow: hidden; /* Prevent scrollbars */
}

 @keyframes fadeInBackground {
     to { 
        opacity: 1; 
        background-color: var(--background-color); /* Transition to the actual background color */
     }
 }

.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: min(3vh, 30px); /* Clamped padding */
    opacity: 0; 
    animation: fadeIn 0.1s ease-in forwards;
    animation-delay: 0.3s; /* Match the background transition delay */
}

 @keyframes fadeIn {
    to { opacity: 1; }
}

/* Timer title styles */
#timer-title {
    font-size: calc(clamp(1.5rem, 5vh, 3rem) * var(--font-scale));
    font-weight: bold;
    color: var(--title-color);
    margin-bottom: calc(clamp(10px, 3vh, 30px) * var(--font-scale));
    text-align: center;
    transition: color 0.3s ease;
    max-width: 90vw;
    line-height: 1.2;
}

/* Timezone indicator */
.timezone-indicator {
    font-size: calc(clamp(0.8rem, 2.5vh, 1.5rem) * var(--font-scale));
    color: var(--label-color);
    margin-top: calc(clamp(5px, 0.5vh, 10px) * var(--font-scale));
    font-weight: normal;
}

/* Progress bar styles */
#progress-container {
    width: 50%;
    max-width: 80vw;
    height: calc(clamp(6px, 1.5vh, 12px) * var(--font-scale));
    background-color: var(--progress-background);
    border-radius: calc(clamp(2px, 0.5vh, 6px) * var(--font-scale));
    margin: calc(clamp(10px, 3vh, 30px) * var(--font-scale)) 0;
    overflow: hidden;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--progress-color);
    border-radius: calc(clamp(2px, 0.5vh, 6px) * var(--font-scale));
    transition: width 0.5s ease;
}

/* Standard display styles */
.standard-display {
    display: flex;
    gap: calc(clamp(10px, 3vw, 30px) * var(--font-scale));
    background-color: var(--timer-background);
    padding: calc(clamp(15px, 5vh, 50px) * var(--font-scale)) calc(clamp(15px, 5vw, 50px) * var(--font-scale));
    border-radius: calc(clamp(10px, 2vh, 20px) * var(--font-scale));
    box-shadow: 0 calc(clamp(2px, 0.5vh, 8px) * var(--font-scale)) calc(clamp(5px, 2vh, 20px) * var(--font-scale)) var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 30vh;
    align-items: center;
    justify-content: center;
}

/* Add scaling classes */
.standard-display.days-only {
    /* When only showing days */
    padding: calc(clamp(20px, 6vh, 60px) * var(--font-scale)) calc(clamp(20px, 8vw, 80px) * var(--font-scale));
}

.standard-display.short-timer {
    /* For timers with fewer units */
    padding: calc(clamp(15px, 5vh, 50px) * var(--font-scale)) calc(clamp(10px, 4vw, 40px) * var(--font-scale));
}

.time-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: calc(clamp(60px, 15vw, 150px) * var(--font-scale));
}

/* Days-only mode will have larger numbers */
.days-only .time-segment {
    min-width: calc(clamp(120px, 30vw, 300px) * var(--font-scale));
}

/* Short timer will have narrower segments */
.short-timer .time-segment {
    min-width: calc(clamp(40px, 10vw, 100px) * var(--font-scale));
}

#days, #hours, #minutes, #seconds {
    font-size: calc(clamp(2.5rem, 12vh, 8rem) * var(--font-scale)); /* Base size with clamp */
    font-weight: bold;
    line-height: 1;
    color: var(--text-color);
    transition: color 0.3s ease;
}

/* Different sizes based on context */
.days-only #days {
    font-size: calc(clamp(3rem, 20vh, 12rem) * var(--font-scale));
}

.short-timer #hours, 
.short-timer #minutes, 
.short-timer #seconds {
    font-size: calc(clamp(3rem, 15vh, 10rem) * var(--font-scale));
}

.label {
    font-size: calc(clamp(0.8rem, 3vh, 1.8rem) * var(--font-scale));
    color: var(--label-color);
    margin-top: calc(clamp(5px, 1vh, 10px) * var(--font-scale));
    transition: color 0.3s ease;
}

.days-only .label {
    font-size: calc(clamp(1rem, 4vh, 2rem) * var(--font-scale));
}

/* Compact display styles */
.compact-display {
    background-color: var(--timer-background);
    padding: calc(clamp(15px, 5vh, 50px) * var(--font-scale)) calc(clamp(15px, 5vw, 50px) * var(--font-scale));
    border-radius: calc(clamp(10px, 2vh, 20px) * var(--font-scale));
    box-shadow: 0 calc(clamp(2px, 0.5vh, 8px) * var(--font-scale)) calc(clamp(5px, 2vh, 20px) * var(--font-scale)) var(--shadow-color);
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0;
    font-weight: bold;
    color: var(--text-color);
    transition: color 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compact-display.days-only {
    padding: calc(clamp(20px, 6vh, 60px) * var(--font-scale)) calc(clamp(20px, 6vw, 60px) * var(--font-scale));
}

.compact-display.short-timer {
    padding: calc(clamp(15px, 4vh, 40px) * var(--font-scale)) calc(clamp(15px, 4vw, 40px) * var(--font-scale));
}

#compact-days, #compact-hours, #compact-minutes, #compact-seconds, .delimiter {
    font-size: calc(clamp(2.5rem, 15vh, 9rem) * var(--font-scale)); /* Base size with clamp */
    line-height: 1;
}

/* Different sizes based on context */
.days-only #compact-days {
    font-size: calc(clamp(3rem, 20vh, 12rem) * var(--font-scale));
}

.short-timer #compact-hours,
.short-timer #compact-minutes,
.short-timer #compact-seconds {
    font-size: calc(clamp(3rem, 18vh, 11rem) * var(--font-scale));
}

.delimiter {
    margin: 0 calc(clamp(-3px, -0.6vw, -6px) * var(--font-scale));
    color: var(--text-color);
}

#complete-message {
    font-size: calc(clamp(3rem, 15vh, 9rem) * var(--font-scale));
    font-weight: bold;
    color: var(--text-color);
    margin-top: calc(clamp(10px, 3vh, 30px) * var(--font-scale));
    transition: color 0.3s ease;
}

.resume-banner {
    background-color: var(--timer-background);
    padding: calc(clamp(8px, 2vh, 20px) * var(--font-scale)) calc(clamp(10px, 3vw, 30px) * var(--font-scale));
    border-radius: calc(clamp(5px, 1vh, 10px) * var(--font-scale));
    text-align: center;
    margin-top: calc(clamp(10px, 3vh, 30px) * var(--font-scale));
    box-shadow: 0 calc(clamp(1px, 0.3vh, 3px) * var(--font-scale)) calc(clamp(3px, 1vh, 10px) * var(--font-scale)) var(--shadow-color);
    font-size: calc(clamp(0.9rem, 2.5vh, 1.5rem) * var(--font-scale));
}

.resume-banner a {
    color: var(--progress-color);
    font-weight: bold;
    text-decoration: none;
}

.resume-banner a:hover {
    text-decoration: underline;
}

/* Mobile-specific styles */
.mobile-optimized .standard-display {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px 15px;
}

.mobile-optimized .time-segment {
    min-width: 70px;
    margin: 0 5px;
}

.mobile-optimized #days, 
.mobile-optimized #hours, 
.mobile-optimized #minutes, 
.mobile-optimized #seconds {
    font-size: calc(clamp(2rem, 8vh, 3.5rem) * var(--font-scale));
}

.mobile-optimized .label {
    font-size: calc(clamp(0.7rem, 2vh, 1rem) * var(--font-scale));
}

.mobile-optimized .compact-display {
    padding: 20px 15px;
}

.mobile-optimized #compact-days, 
.mobile-optimized #compact-hours, 
.mobile-optimized #compact-minutes, 
.mobile-optimized #compact-seconds, 
.mobile-optimized .delimiter {
    font-size: calc(clamp(2rem, 8vh, 3.5rem) * var(--font-scale));
}

.mobile-optimized #timer-title {
    font-size: calc(clamp(1.2rem, 4vh, 2rem) * var(--font-scale));
    margin-bottom: 15px;
}

.mobile-optimized .timezone-indicator {
    font-size: calc(clamp(0.7rem, 2vh, 1rem) * var(--font-scale));
}

.mobile-optimized #progress-container {
    height: 8px;
    width: 90%;
}

.mobile-optimized #complete-message {
    font-size: calc(clamp(2.5rem, 10vh, 5rem) * var(--font-scale));
}

/* Ensure timer is visible even on the smallest screens */
@media (max-height: 400px) {
    .standard-display, .compact-display {
        padding: 10px 15px;
    }
    
    #days, #hours, #minutes, #seconds {
        font-size: calc(clamp(1.5rem, 10vh, 2.5rem) * var(--font-scale));
    }
    
    .label {
        font-size: calc(clamp(0.6rem, 2vh, 0.9rem) * var(--font-scale));
    }
    
    #compact-days, #compact-hours, #compact-minutes, #compact-seconds, .delimiter {
        font-size: calc(clamp(1.5rem, 10vh, 2.5rem) * var(--font-scale));
    }
    
    #timer-title {
        font-size: calc(clamp(1rem, 4vh, 1.5rem) * var(--font-scale));
        margin-bottom: 8px;
    }
    
    #progress-container {
        height: 4px;
        margin: 8px 0;
    }
}

/* Count-up indicator styles */
.countup-indicator {
    font-size: calc(clamp(1.5rem, 8vh, 5rem) * var(--font-scale));
    color: var(--text-color);
    font-weight: bold;
    line-height: 1;
    margin-right: calc(clamp(2px, 0.5vw, 5px) * var(--font-scale));
    display: inline;
}

/* For the compact display countup indicator */
.compact-display .countup-indicator {
    font-size: calc(clamp(2.5rem, 12vh, 7rem) * var(--font-scale));
    margin-right: calc(clamp(5px, 1vw, 10px) * var(--font-scale));
}

/* SINCE label for date-based countup */
.since-label {
    font-size: calc(clamp(1rem, 4vh, 2.5rem) * var(--font-scale));
    color: var(--progress-color);
    font-weight: bold;
    margin-top: calc(clamp(10px, 3vh, 30px) * var(--font-scale));
    text-align: center;
}

/* Mobile optimizations for countup */
.mobile-optimized .countup-indicator {
    font-size: calc(clamp(1.2rem, 6vh, 3rem) * var(--font-scale));
}

.mobile-optimized .compact-display .countup-indicator {
    font-size: calc(clamp(1.8rem, 7vh, 3.5rem) * var(--font-scale));
}

.mobile-optimized .since-label {
    font-size: calc(clamp(0.9rem, 3vh, 1.8rem) * var(--font-scale));
}

/* Counting up state styling */
.counting-up .time-segment .label {
    color: var(--progress-color);
}

.counting-up.compact-display .delimiter {
    color: var(--progress-color);
}

.counting-up .countup-indicator {
    color: var(--progress-color);
}