html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-family: 'ABC';
    padding: 0;
    background-color: rgb(255, 243, 220);
    padding-bottom: env(safe-area-inset-bottom);
}

p {
    margin: 10vh;
    padding: 0;
}

@font-face {
    font-family: 'ABC';
    src: url('ABC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* BUTTONS */

button {
    font-family: 'ABC';
    width: auto;
    max-width: 80vw;      
    min-width: 250px;      

    padding: 0 2rem;
    margin: 10vh;
    border-radius: 100vh;  
    border: 2px solid #1f1f1f;

    background: transparent;
    color: #1f1f1f;
    /* color: rgb(79, 82, 47); */
    font-size: 1rem;

    cursor: pointer;
    transition: background 0.2s, transform 0.1s;


}

#skipUpload {
    position: fixed;
    bottom: calc(2rem + constant(safe-area-inset-bottom));
    bottom: calc(2rem + env(safe-area-inset-bottom)); 
    right: 2rem;

    margin: 0;
    /* min-width: none; */
}

#fallback {
    background: none;
    border: none;
    padding: 0;
    color: transparent;
}

#fallback2 {
    background: none;
    border: none;
    padding: 0;
    color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    button:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

button:active {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(0.97);
}


/* PROGRESS BAR */
#bar {
    width: 80vw;
    height: 1.5rem;
    /* background: rgb(252, 119, 83); */
    border-radius: 100vh;
    overflow: hidden;
    margin: 0;
    position: relative;
    border: 2px solid #1f1f1f; /* outline */
    box-sizing: border-box;
}

#barFill {
    height: 100%;
    width: 0%;
    background: rgb(176, 181, 125); 
    transition: width 0.2s ease-out;
    position: absolute;
    top: 0;
    left: 0;
}

#barText {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f1f1f;
    /* color: rgb(79, 82, 47);  */
    pointer-events: none;
    font-size: 1rem;
}

/* TIME PICKER */
.time-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 50vh;
    user-select: none;
    position: relative;
    padding: 0;
}

/* Wheel container */
.wheel {
    width: 25vw;
    height: 30vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;

    /* Fade top/bottom via mask */
    mask-image: linear-gradient(to bottom, transparent 0%, #1f1f1f 40%, #1f1f1f 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #1f1f1f 40%, #1f1f1f 60%, transparent 100%);
}

/* Scrollbar hidden */
.wheel::-webkit-scrollbar {
    display: none;
}

/* Wheel items */
.wheel div {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 10vh;
    font-size: 5vh;
    text-align: center;
    scroll-snap-align: center;
    color: #1f1f1f;
    opacity: 1; /* now always 1; fade handled by mask */
}

/* Center line separator */
.separator {
    width: 4px;
    height: 30vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 10;

    /* Gradient to match wheel fade */
    background: linear-gradient(to bottom, 
                transparent 0%, 
                #1f1f1f 40%, 
                #1f1f1f 60%, 
                transparent 100%);

}



/* ALARM SET */

#alarmSetText {
    font-size: 7vw;
    text-align: center;
    color: rgb(176, 181, 125); 
    min-width: 250px;
}

#alarmstart {
    font-size: 7vw;
    text-align: center;
    color: rgb(176, 181, 125); 
    min-width: 250px;
}


/* UX */

.step {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    position: absolute;  /* stack them on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;  /* always flex, no display: none */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.step-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}

#upload {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

#upload.visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 1s ease;
}


/* SLIDER CONTAINER */
.slider {
    display: flex;
    align-items: center;
    justify-content: center;     /* center slider */
    gap: 1rem;
    width: 90%;
    max-width: 80vw;
    margin: 0;
    flex-wrap: nowrap;             /* allow text to wrap on small screens */
}

/* TEXT + EMOJI */
.emoji {
    flex: 0 1 auto;              /* can shrink if needed */
    font-size: clamp(1.5rem, 6vw, 2.5rem); /* responsive and can shrink */
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

/* SLIDER INPUT */
.slider input[type="range"] {
    flex: 1 1 200px;             /* grow and shrink, min 200px */
    height: 1.5rem;              /* track height */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    min-width: 250px;            /* prevents slider from becoming tiny */
}

/* TRACK */
.slider input[type="range"]::-webkit-slider-runnable-track {
    height: 1.5rem;
    border-radius: 100vw;
    background: rgb(176, 181, 125);
    border: 2px solid #1f1f1f;
}

.slider input[type="range"]::-moz-range-track {
    height: 1.5rem;
    border-radius: 999px;
    background: #1f1f1f;
    border: 2px solid #1f1f1f;
}

/* THUMB */
.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background: rgb(255, 243, 220);
    border: 2px solid #1f1f1f;
    margin-top: -0.75rem;
    transition: transform 0.1s ease;
}

.slider input[type="range"]::-moz-range-thumb {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background: rgb(255, 243, 220);
    border: 2px solid #1f1f1f;
}

/* HOVER & ACTIVE */
.slider input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.1);
}

.slider input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.15);
}