/* Mama Shelter Oyster Counter - Display Styles (Artwork Edition) */

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

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    color: #f5ecda;
    background-color: #0d0c09;
}

body {
    background-image: url('assets/background-landscape.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

@media (orientation: portrait) {
    body {
        background-image: url('assets/background-portrait.jpg');
        background-position: center top;
    }
}

.display-root {
    position: relative;
    width: 100%;
    height: 100%;
}

.counter-section {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(74vw, 1400px);
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 2.2vw, 2.8rem);
    pointer-events: none;
}

@media (orientation: portrait) {
    .counter-section {
        top: 58%;
        width: min(84vw, 780px);
        gap: clamp(1rem, 3vw, 2rem);
        padding: clamp(1rem, 3vw, 2.2rem) clamp(0.8rem, 2.6vw, 1.8rem);
    }
}

.counter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.2rem, 2vw, 2.3rem);
    position: relative;
    width: 100%;
}

.counter-number {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.45rem, 1.4vw, 1.8rem);
    width: 100%;
}

.counter-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 4.8vw, 5.6rem);
    height: clamp(4.2rem, 6.6vw, 7.4rem);
    font-size: clamp(3rem, 5.8vw, 6.4rem);
    font-weight: 800;
    color: #fbf7ef;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
    pointer-events: none;
}

@media (orientation: portrait) {
    .counter-digit {
        width: clamp(2.2rem, 9.5vw, 4.2rem);
        height: clamp(3.2rem, 12vw, 5.5rem);
        font-size: clamp(2.4rem, 11vw, 4.6rem);
    }
}

.counter-digit.separator {
    width: clamp(0.8rem, 1.2vw, 1.6rem);
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    font-weight: 600;
    transform: translateY(clamp(0.28rem, 0.4vw, 0.55rem));
    color: #d9d1c3;
}

.quality-messages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: clamp(1rem, 1.8vw, 1.9rem);
    color: #f5ecda;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.65);
}

@media (orientation: portrait) {
    .quality-messages {
        font-size: clamp(0.8rem, 3.2vw, 1.3rem);
        letter-spacing: 0.09em;
    }
}

.typing-text {
    font-weight: 600;
}

.typing-cursor {
    font-weight: 400;
    margin-left: 0.25rem;
    animation: blink 1s steps(2, start) infinite;
    color: #f5ecda;
}

@keyframes blink {
    to { opacity: 0; }
}

#notificationContainer {
    max-width: 90vw;
    width: auto;
}

.location-notification {
    font-size: clamp(14px, 2.2vw, 22px) !important;
    padding: clamp(10px, 2.2vw, 18px) clamp(14px, 3vw, 28px) !important;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}