/* Layout: siderne fylder hele skærmen, og HUD, knapper og chip er faste lag oven på scenen i stedet for en
   header, så spillet får hele højden på en telefon. Menuen er en centreret kolonne. */

/* Spilsiderne må ikke scrolle: alt er placeret absolut eller fast, og 100dvh følger med, når adresselinjen
   på mobil vises eller skjules. */
body[data-page="catch"],
body[data-page="memory"] {
    height: 100dvh;
    overflow: hidden;
}

/* Menukolonnen: centreret, smal nok til én tommelfinger, med plads øverst og nederst til de faste knapper. */
.menu {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: min(420px, 100%);
    margin: 0 auto;
    padding: calc(72px + env(safe-area-inset-top)) 16px calc(72px + env(safe-area-inset-bottom));
}

body[data-page="index"] {
    min-height: 100dvh;
}

body[data-page="index"] .menu,
body[data-page="favourites"] .menu {
    height: 100dvh;
    min-height: 0;
    gap: 10px;
    width: min(720px, 100%);
}

body[data-page="index"] .hero-logo {
    width: min(560px, 78vw);
}

body[data-page="index"] .menu h1 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
}

body[data-page="index"] form,
body[data-page="favourites"] form {
    width: min(560px, 100%);
}

/* Spilknapperne på forsiden: scene til venstre, navn og kort forklaring til højre. Skyggen gør dem
   knaplignende (Norman: affordance), og den lille løft/tryk-bevægelse er feedback på klik. */
.play {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 104px;
    padding: 10px 16px 10px 10px;
    background: var(--cream);
    color: var(--black);
    text-decoration: none;
    border-radius: 18px;
    box-shadow: var(--shadow);
    transition: transform 120ms ease;
}

.play:hover {
    transform: translateY(-2px);
}

.play:active {
    transform: translateY(3px);
}

.play:focus-visible {
    outline: 4px solid var(--focus);
    outline-offset: 2px;
}

.play__scene {
    position: relative;
    height: 84px;
}

/* Bægeret fra spillet (assets/cups/); billedet har samme højde som scenen, og bredden følger. */
.play__cup {
    display: block;
    height: 100%;
    width: auto;
    margin-inline: auto;
}

.play__scene--memory {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.play__card {
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 3px solid var(--sky);
}

.play__card--front {
    margin-left: -18px;
    border-color: var(--gold);
}

.play__card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.play__name {
    display: block;
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
}

.play__how {
    display: block;
    margin-top: 4px;
    font-size: 0.95rem;
}

.bonus {
    width: min(560px, 100%);
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 10px 14px;
    background: var(--cloud);
    color: var(--black);
    border-radius: 12px;
    text-align: center;
}

.bonus p {
    margin: 0;
}

.bonus__row {
    font-weight: 900;
}

.plus {
    color: var(--grass-deep);
}

.minus {
    color: var(--red);
}

.hero-logo {
    width: min(280px, 72vw);
    height: auto;
}

/* Hvid titel med mørk kant og hård skygge, så den kan læses på himlen, også når en hvid sky driver forbi bagved. */
.menu h1 {
    text-align: center;
    color: var(--cloud);
    -webkit-text-stroke: 5px var(--black);
    paint-order: stroke fill;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.menu h1 {
    font-size: clamp(2rem, 9vw, 3rem);
}

.menu .page-title__eyebrow {
    color: var(--black);
    text-align: center;
    text-shadow: none;
    background: var(--cloud);
    border-radius: 12px;
    padding: 8px 12px;
}

.page-title__eyebrow {
    margin: 0;
    font-family: var(--font);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu form,
.menu-actions,
.actions {
    display: grid;
    gap: 10px;
    width: 100%;
}

.actions {
    margin-top: 18px;
}

/* Runde kontrolknapper øverst til venstre: første plads er pause i spillene og tilbage-pilen på de andre visninger;
   anden plads (hud-btn--second) er hjælp i spillene og indstillinger i butik og favorit. De bruges sjældent og må
   gerne ligge uden for thumb zone. */
.hud-btn {
    position: fixed;
    z-index: 3;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    width: var(--tap-size);
    height: var(--tap-size);
    min-height: var(--tap-size);
    padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
    background: #fff;
}

.hud-btn--second {
    left: calc(12px + var(--tap-size) + 8px + env(safe-area-inset-left));
}

.hud-btn svg {
    width: 22px;
    height: 22px;
}

/* Forsidens ikonrække: instruktioner, favorit og indstillinger på samme plads som kontrolknapperne i spillene. */
.icon-bar {
    position: fixed;
    z-index: 3;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    display: flex;
    gap: 8px;
}

.icon-btn {
    width: var(--tap-size);
    height: var(--tap-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
    text-decoration: none;
    appearance: none;
}

.icon-btn svg {
    width: 26px;
    height: 26px;
    display: block;
}

/* Følg os: to runde ikonknapper, der får Facebooks/Instagrams farve ved hover og fokus. */
.follow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    color: var(--black);
    font-weight: 900;
}

.follow-btn {
    width: var(--tap-size);
    height: var(--tap-size);
    border-radius: 50%;
    background: #fff;
    color: var(--black);
    border: 2px solid #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.follow-btn:hover,
.follow-btn:focus-visible {
    transform: translateY(-2px);
}

.follow-btn:active {
    transform: translateY(1px);
}

.follow-btn:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.follow-btn--facebook:hover,
.follow-btn--facebook:focus-visible {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.follow-btn--instagram:hover,
.follow-btn--instagram:focus-visible {
    background: #e1306c;
    border-color: #e1306c;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .play,
    .follow-btn {
        transition: none;
    }
}

.follow-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Opsætning og menu skiftes med hidden-attributten; den synlige får hele kolonnen. */
#setup:not([hidden]),
#arcade:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: min(560px, 100%);
    flex: 1;
    min-height: 0;
}

#setup form,
body[data-page="favourites"] form {
    width: 100%;
}

#setup .btn {
    width: 100%;
}

/* Sprogvalg som to flag; det valgte har guldkant (aria-pressed sættes af js/i18n.js). */
.flags {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0;
}

.flags button {
    width: 72px;
    height: 48px;
    padding: 0;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
}

.flags button[aria-pressed="true"] {
    border-color: var(--gold);
}

.flags img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.follow p {
    margin: 0;
}

/* Credits-chippen nederst til højre, hvor tommelfingeren når den (thumb zone), på alle sider uden spil. */
.chip {
    position: fixed;
    z-index: 3;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    right: calc(12px + env(safe-area-inset-right));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--tap-size);
    min-height: var(--tap-size);
    padding: 0 12px;
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--black);
    font-family: var(--display);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    box-shadow: var(--shadow);
}

/* HUD'en (skiltet) er centreret øverst og klikker ikke igennem; bredden holder fri af knapperne i hjørnerne. */
.hud {
    position: fixed;
    z-index: 2;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: min(230px, calc(100vw - 128px));
    pointer-events: none;
}

/* Holdeknapperne i nederste hjørner (thumb zone). Containeren selv lader tryk gå igennem til spillefladen. */
.touch-controls {
    position: fixed;
    z-index: 3;
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    --move-size: 72px;
}

.touch-controls .btn {
    pointer-events: auto;
    width: var(--move-size);
    height: var(--move-size);
    min-height: var(--move-size);
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    transition: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

/* Pilene er SVG; tegnene ◀ ▶ bliver til emoji på iPhone. */
.move-icon {
    width: 36px;
    height: 36px;
}

.touch-controls[hidden] {
    display: none;
}

/* Store skærme: forsidens og opsætningens blok (logo, titel, spil) er midtstillet og skaleres op med skærmens højde i
   to trin, så den ikke ligner en lille telefon midt på en stor skærm. zoom skalerer layoutet med, så intet overlapper. */
@media (min-height: 950px) and (min-width: 900px) {
    #arcade:not([hidden]),
    #setup:not([hidden]) {
        zoom: 1.25;
    }
}

@media (min-height: 1200px) and (min-width: 1100px) {
    #arcade:not([hidden]),
    #setup:not([hidden]) {
        zoom: 1.5;
    }
}

/* Liggende telefon (lav skærm): højden er for lille til én kolonne, så forsiden, første opsætning og Favourite deles i to.
   Titel og logo står til venstre, valgene til højre; de faste knapper (ikonrække øverst til venstre, credits-chip nederst
   til højre) har plads, fordi indholdet er midtstillet og kolonnerne ikke fylder helt ud til hjørnerne. */
@media (orientation: landscape) and (max-height: 520px) {
    .menu {
        padding: 12px 16px calc(60px + env(safe-area-inset-bottom));
    }

    body[data-page="index"] .menu,
    body[data-page="favourites"] .menu {
        width: min(860px, 100%);
    }

    #arcade:not([hidden]),
    #setup:not([hidden]),
    body[data-page="favourites"] .menu {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-content: center;
        align-items: center;
        justify-items: center;
        column-gap: 24px;
        row-gap: 8px;
        width: 100%;
    }

    /* Forsiden: logo, titel og "Følg os" til venstre, de to spil til højre. */
    #arcade .hero-logo { grid-area: 1 / 1; align-self: end; width: min(300px, 100%); }
    #arcade h1 { grid-area: 2 / 1; }
    #arcade .follow { grid-area: 3 / 1; }
    #arcade .menu-actions { grid-area: 1 / 2 / 4 / 3; }
    .play { grid-template-columns: 84px 1fr; min-height: 80px; padding: 6px 12px 6px 6px; }
    .play__scene,
    .play__card { height: 64px; }
    .play__name { font-size: 1.15rem; }
    .play__how { font-size: 0.85rem; }

    /* Første opsætning: titel, sprog og "Continue" til venstre, smagene til højre. */
    #setup h1 { grid-area: 1 / 1; }
    #setup .flags { grid-area: 2 / 1; }
    #setup #setup-continue { grid-area: 3 / 1; }
    #setup form { grid-area: 1 / 2 / 4 / 3; }

    /* Favourite: titel og bonus til venstre, smagene til højre. */
    body[data-page="favourites"] h1 { grid-area: 1 / 1; align-self: end; }
    body[data-page="favourites"] .bonus { grid-area: 2 / 1; align-self: start; }
    body[data-page="favourites"] form { grid-area: 1 / 2 / 3 / 3; }

    .menu h1 { font-size: 1.6rem; }
}