/* Projekt: Ninabella | https://nina3c.dk/
 * Brugsvilkår: LICENSE.md / /brugsvilkaar/ | Kilder: SOURCES.md
 * Projekt-credit angiver ikke verificeret ophav til alle bidrag.
 */
/*
 * Ninabella | https://nina3c.dk/
 * Side / effekt / komponent: style
 * Fil: css/style.css
 * Version registreret: 2026-10-04T19:00:49+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-09-30T15:08:53+02:00
 * Observeret seneste filændring før registrering: 2026-10-03T20:56:28+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
:root {
    --site-header-height: 64px;
    --site-bg: #090c18;
    --surface: #10172a;
    --text: #f8f7ff;
    --muted-text: #c7cee8;
    --cyan: #25d7ff;
    --pink: #ff63da;
    --font-display: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--site-bg); }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    padding-top: var(--site-header-height);
    overflow-x: hidden;
    background: var(--site-bg);
    color: var(--text);
    font-family: var(--font-display);
}

button, a { font: inherit; }
button { touch-action: manipulation; }
a { color: inherit; }

.site-header {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto;
    min-height: var(--site-header-height);
    padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgb(9 12 24 / 96%);
    border-bottom: 1px solid rgb(255 99 218 / 35%);
    box-shadow: 0 5px 20px rgb(0 0 0 / 28%);
}

.site-content, .ninabella-game-page { min-height: calc(100svh - var(--site-header-height)); }
.content-section, .ninabella-game-layout { width: min(1100px, 100%); margin: 0 auto; }
.content-section { padding: 40px max(18px, env(safe-area-inset-right)) 56px max(18px, env(safe-area-inset-left)); }
.content-section--intro { max-width: 720px; }
.eyebrow, .ninabella-game-kicker { margin: 0; color: var(--cyan); font: 800 .78rem/1.2 ui-monospace, monospace; letter-spacing: .13em; }
.content-section h1, .ninabella-game-title { margin: 10px 0 12px; font-size: clamp(2.35rem, 10vw, 4.6rem); line-height: .96; }
.content-section p, .ninabella-game-intro { color: var(--muted-text); font-size: 1rem; line-height: 1.55; }

.ninabella-game-page {
    padding: 28px max(18px, env(safe-area-inset-right)) 56px max(18px, env(safe-area-inset-left));
    background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--game-accent, var(--cyan)) 16%, transparent), transparent 30rem), var(--site-bg);
}
.ninabella-game-intro { max-width: 62ch; margin: 0 0 28px; }
.ninabella-game-panel { position: relative; padding: 18px; border: 2px solid var(--game-accent, var(--cyan)); border-radius: 22px; background: linear-gradient(145deg, #141b31, #0b1020); box-shadow: 0 0 34px color-mix(in srgb, var(--game-accent, var(--cyan)) 18%, transparent); }
.ninabella-game-content { position: relative; min-width: 0; }

.button, .text-button { min-height: 44px; padding: 10px 16px; border-radius: 12px; color: #fff; font-weight: 900; cursor: pointer; }
.button { border: 1px solid var(--game-accent, var(--pink)); background: color-mix(in srgb, var(--game-accent, var(--pink)) 22%, #10172a); text-decoration: none; }
.text-button { border: 0; background: transparent; color: var(--muted-text); }
.button:hover, .button:focus-visible { filter: brightness(1.15); outline: 3px solid #fff; outline-offset: 3px; }

.game-mode-toggle {
    position: fixed;
    z-index: 900;
    top: calc(78px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 10px;
    border: 1px solid rgb(113 246 255 / 42%);
    border-radius: 14px;
    background: rgb(12 21 42 / 94%);
    color: #eef7ff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgb(0 0 0 / 26%), 0 0 18px rgb(113 246 255 / 12%);
    backdrop-filter: blur(12px);
}
.game-mode-toggle:hover { transform: translateY(-1px); border-color: #71f6ff; }
.game-mode-toggle:focus-visible { outline: 3px solid #ffe277; outline-offset: 3px; }
.game-mode-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.game-mode-label, .game-mode-close { display: none; }

body.game-mode-active {
    height: var(--game-viewport-height, 100svh);
    min-height: var(--game-viewport-height, 100svh);
    padding-top: 0;
    overflow: hidden;
    overflow-x: hidden;
}
body.game-mode-active > .site-header,
body.game-mode-active > .site-footer { display: none; }
body.game-mode-active .game-mode-toggle {
    z-index: 3000;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    border-color: rgb(255 99 218 / 70%);
    background: rgb(35 18 58 / 96%);
    color: #fff;
}
body.game-mode-active .game-mode-open { display: none; }
body.game-mode-active .game-mode-close { display: inline; }
body.game-mode-active .ninabella-game-page {
    display: grid;
    height: var(--game-viewport-height, 100svh);
    min-height: var(--game-viewport-height, 100svh);
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: hidden;
}
body.game-mode-active .ninabella-game-layout {
    width: min(1240px, 100%);
    min-height: 0;
    height: 100%;
}
body.game-mode-active .ninabella-game-kicker,
body.game-mode-active .ninabella-game-title,
body.game-mode-active .ninabella-game-intro { display: none; }
body.game-mode-active .ninabella-game-panel {
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 2vmin, 20px);
    overflow: hidden;
}
body.game-mode-active .ninabella-game-content {
    height: 100%;
    min-height: 0;
}

/* I landskab prioriteres selve spillet, men der bevares en lille sikker kant. */
@media (orientation: landscape) {
    body.game-mode-active .ninabella-game-page {
        padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    }

    body.game-mode-active .ninabella-game-panel {
        padding: clamp(6px, 1.25vmin, 14px);
    }
}

/* Valgfri, fælles portrætbesked for spil, der kun fungerer i landskab. */
.game-rotate-notice { display: none; }

@media (orientation: portrait) {
    body.game-mode-active [data-requires-landscape] > .game-rotate-notice {
        position: absolute;
        z-index: 20;
        inset: 0;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 10px;
        padding: 28px;
        border-radius: inherit;
        background: rgb(9 13 27 / 97%);
        color: #f8f7ff;
        text-align: center;
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game-accent, var(--pink)) 72%, transparent);
        font-weight: 700;
    }

    body.game-mode-active .game-rotate-notice strong { font-size: clamp(1.35rem, 7vw, 2rem); }
    body.game-mode-active .game-rotate-notice span:last-child { color: var(--muted-text); }
    body.game-mode-active .game-rotate-icon {
        display: block;
        width: 58px;
        height: 58px;
        filter: drop-shadow(0 0 10px rgb(255 0 168 / 36%));
    }
}

/* Den indbyggede X-knap er kun synlig, når selve spilpanelet er i fuldskærm. */
.game-close-button {
    position: absolute;
    z-index: 5000;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 2px solid #d04ce0;
    border-radius: 14px;
    background: linear-gradient(145deg, #2b194c, #19112e);
    color: #fff;
    box-shadow: 0 0 22px rgb(208 76 224 / 24%), 0 10px 28px rgb(0 0 0 / 32%);
    cursor: pointer;
    touch-action: manipulation;
}
.game-section:fullscreen .game-close-button,
.game-section:-webkit-full-screen .game-close-button,
.game-section:-moz-full-screen .game-close-button { display: grid; }
.game-close-button:hover { border-color: #e176ec; background: linear-gradient(145deg, #38205d, #21153b); }
.game-close-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.game-close-button:active { transform: scale(.96); }
.game-close-button span { position: relative; display: block; width: 22px; height: 22px; }
.game-close-button span::before,
.game-close-button span::after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; border-radius: 999px; background: #fff; content: ""; transform-origin: center; }
.game-close-button span::before { transform: translateY(-50%) rotate(45deg); }
.game-close-button span::after { transform: translateY(-50%) rotate(-45deg); }

.site-footer { padding: 24px max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); color: var(--muted-text); font-size: .9rem; text-align: center; border-top: 1px solid rgb(255 255 255 / 10%); }
.pixel-heart { color: var(--pink); }

@media (min-width: 768px) {
    :root { --site-header-height: 70px; }
    .ninabella-game-page { padding-block: 48px 68px; }
    .ninabella-game-panel { padding: clamp(24px, 4vw, 40px); }
}

@media (max-width: 600px) {
    .game-mode-toggle {
        top: calc(10px + env(safe-area-inset-top));
        right: calc(10px + 44px + 10px + env(safe-area-inset-right));
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 8px;
    }
}

@media (min-width: 601px) and (max-width: 1100px), (any-pointer: coarse) {
    body:not(.game-mode-active) .game-mode-toggle {
        top: calc(10px + env(safe-area-inset-top));
        right: calc(18px + 44px + 10px + env(safe-area-inset-right));
    }
}

@media (min-width: 1100px) {
    .ninabella-game-page { padding-block: 62px 76px; }
}

/* Valgfri Drej-besked før spilstart for spil, der kræver landskab. */
@media (orientation: portrait) {
    body:not(.game-mode-active) [data-landscape-preview] > .ninabella-game-content { display: none; }
    body:not(.game-mode-active) [data-landscape-preview] > .game-rotate-notice {
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 10px;
        min-height: 220px;
        padding: 28px;
        color: var(--text);
        text-align: center;
        font-weight: 700;
    }
    body:not(.game-mode-active) [data-landscape-preview] .game-rotate-icon {
        width: 58px;
        height: 58px;
        filter: drop-shadow(0 0 10px rgb(255 0 168 / 36%));
    }
    body:not(.game-mode-active) [data-landscape-preview] .game-rotate-notice strong { font-size: clamp(1.35rem, 7vw, 2rem); }
    body:not(.game-mode-active) [data-landscape-preview] .game-rotate-notice span { color: var(--muted-text); }
}

.site-footer { background: #080914; }
.site-footer p { margin: 0; line-height: 1.7; }
.site-footer a { display: inline-block; margin: 4px; padding: 2px 10px; border: 2px solid #3985a4; border-radius: 9px; color: #8de5ff; font-weight: 800; text-decoration: none; }
.site-footer a:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.site-footer .site-footer-purpose { max-width: 1000px; margin: 18px auto 0; }
.site-footer-purpose strong { color: #8de5ff; }
.pixel-heart { display: inline-block; width: 1em; height: .9em; background: #ff63da; clip-path: polygon(0 22%,14% 7%,37% 7%,50% 22%,63% 7%,86% 7%,100% 22%,100% 48%,50% 100%,0 48%); vertical-align: -.08em; }

/* Fælles lydknap ved fuldskærmens lukknap. */
.game-audio-button { position: absolute; z-index: 40; top: 10px; right: 66px; width: 36px; height: 36px; padding: 7px; border: 1px solid #35bad6; border-radius: 12px; background: #0d1727; color: #f5f7ff; cursor: pointer; }
.game-audio-button svg { width: 100%; height: 100%; fill: currentColor; }
.game-audio-button .audio-waves, .game-audio-button .audio-slash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.game-audio-button .audio-slash, .game-audio-button.is-muted .audio-waves { display: none; }
.game-audio-button.is-muted .audio-slash { display: block; }
.game-audio-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Ninabella pixelplus-cursor | https://nina3c.dk/
 * Implementeret: 2026-10-04T19:08:06+02:00 (Europe/Copenhagen)
 * Motivet er tegnet efter Ninabellas eget pixelplus i logoet.
 */
@media (hover: hover) and (pointer: fine) {
    body { cursor: url('/assets/icons/ninabella-cursor.svg') 16 16, auto; }
    a, button, summary, [role="button"], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="range"] {
        cursor: url('/assets/icons/ninabella-cursor.svg') 16 16, pointer;
    }
    input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, [contenteditable="true"] { cursor: text; }
    button:disabled, input:disabled { cursor: not-allowed; }
}

/* Runde overskrifter som i Talværkstedet. */
body:not(.designmanual-page) :is(h1, h2, h3, h4) { font-family: 'Arial Rounded MT Bold', 'Ninabella Navigation', ui-rounded, sans-serif; font-weight: 700; }

/* Shared sound icons: preserve each button's foreground colour. */
.ninabella-audio-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url('/assets/icons/audio-on.svg') center / contain no-repeat;
    mask: url('/assets/icons/audio-on.svg') center / contain no-repeat;
}
.is-muted > .ninabella-audio-icon {
    -webkit-mask-image: url('/assets/icons/audio-off.svg');
    mask-image: url('/assets/icons/audio-off.svg');
}
.game-audio-button > .ninabella-audio-icon { width: 100%; height: 100%; }

/* Native long-press menus must not interrupt the active game surface. */
[data-game-panel].is-playing,
[data-game-panel].is-playing *,
[data-game-panel] .is-playing,
[data-game-panel] .is-playing * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
[data-game-panel].is-playing img:not([draggable="true"]),
[data-game-panel] .is-playing img:not([draggable="true"]) {
    -webkit-user-drag: none;
}
[data-game-panel].is-playing :is(input, textarea, [contenteditable]:not([contenteditable="false"])),
[data-game-panel] .is-playing :is(input, textarea, [contenteditable]:not([contenteditable="false"])) {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}