:root {
    --border-thick: 3px;
    --font-head: 'Outfit', font-weight: 900;
    --font-body: 'Space Mono', monospace;
}

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

body {
    background: #FFE1D1;
    font-family: var(--font-body);
    overflow-x: hidden; /* Hindrer sideveis scrolling */
}

/* --- Typografi for Mobil --- */
.main-title {
    /* Magien: Skalerer basert på skjermbredde. Aldri mindre enn 3rem, aldri større enn 15vw */
    font-size: clamp(3rem, 18vw, 10rem); 
    font-family: var(--font-head);
    line-height: 0.85;
    text-transform: uppercase;
    word-break: break-word; /* Hindrer at ord kuttes feil */
}

.month-title {
    font-size: clamp(4rem, 14vw, 12rem);
    font-family: var(--font-head);
    line-height: 1;
    letter-spacing: -0.05em;
}

/* --- Layout --- */
section.month-section {
    min-height: auto;
    padding: 40px 20px; /* Litt luft på sidene (20px) */
    border-bottom: var(--border-thick) solid #000;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.intro-header, .outro-footer {
    height: 90vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: var(--border-thick) solid #000;
}

.scroll-hint {
    margin-top: 40px;
    font-size: 1.2rem;
    text-transform: uppercase;
}

/* --- Musikkspiller --- */
.music-player {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1000;
    background: #fff;
    border: var(--border-thick) solid #000;
    padding: 5px;
    box-shadow: 4px 4px 0px #000; /* Brutalist shadow */
    max-width: 180px; /* Gjør den mindre på mobil */
}
.music-label { display: block; font-size: 0.7rem; font-weight: bold; margin-bottom: 2px;}
audio { width: 100%; height: 25px; }

/* --- Innhold --- */
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Luft mellom minnene */
}

.content-text {
    font-size: 1.3rem; /* God lesestørrelse på mobil */
    line-height: 1.4;
    font-weight: bold;
    border-left: var(--border-thick) solid;
    padding-left: 15px;
    margin-bottom: 20px;
}

.media-container {
     position: relative; /* Gjør at vi kan plassere knappen inni */
    width: 100%;
    border: var(--border-thick) solid currentColor;
    /* Skyggen justeres litt ned for mobil så den ikke ser rar ut */
    box-shadow: 6px 6px 0px currentColor; 
    background: #000;
    margin-bottom: 10px;
}

.media-container img, .media-container video {
    width: 100%;
    height: auto;
    display: block;
}

.caption {
    padding: 12px;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- Start Screen Overlay --- */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Hvit bakgrunn */
    z-index: 9999; /* Må ligge over ALT annet */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease; /* Fin fade-out effekt */
}

/* --- Den "sexy" knappen --- */
#start-btn {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 5vw, 3rem); /* Stor tekst, skalerer bra */
    font-weight: 900;
    text-transform: uppercase;
    
    background-color: #fff;
    color: #3D6080;
    
    padding: 20px 40px;
    border: 4px solid #3D6080; /* Tykk ramme */
    
    /* Hard skygge for brutalist-look */
    box-shadow: 8px 8px 0px #34526e; 
    
    cursor: pointer;
    transition: all 0.1s ease; /* Kjapp respons */
}

/* Når man trykker på knappen */
#start-btn:active {
    transform: translate(4px, 4px); /* Flytt knappen ned mot høyre */
    box-shadow: 4px 4px 0px #000;   /* Krymp skyggen */
}

.scroll-video {
    width: 100%;
    display: block;
    object-fit: cover; /* Sørger for at videoen fyller containeren fint */
    background-color: #000; /* Sort bakgrunn mens den laster */
    cursor: pointer; /* Gjør at man skjønner man kan trykke */
}

.unmute-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.7rem;
    padding: 5px 10px;
    
    border: 2px solid; /* Fargen styres av inline-style i EJS */
    cursor: pointer;
    text-transform: uppercase;
    
    /* Brutalist effekt */
    box-shadow: 3px 3px 0px currentColor;
    transition: transform 0.1s;
}

.unmute-btn.is-unmuted {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px;
}

.month-title, .content-block {
    will-change: transform, opacity;
}

.month-header {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Sørger for at teksten starter fra venstre */
    padding-left: 5%; /* Litt luft fra kanten */
    overflow: visible; 
}

.title-wrapper {
    position: relative;
    display: inline-block; /* Viktig: denne blir kun så bred som ordet */
}

.month-decoration-icon {
    position: absolute;
    /* Plasserer ikonet over siste bokstav */
    top: -23px; 
    right: -37px; 
    
    width: clamp(50px, 15vw, 110px);
    height: auto;
    z-index: 10;
    pointer-events: none;

    /* Tilted 12 grader til høyre som avtalt */
    transform: rotate(20deg);
    
    /* Valgfritt: gjør at ikonet skiller seg litt ut fra den tynne outline-teksten */
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.1));
}
/* Sørg for at hele startskjermen stabler innholdet vertikalt */
#start-screen {
    display: flex;
    flex-direction: column; /* Stabler tittel, bar og knapp */
    justify-content: center;
    align-items: center;
    padding: 20px; /* Gir luft så skyggene ikke treffer kanten av skjermen */
    text-align: center;
}

.loader-container {
    width: 100%;
    max-width: 350px; /* Begrenser bredden så den ikke blir for voldsom på desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.progress-wrapper {
    width: calc(100% - 10px); /* Trekker fra litt for å gi plass til skyggen på 6px */
    height: 30px;
    border: var(--border-thick) solid #000;
    background: #fff;
    position: relative;
    box-shadow: 6px 6px 0px #000; /* Skyggen din */
    margin-right: 6px; /* Kompenserer for skyggen så baren oppleves sentrert */
}

#progress-bar {
    height: 100%;
    width: 0%;
    background: #3D6080; /* Bruker samme blåfarge som knappen din */
}

.loader-title {
    font-family: var(--font-body);
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
}