/* --- Stilark for lunch.html (Material 3 Dark Theme) --- */
body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #141218; /* M3 background */
    color: #E6E0E9; /* M3 on-background */
    font-family: 'Roboto', sans-serif;
    overflow: hidden; /* Skjuler scrollbars */
}

/* --- NY KLOKKE (Removed logic kept just in case of revert, but hidden) --- */
#vakt-klokke {
    display: none;
}

/* --- VAKT-BAR (Removed) --- */
#vakt-bar {
    display: none;
}

.vakt-seksjon {
    width: 48%;
    text-align: left;
}

.vakt-seksjon h3 {
    font-size: 1.8vw;
    font-weight: 500;
    color: #FFB4AB; /* M3 error/warm tone */
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vakt-seksjon p {
    font-size: 1.5vw;
    font-weight: 400;
    color: #E6E0E9;
    margin: 0;
    line-height: 1.4;
}


/* NY Container for akvarium-bakgrunn */
#aquarium-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 0.5s ease-in-out;

    /* M3 Dark gradient representation of water/depth */
    background: linear-gradient(to bottom,
            #141218 0%,
            #211F26 50%,
            #2B2930 100%
        );
}

/* Overlay for meldinger ("News Bar") */
#message-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;

    background-color: rgba(33, 31, 38, 0.9); /* M3 Surface matching */
    border-top: 1px solid #4A4458; /* M3 Outline */
    font-size: 2.5vw;
    font-weight: 500; /* M3 typically prefers medium weights */
    text-shadow: none;
    color: #D0BCFF; /* M3 Primary */
    padding: 20px;
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Klasse for å vise baren */
#message-overlay.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Skjerm for "etter stengetid" */
#after-hours {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #141218; /* M3 Background */
    z-index: 20;
    transition: opacity 0.5s ease-in-out;
}

#uia-logo {
    width: 60%;
    max-width: 400px;
}