/* Grundstil: reset, den fælles himmel med bakke og skyer, typografi, fokus og hjælpeklasser.
   Alt her gælder på tværs af siderne; sidespecifikke regler ligger i pages.css. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* manipulation slår dobbelttryk-zoom fra (hurtige tryk på styreknapperne zoomede siden på iPhone, og zoomen blev
   hængende efter genindlæsning); knib-zoom virker stadig. */
html {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font);
    color: var(--text);
    background: var(--sky);
    line-height: 1.45;
}

/* Siderne med class="world" (forside, memory, butik, favorit, indstillinger) deler én himmel og én bakke
   som to baggrundslag: en radial gradient nederst er bakken, en lineær gradient er himlen.
   Catch maler den samme scene på canvas i stedet (js/catch/entities.js), så den følger spillefladen.
   Bakkens højde er en variabel, så landskabet kun ændres ét sted (lidt højere i landskabsformat). */
.world {
    --hill-height: 16.67dvh;
    min-height: 100dvh;
    background-color: var(--sky);
    background-image:
        radial-gradient(ellipse 140% var(--hill-height) at 50% 100%, var(--grass-deep) 0 40%, var(--grass) 72%, transparent 80%),
        linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 75%, var(--sky) 100%);
    background-repeat: no-repeat;
    background-size: auto, auto;
    background-position: center bottom, center;
}

/* Skyerne (seks <img>, indsat af js/ui.js) ligger som et fast lag bag indholdet og driver frem og
   tilbage med en transform-animation. transform kan browseren animere på GPU'en uden at male siden om;
   havde skyerne været background-position, skulle hele himlen males om hvert billede. Hver sky har sin
   egen varighed (--dur) og afstand (--dx/--dy), så de ikke bevæger sig i takt. */
.clouds {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.world main {
    position: relative;
    z-index: 1;
}

/* Skyerne er ét fast lag for hele appen (de laves én gang); visningerne uden class="world" (Catch) skjuler dem. */
body:not(.world) .clouds {
    display: none;
}

.cloud {
    position: absolute;
    height: auto;
    animation: cloud-drift var(--dur) linear infinite alternate;
}

@keyframes cloud-drift {
    to { transform: translate3d(var(--dx), var(--dy), 0); }
}

.cloud--1 { width: min(280px, 24vw); top: 8vh; left: 0%; --dur: 55s; --dx: 20vw; --dy: 8px; }
.cloud--2 { width: min(150px, 13vw); top: 24vh; left: 16%; --dur: 72s; --dx: 10vw; --dy: -5px; }
.cloud--3 { width: min(110px, 10vw); top: 6vh; left: 44%; --dur: 90s; --dx: 11vw; --dy: 4px; }
.cloud--4 { width: min(140px, 12vw); top: 20vh; left: 62%; --dur: 58s; --dx: 14vw; --dy: 6px; }
.cloud--5 { width: min(190px, 16vw); top: 10vh; left: 84%; --dur: 80s; --dx: 12vw; --dy: -4px; }
.cloud--6 { width: min(240px, 20vw); top: 28vh; left: 36%; --dur: 42s; --dx: 18vw; --dy: 10px; }

@media (orientation: landscape) {
    .world {
        --hill-height: 20dvh;
    }
}

/* Overskrifter i brandets display-skrift; margener styres af layoutet (flex-gap), ikke af elementerne. */
h1,
h2 {
    margin: 0;
    font-family: var(--display);
}

/* Skip-link: skjult uden for skærmen, indtil den får tastaturfokus. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 8px;
    background: var(--cloud);
    color: var(--sky-deep);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    z-index: 5;
}

.skip-link:focus {
    left: 8px;
}

/* Tekst kun til skærmlæsere, fx overskrifter til sektioner uden synlig titel. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Tydelig gul fokusring ved tastatur; ikke ved klik og tryk, hvor den bare ville støje. */
:focus-visible {
    outline: 4px solid var(--focus);
    outline-offset: 3px;
}

/* <main> får fokus af routeren ved sideskift, men er ikke noget, man kan trykke på; ingen ring om hele siden. */
main:focus-visible {
    outline: none;
}

/* Har brugeren slået bevægelse fra i styresystemet, står skyer og kort stille; spillet virker stadig. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}