/* ==========================================================================
   Grundlæggende Nulstilling og Body Styling
   ========================================================================== */

/* Fjerner standard margin og padding, sætter box-sizing for nemmere layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* Standard skrifttype */
    display: flex; /* Bruger flexbox til centrering */
    justify-content: center; /* Centrerer indhold horisontalt */
    align-items: center; /* Centrerer indhold vertikalt */
    min-height: 100vh; /* Sikrer at body fylder mindst hele skærmens højde */
    background-color: #f0f0f0; /* Lys grå baggrundsfarve */
    padding: 15px; /* Lidt luft omkring indholdet på små skærme */
}

/* ==========================================================================
   Generel Container Styling (Gælder for alle skærme)
   ========================================================================== */

/* Fælles styling for start-, spil- og resultatskærme */
.container, .game-container, .results-container {
    background-color: white; /* Hvid baggrund */
    padding: 20px 30px; /* Indre afstand (top/bund, sider) */
    border-radius: 8px; /* Afrundede hjørner */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Diskret skygge */
    text-align: center; /* Centreret tekst */
    width: 95%; /* Fylder det meste af bredden, med lidt margin */
    margin: 20px auto; /* Centrerer containeren og giver lodret afstand */
    max-width: 800px; /* Maksimal bredde for spil/resultater */
}

/* Startskærmen kan være lidt smallere */
#start-screen {
     max-width: 600px;
}

/* Utility klasse til at skjule elementer */
.hidden {
    display: none !important; /* !important sikrer at det altid skjules */
}

/* ==========================================================================
   Start Skærm Specifik Styling (#start-screen)
   ========================================================================== */

#start-screen h1 {
    color: #333; /* Mørkegrå tekstfarve */
    margin-bottom: 15px; /* Afstand under overskriften */
}

#start-screen .instructions {
    color: #555; /* Lidt lysere grå tekst */
    margin-bottom: 25px; /* God afstand under instruktionerne */
    line-height: 1.5; /* Bedre læsbarhed for længere tekst */
}

#start-game-button {
    padding: 15px 30px; /* Stor og klikbar knap */
    font-size: 1.2em; /* Lidt større skrift */
    cursor: pointer; /* Viser at knappen er klikbar */
    background-color: #28a745; /* Grøn farve */
    color: white; /* Hvid tekst */
    border: none; /* Ingen standard ramme */
    border-radius: 5px; /* Let afrundede hjørner */
    transition: background-color 0.2s ease; /* Blød overgang ved hover */
    margin-bottom: 30px; /* Plads ned til highscore sektionen */
}
#start-game-button:disabled { /* Styling når knappen er deaktiveret (f.eks. under indlæsning) */
    background-color: #94dca4;
    cursor: not-allowed;
}
#start-game-button:not(:disabled):hover { /* Hover effekt kun når aktiv */
    background-color: #218838; /* Lidt mørkere grøn ved hover */
}


/* ==========================================================================
   Highscore Visning Styling (På Startskærm)
   ========================================================================== */

#highscore-display {
    margin-top: 20px; /* Afstand fra startknap */
    padding-top: 20px; /* Indre afstand foroven */
    border-top: 1px solid #eee; /* Fin linje som adskillelse */
}

#highscore-display h2 {
    color: #444; /* Lidt mørkere end normal tekst */
    font-size: 1.3em; /* Lidt større end normal tekst */
    margin-bottom: 10px; /* Afstand under overskrift */
}

#highscore-display ol {
    list-style-type: decimal; /* Nummereret liste */
    padding-left: 40px; /* Plads til numrene */
    text-align: left; /* Venstrestillet tekst i listen */
    max-width: 350px; /* Begrænser bredden for pænere udseende */
    margin: 0 auto; /* Centrerer selve listen */
    color: #333; /* Mørkegrå tekst */
}

#highscore-display li {
    margin-bottom: 8px; /* Afstand mellem listeelementer */
    font-size: 1.1em; /* Lidt større skrift */
    padding: 2px 0; /* Lidt luft over/under teksten */
}

/* Fremhæver top 3 en smule */
#highscore-display li:nth-child(-n+3) {
    font-weight: bold;
}

/* ==========================================================================
   Spil Område Styling (#game-area)
   ========================================================================== */

/* Positionering relativt for at kunne positionere version absolut */
.game-container {
    position: relative;
}

#round-title {
    color: #333;
    margin-bottom: 20px;
}

.score-display {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #555;
}

/* Versionsnummer styling */
#version-info {
    position: absolute; /* Positioneres ift. .game-container */
    top: 10px;          /* Afstand fra toppen */
    right: 15px;        /* Afstand fra højre */
    font-size: 0.8em;   /* Lille skriftstørrelse */
    color: #999;        /* Diskret grå farve */
    z-index: 10;        /* Lægger sig ovenpå andet indhold hvis nødvendigt */
}

/* ==========================================================================
   Billed Grid Styling (#image-grid)
   ========================================================================== */

.image-grid {
    display: grid; /* Bruger CSS Grid layout */
    grid-template-columns: repeat(2, 1fr); /* 2 lige brede kolonner */
    gap: 15px; /* Mellemrum mellem billederne */
    margin-bottom: 20px; /* Afstand ned til feedback/knap */
}

.image-container {
    border: 3px solid transparent; /* Usynlig ramme som standard (til feedback) */
    overflow: hidden; /* Sikrer billedet holder sig indenfor rammen */
    position: relative; /* Til fremtidige effekter */
    transition: transform 0.2s ease-in-out, border-color 0.2s ease; /* Animation ved hover/klik */
    cursor: pointer; /* Viser at billedet er klikbart */
}

/* Let zoom og ramme ved hover (kun når aktiv) */
.image-container:not(.reveal-correct):not(.incorrect-guess):hover {
    transform: scale(1.03);
    border-color: #aaa; /* Let grå ramme ved hover */
}

.image-container img {
    display: block; /* Fjerner lille mellemrum under billedet */
    width: 100%; /* Fyld containerens bredde */
    height: auto; /* Bevar aspect ratio */
    aspect-ratio: 1 / 1; /* Sørger for kvadratiske billeder (1:1) */
    object-fit: cover; /* Beskærer billedet så det fylder uden at forvrænge */
    transition: filter 0.4s ease, opacity 0.4s ease; /* Animation for feedback */
}

/* Styling for forkerte gæt (når feedback vises) */
.image-container.incorrect-guess {
     cursor: default; /* Ikke længere klikbar */
     transform: none; /* Fjern hover-effekt */
     border-color: transparent; /* Ingen ramme */
}
.image-container.incorrect-guess img {
    filter: grayscale(80%); /* Gør billedet gråt */
    opacity: 0.5; /* Gør billedet halvgennemsigtigt */
}

/* Fremhæver det korrekte svar (hvis man gættede forkert) */
.image-container.reveal-correct {
    border-color: #28a745; /* Grøn ramme */
    border-width: 4px; /* Tykkere ramme */
    transform: scale(1.02); /* Let zoom for at fremhæve */
    cursor: default;
}
.image-container.reveal-correct img {
    filter: none; /* Fjern evt. gråtone */
    opacity: 1; /* Fuld synlighed */
}

/* Besked under indlæsning af billeder */
.loading-message {
    text-align: center;
    padding: 40px;
    color: #555;
    grid-column: 1 / -1; /* Spænd over begge kolonner */
}
/* Fejlbesked hvis billeder ikke kan loades */
.error-message {
    text-align: center;
    padding: 40px;
    color: red;
    font-weight: bold;
    grid-column: 1 / -1; /* Spænd over begge kolonner */
}

/* ==========================================================================
   Feedback & Næste Knap Styling
   ========================================================================== */

.feedback-message {
    margin-top: 15px;
    font-size: 1.4em;
    font-weight: bold;
    min-height: 30px; /* Giver plads selvom den er tom, forhindrer hop i layout */
    line-height: 30px; /* Vertikal centrering (ca.) */
}

.correct-feedback {
    color: green; /* Grøn tekst for korrekt svar */
}

.incorrect-feedback {
    color: red; /* Rød tekst for forkert svar */
}

#next-round-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    background-color: #007bff; /* Blå farve */
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

#next-round-button:hover {
    background-color: #0056b3; /* Mørkere blå ved hover */
}

/* ==========================================================================
   Resultat Skærm Styling (#results-area)
   ========================================================================== */

.results-container h2 {
    color: #333;
    margin-bottom: 15px;
}
.results-container p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #444;
    margin-bottom: 8px; /* Lidt luft mellem linjerne */
}
/* Fremhæv den endelige score */
.results-container p strong {
    font-size: 1.5em;
    color: #007bff; /* Blå farve */
}

/* Knappen "Tilbage til Start" (erstatter den gamle 'Spil Igen') */
#back-to-start-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    background-color: #6c757d; /* Neutral grålig knap */
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 25px; /* God afstand fra highscore input/tekst */
    transition: background-color 0.2s ease;
}

#back-to-start-button:hover {
     background-color: #5a6268; /* Mørkere grå ved hover */
}

/* ==========================================================================
   Highscore Input Styling (På Resultatskærm)
   ========================================================================== */

#highscore-input-area {
    margin-top: 25px; /* Afstand fra resultattekst */
    padding: 20px; /* God indre afstand */
    border: 1px dashed #ccc; /* Stiplet ramme for at adskille */
    background-color: #f9f9f9; /* Meget lys grå baggrund */
    border-radius: 5px; /* Let afrundede hjørner */
}

#highscore-input-area p {
    font-weight: bold;
    margin-bottom: 15px; /* Afstand ned til label/input */
    font-size: 1.1em;
    color: #333;
}

#highscore-input-area label {
    margin-right: 10px; /* Afstand mellem label og inputfelt */
    font-weight: bold;
}

#highscore-input-area input[type="text"] {
    padding: 10px; /* Lidt større inputfelt */
    margin-right: 10px; /* Afstand til knap */
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 180px; /* Giver lidt mere plads til at skrive */
}

#highscore-input-area button {
    padding: 10px 18px; /* Lidt større knap */
    cursor: pointer;
     background-color: #007bff; /* Blå gem-knap */
     color: white;
     border: none;
     border-radius: 4px;
     transition: background-color 0.2s ease;
}
#highscore-input-area button:hover {
     background-color: #0056b3; /* Mørkere blå ved hover */
}

/* ==========================================================================
   Responsivitet (Tilpasning til mindre skærme)
   ========================================================================== */

@media (max-width: 600px) {
    /* Gør billedgrid til en enkelt kolonne på små skærme */
    .image-grid {
        grid-template-columns: 1fr;
        gap: 10px; /* Lidt mindre mellemrum */
    }

    /* Reducer padding på containere for at give mere plads til indhold */
     .container, .game-container, .results-container {
        padding: 15px 20px;
        width: 100%; /* Brug fuld bredde */
    }

    /* Reducer skriftstørrelse på hovedoverskrifter */
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.3em; }

    /* Gør knapper lidt mindre på små skærme */
    #start-game-button { padding: 12px 25px; font-size: 1.1em; }
    #next-round-button { padding: 8px 15px; font-size: 0.9em; }
    #back-to-start-button { padding: 8px 15px; font-size: 0.9em; }

    /* Juster highscore input layout for små skærme */
    #highscore-input-area label,
    #highscore-input-area input[type="text"],
    #highscore-input-area button {
        display: block; /* Stack elementerne lodret */
        width: 90%; /* Gør dem næsten fuld bredde */
        margin: 8px auto; /* Centrer og giv lodret afstand */
        text-align: center;
    }
    #highscore-input-area label { margin-bottom: 0;}
    #highscore-input-area input[type="text"] { min-width: unset; }
}