/* Sidespecifik stil: spillefladen i Catch the Scoops, layout og kort i Flavour Memory og butikken.
   Her ligger det, der kun gælder på én side; delte komponenter ligger i components.css. */

/* --- Catch the Scoops --- */

/* Spillefladen fylder hele skærmen bag HUD og knapper. Gradienten er den samme himmel som på de andre
   sider, så der ikke blinker en anden farve, før canvas har tegnet første billede. */
.stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 75%, var(--sky) 100%);
}

/* touch-action: none, så et træk hen over fladen styrer bægeret i stedet for at scrolle eller zoome. */
.stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* Skyen følger skiltet og er kun lidt bredere, så græstotten ligger i den. */
.sign-cloud {
    position: absolute;
    z-index: 0;
    top: 46%;
    left: 50%;
    width: 168%;
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
}

.hud__sign {
    position: relative;
    z-index: 1;
}

/* På smalle skærme flyttes skiltet ind mellem de to kontrolknapper til venstre og kanten til højre. */
@media (max-width: 700px) {
    body[data-page="catch"] .hud {
        left: calc(12px + (var(--tap-size) + 8px) * 2 + env(safe-area-inset-left));
        right: calc(12px + env(safe-area-inset-right));
        width: auto;
        max-width: 200px;
        margin-inline: auto;
        transform: none;
    }
}

/* Hjernefrys: isblåt slør over scenen, mens spillet går langsomt. */
body.is-freeze .stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(180, 220, 255, 0.45);
    pointer-events: none;
}

/* "3, 2, 1" midt på fladen. :empty skjuler laget, når teksten er tømt, uden ekstra klasse. */
.countdown {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(3rem, 20vw, 7rem);
    font-weight: 900;
    color: var(--cloud);
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.countdown:empty {
    display: none;
}

.pause-icon {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
}

.pause-icon::before,
.pause-icon::after {
    content: "";
    width: 5px;
    height: 16px;
    border-radius: 2px;
    background: currentColor;
}

/* --- Flavour Memory --- */

/* Siden deles lodret i logo (øverst), bræt (midten) og skilt (nederst). Målene regnes som variabler:
   --play-top er, hvor brættet må begynde (under logo og status), --sign-h er skiltets højde, og --band er
   den højde, der er tilbage til brættet. Så kan brættet fylde mest muligt uden at siden scroller. */
body[data-page="memory"] {
    --sign-h: 210px;
    --logo-w: min(360px, 90vw);
    --logo-h: calc(var(--logo-w) / 3.45);    /* logoets højde; billedet er 3,45 gange så bredt som højt */
    --play-top: calc(70px + var(--logo-h) + 64px + env(safe-area-inset-top));
    --band: calc(100dvh - var(--play-top) - var(--sign-h) - env(safe-area-inset-bottom) - 12px);
}

body[data-page="memory"] .hud {
    top: auto;
    bottom: 0;
    width: min(250px, calc(100vw - 24px));
}

body[data-page="memory"] .hud__board {
    top: 14%;
}

/* Brættets bredde er den mindste af skærmens bredde, båndets højde gange brættets bredde/højde-forhold (--board,
   sat på #game af js/memory/game.js) og 560 px, så alle kort altid er synlige. Et lavt bræt (bane 1 og 2) fylder
   ikke hele båndet; den frie højde fordeles i tre lige store mellemrum over logoet, mellem logo og bræt og under
   brættet (--lift er en tredjedel), så logoet ikke hænger alene øverst. Bane 3 fylder båndet, og --lift bliver 0. */
#game {
    --board-w: min(calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(var(--band) * var(--board, 1.3333)), 560px);
    --lift: max(0px, calc((var(--band) - var(--board-w) / var(--board, 1.3333)) / 3));
}

.memory-grid {
    position: fixed;
    z-index: 1;
    left: 50%;
    top: calc(var(--play-top) + var(--band) / 2 + var(--lift) / 2);
    transform: translate(-50%, -50%);
    width: var(--board-w);
    display: grid;
    gap: 8px;
}

/* Et kort er en knap med to sider. perspective giver 3D-dybde, når det indre vendes 180° om y-aksen;
   backface-visibility skjuler den side, der vender væk. */
.memory-card {
    font: inherit;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    perspective: 600px;
    border-radius: 12px;
}

.memory-card__inner {
    position: absolute;
    inset: 0;
    transition: transform 300ms ease;
    transform-style: preserve-3d;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.memory-card.is-open .memory-card__inner,
.memory-card.is-matched .memory-card__inner {
    transform: rotateY(180deg);
}

.memory-card.is-matched {
    animation: memory-pop 320ms ease;
}

@keyframes memory-pop {
    40% { outline: 4px solid var(--grass-deep); outline-offset: 2px; }
}

.memory-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.memory-card__face--back {
    background: #fff;
    border: 3px solid var(--sky);
}

.card-back__mark {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.memory-card__face--front {
    padding: 0;
    background: var(--cloud);
    border: 3px solid var(--sky);
    transform: rotateY(180deg);
    overflow: hidden;
}

.memory-card.is-matched .memory-card__face--front {
    border-color: var(--grass-deep);
}

.memory-card.is-favourite .memory-card__face--front {
    border-color: var(--gold);
}

.memory-card .swatch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 9px;
    box-shadow: none;
}

.memory-card .chunk {
    object-fit: contain;
}

/* To forkerte kort ryster kort, før de vendes tilbage (Norman: feedback). */
.memory-card.is-shaking .memory-card__inner {
    animation: memory-shake 350ms ease-in-out;
}

@keyframes memory-shake {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    20% { transform: rotateY(180deg) translateX(-10px); }
    40% { transform: rotateY(180deg) translateX(10px); }
    60% { transform: rotateY(180deg) translateX(-6px); }
    80% { transform: rotateY(180deg) translateX(6px); }
}

/* Kort besked midt over brættet ("+5", "Not a pair"). :empty skjuler den, når JS tømmer teksten. */
.memory-feedback {
    position: fixed;
    z-index: 2;
    top: calc(var(--play-top) + var(--band) / 2);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: fit-content;
    max-width: calc(100vw - 24px);
    margin: 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--black);
    text-align: center;
    font-weight: 900;
    text-shadow: none;
    pointer-events: none;
}

.memory-feedback:empty {
    display: none;
}

.memory-logo,
.memory-status {
    position: fixed;
    z-index: 2;
    margin: 0;
    pointer-events: none;
}

.memory-logo {
    top: calc(68px + env(safe-area-inset-top) + var(--lift));
    left: 50%;
    width: var(--logo-w);
    height: var(--logo-h);
    transform: translateX(-50%);
}

.memory-status {
    top: calc(68px + var(--logo-h) + 12px + env(safe-area-inset-top) + var(--lift));
    left: 50%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 28px;
    color: #fff;
    font-family: var(--display);
    font-size: 1.2rem;
    text-shadow: 0 2px 0 rgba(35, 31, 32, 0.35);
    transform: translateX(-50%);
}

.memory-turf {
    margin: 0;
}

/* På brede skærme bliver logoet større, og bedste/credits flytter ned i hjørnerne over bakken. */
@media (min-width: 960px) {
    body[data-page="memory"] {
        --logo-w: min(720px, 54vw);
        --play-top: calc(16px + var(--logo-h) + 28px + env(safe-area-inset-top));
    }

    .memory-logo {
        top: calc(8px + env(safe-area-inset-top) + var(--lift));
    }

    .memory-status {
        top: auto;
        bottom: calc(40px + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        width: auto;
        justify-content: space-between;
        padding-inline: max(48px, calc(50vw - 480px));
        font-size: clamp(1.35rem, 2vw, 1.9rem);
        text-shadow: 0 2px 0 var(--grass-deep);
        transform: none;
    }
}

.memory-feedback.is-bad {
    color: var(--red);
}

.memory-hearts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.memory-heart {
    position: absolute;
    color: var(--red);
    font-size: 16px;
    line-height: 1;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
}

/* --- Indstillinger --- */

/* Indstillingernes indhold (visningen og overlejringen i spillene) er en kolonne af hvide kort: sprog, lyd og credits.
   En række i lydkortet er tekst til venstre og kontakt til højre. */
.settings-body {
    display: grid;
    gap: 16px;
    width: 100%;
}

.settings-group {
    width: 100%;
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cloud);
    border-radius: 14px;
}

.settings-group__title {
    font-size: 1.1rem;
    color: var(--sky-deep);
}

.setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--tap-size);
    font-weight: 700;
}

/* Kontakt og lydstyrke hører sammen (gestalt: nærhed): skyderen sidder lige under kontakten og er låst, når den er slået fra. */
.setting-block {
    display: grid;
    gap: 2px;
}

/* Forklaring under en låst skyder (fx musikkens lydstyrke på iPhone). */
.setting__note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.setting--volume {
    gap: 14px;
    font-weight: 400;
}

.volume {
    flex: 1;
    min-width: 0;
    height: var(--tap-size);
    margin: 0;
    accent-color: var(--grass);
    cursor: pointer;
}

.volume:disabled {
    opacity: 0.4;
    cursor: default;
}

.setting--volume output {
    flex: none;
    width: 3.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Musikkens credits: små, men læselige, og links med tydelig understregning. */
.credits {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.95rem;
}

.credits__licence {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.credits__licence a {
    color: var(--grass-deep);
    text-decoration: underline;
}

/* --- Butik --- */

/* Belønning: navn, beskrivelse og pris til venstre, knappen til højre (gestalt: nærhed). Koder vises som
   "kuponer" med stiplet kant og monospace, så de er lette at læse op eller skrive af. */
.rewards,
.codes {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.reward {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    background: var(--cream);
}

.reward__name {
    font-weight: 900;
    color: var(--sky-deep);
}

.reward__description,
.reward__cost {
    display: block;
    font-size: 0.85rem;
}

.reward__description {
    color: var(--text-muted);
}

.reward__cost {
    font-weight: 700;
    color: var(--black);
}

.btn--redeem {
    width: auto;
    background-color: var(--gold);
    color: var(--cloud);
}

.code {
    padding: 10px 12px;
    border-radius: 14px;
    background: #e9f7df;
    border: 2px dashed var(--grass-deep);
}

.code__value {
    display: block;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.code__meta {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}