/* 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/
 * Spil: Stjerneløberen
 * Fil: css/stjerneloeberen.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-02T02:39:03+02:00
 * Observeret seneste filændring før registrering: 2026-10-02T19:49:29+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */

.star-runner-page {
    --game-accent: #22ddff;
    --sr-bg: #050612;
    --sr-panel: rgba(5, 8, 28, 0.92);
    --sr-panel-2: rgba(9, 10, 37, 0.96);
    --sr-cyan: #22ddff;
    --sr-pink: #ff39c9;
    --sr-purple: #a855f7;
    --sr-violet: #7348ff;
    --sr-yellow: #fff36b;
    --sr-border: rgba(83, 219, 255, 0.75);
    --sr-radius: 20px;
}
.star-runner-page .star-runner-game {
    position: relative;
    z-index: 1;
    width: 100%;
}
.star-runner-page .star-runner-layout {
    display: grid;
    grid-template-columns:
        minmax(205px, 245px)
        minmax(0, 1fr);
    align-items: start;
    gap: clamp(12px, 1.3vw, 22px);
    width: 100%;
}
.star-runner-page .star-runner-guide,
.star-runner-page .star-runner-journey {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: 19px 18px;
    border: 2px solid var(--sr-cyan);
    border-radius: var(--sr-radius);
    background:
        linear-gradient(
            180deg,
            rgba(8, 11, 40, 0.97),
            rgba(4, 8, 28, 0.98)
        );
    box-shadow:
        0 0 0 1px rgba(76, 27, 179, 0.32) inset,
        0 0 15px rgba(0, 209, 255, 0.24),
        0 0 38px rgba(63, 42, 255, 0.10);
}
.star-runner-page .star-runner-guide::before,
.star-runner-page .star-runner-journey::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255,255,255,0.9) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 73% 37%,
            rgba(71,220,255,0.8) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 31% 75%,
            rgba(255,70,224,0.8) 0 1px,
            transparent 2px
        );
    background-size:
        73px 81px,
        103px 93px,
        127px 117px;
    opacity: 0.45;
}
.star-runner-page .star-runner-guide > *,
.star-runner-page .star-runner-journey > * {
    position: relative;
    z-index: 1;
}
.star-runner-page .star-runner-guide h2,
.star-runner-page .star-runner-journey h2 {
    margin: 0 0 21px;
    color: #ff54dc;
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    font-weight: 1000;
    text-align: center;
    text-shadow:
        0 0 10px rgba(255, 45, 215, 0.45);
}
.star-runner-page .guide-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 11px;
    margin: 0 0 17px;
}
.star-runner-page .guide-item strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 0.87rem;
    line-height: 1.2;
}
.star-runner-page .guide-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.77);
    font-size: 0.76rem;
    line-height: 1.35;
}
.star-runner-page .guide-icon {
    position: relative;
    display: block;
    width: 39px;
    height: 39px;
    font-size: 0;
    flex: 0 0 auto;
}
.star-runner-page .guide-item:nth-of-type(1) .guide-icon::before {
    content: "";
    position: absolute;
    inset: 2px;
    background:
        linear-gradient(
            135deg,
            #fff584,
            #ffbc22
        );
    clip-path:
        polygon(
            50% 0%,
            61% 34%,
            98% 36%,
            68% 57%,
            79% 94%,
            50% 72%,
            21% 94%,
            32% 57%,
            2% 36%,
            39% 34%
        );
    filter:
        drop-shadow(0 0 5px #ffbe24);
}
.star-runner-page .guide-item:nth-of-type(2) .guide-icon::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 32px;
    height: 29px;
    border-radius:
        16px 16px 7px 7px;
    background: #ff3f88;
    box-shadow:
        0 0 8px rgba(255, 64, 145, 0.7);
}
.star-runner-page .guide-item:nth-of-type(2) .guide-icon::after {
    content: "··";
    position: absolute;
    left: 11px;
    top: 4px;
    color: white;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
}
.star-runner-page .guide-item:nth-of-type(3) .guide-icon::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 2px;
    width: 3px;
    height: 37px;
    background: white;
    box-shadow:
        0 0 6px rgba(255,255,255,0.4);
}
.star-runner-page .guide-item:nth-of-type(3) .guide-icon::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 4px;
    width: 24px;
    height: 17px;
    background:
        linear-gradient(
            45deg,
            white 25%,
            transparent 25% 50%,
            white 50% 75%,
            transparent 75%
        ),
        #232345;
    background-size: 10px 10px;
    clip-path:
        polygon(
            0 0,
            100% 0,
            79% 50%,
            100% 100%,
            0 100%
        );
}
.star-runner-page .guide-item:nth-of-type(4) .guide-icon::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 25px;
    height: 22px;
    border-radius:
        3px 3px 12px 12px;
    background:
        linear-gradient(
            90deg,
            #ffb819,
            #fff081,
            #ffad00
        );
    box-shadow:
        0 0 7px rgba(255, 204, 47, 0.7);
}
.star-runner-page .guide-item:nth-of-type(4) .guide-icon::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 23px;
    width: 5px;
    height: 10px;
    background: #ffd34a;
    box-shadow:
        -6px 10px 0 2px #ffc228,
        6px 10px 0 2px #ffc228;
}
.star-runner-page .star-runner-cheer {
    margin-top: 22px;
    padding: 13px 12px;
    border: 2px solid #1cdfff;
    border-radius: 13px;
    background:
        rgba(8, 12, 42, 0.92);
    color: #ffffff;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: center;
    box-shadow:
        0 0 12px rgba(32, 218, 255, 0.2);
}
.star-runner-page .star-runner-center {
    min-width: 0;
}
.star-runner-page .star-runner-redesign .star-runner-hud {
    display: grid;
    grid-template-columns:
        minmax(115px, 0.8fr)
        minmax(155px, 1fr)
        minmax(105px, 0.7fr)
        minmax(130px, 0.9fr)
        minmax(130px, 0.9fr)
        92px;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: 0;
}
.star-runner-page .star-runner-hud > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 7px 12px;
    border: 2px solid #9861ff;
    background:
        linear-gradient(
            180deg,
            rgba(13, 16, 46, 0.96),
            rgba(5, 7, 26, 0.96)
        );
    color: #ffffff;
    font-family: monospace;
    font-size: clamp(0.72rem, 0.88vw, 0.95rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow:
        0 0 10px rgba(144, 74, 255, 0.12);
}
.star-runner-page #starRunnerStars {
    border-color: #24d7ff;
}
.star-runner-page #starRunnerLives {
    border-color: #ff47d2;
}
.star-runner-page .star-runner-score-box {
    border-color: #f2db43 !important;
}
.star-runner-page .star-runner-reset-score {
    min-width: 86px;
    padding: 0 13px;
    border: 2px solid #ff46cd;
    border-radius: 8px;
    background:
        linear-gradient(
            180deg,
            #692056,
            #35102f
        );
    color: white;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow:
        0 0 8px rgba(255, 55, 207, 0.22);
}
.star-runner-page .star-runner-reset-score:hover {
    filter: brightness(1.18);
}
.star-runner-page .star-runner-redesign .star-runner-screen {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    aspect-ratio: 336 / 208;
    border:
        clamp(3px, 0.3vw, 5px)
        solid #8746ff;
    border-radius: 16px;
    background: #07081a;
    box-shadow:
        0 0 0 2px #ff4fd4,
        0 0 18px rgba(177, 68, 255, 0.55),
        0 0 42px rgba(94, 37, 255, 0.24);
}
.star-runner-page .star-runner-redesign #starRunnerCanvas {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #08091b;
}
.star-runner-page [hidden] {
    display: none !important;
}
.star-runner-page .star-runner-redesign .star-runner-start {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 15;
    transform:
        translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: min(355px, 52%);
    min-height: 76px;
    padding: 16px 26px;
    border: 3px solid #ff58d8;
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(185, 10, 125, 0.97),
            rgba(112, 13, 92, 0.98)
        );
    color: #ffffff;
    font-size: clamp(1rem, 1.65vw, 1.65rem);
    font-weight: 1000;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.08) inset,
        0 0 13px #ff37cd,
        0 0 34px rgba(255, 24, 200, 0.52);
    text-shadow:
        0 2px 0 rgba(0,0,0,0.3);
    transition:
        transform 120ms ease,
        filter 120ms ease;
}
.star-runner-page .star-runner-redesign .star-runner-start:hover {
    transform:
        translate(-50%, -50%)
        scale(1.045);
    filter: brightness(1.12);
}
.star-runner-page .start-play-symbol {
    font-size: 1.35em;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,0.7));
}
.star-runner-page .star-runner-journey {
    text-align: center;
}
.star-runner-page .journey-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}
.star-runner-page .journey-level {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid #bba4ff;
    border-radius: 50%;
    background:
        #12132f;
    color: white;
    font-size: 1rem;
    font-weight: 1000;
}
.star-runner-page .journey-level.active {
    border-color: #ff56ef;
    background:
        radial-gradient(
            circle,
            #b024c7,
            #6c1fa8 65%,
            #29104d
        );
    box-shadow:
        0 0 7px #ff66ec,
        0 0 18px rgba(255, 66, 235, 0.68);
}
.star-runner-page .journey-dots {
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    opacity: 0.9;
}
.star-runner-page .journey-long {
    line-height: 0.72;
}
.star-runner-page .star-runner-journey .star-runner-rainbow {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    width: 100%;
    max-width: 154px;
    height: auto;
    margin: 22px auto 17px;
    padding: 0;
    background: none;
    border: 0;
}
.star-runner-page .star-runner-journey .star-runner-rainbow i {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.14);
}
.star-runner-page .rainbow-cup {
    position: relative;
    width: 86px;
    height: 73px;
    margin: 2px auto 9px;
    font-size: 0;
}
.star-runner-page .rainbow-cup::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 2px;
    width: 42px;
    height: 39px;
    border-radius:
        5px 5px 18px 18px;
    background:
        linear-gradient(
            90deg,
            #ffb716 0%,
            #fff38b 45%,
            #ffbe21 70%,
            #e89100 100%
        );
    box-shadow:
        0 0 11px rgba(255, 221, 68, 0.7);
}
.star-runner-page .rainbow-cup::after {
    content: "";
    position: absolute;
    left: 39px;
    top: 40px;
    width: 8px;
    height: 20px;
    background: #ffd947;
    box-shadow:
        -17px -28px 0 -7px #ffbd24,
        17px -28px 0 -7px #ffbd24,
        -15px 20px 0 4px #f6a900,
        15px 20px 0 4px #f6a900;
}
.star-runner-page .rainbow-title {
    display: block;
    color: #ffffff;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}
.star-runner-page .rainbow-waiting {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,0.88);
    font-size: 0.76rem;
    font-weight: 800;
}
.star-runner-page .star-runner-redesign .star-runner-actions {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 9px 0 0;
}
.star-runner-page .star-runner-redesign .star-runner-help {
    margin: 6px 0 0;
    color: rgba(255,255,255,0.56);
    font-size: 0.72rem;
    text-align: center;
}
@media (hover: hover) and (pointer: fine) {
    .star-runner-page .star-runner-redesign .star-runner-controls {
        display: none;
    }
}
.star-runner-page .star-runner-redesign .star-runner-about {
    width: 100%;
    margin: 20px 0 0;
    border: 1px solid rgba(102, 92, 255, 0.32);
    border-radius: 12px;
    background:
        rgba(7, 8, 26, 0.72);
    color: rgba(255,255,255,0.74);
}
.star-runner-page .star-runner-redesign .star-runner-about summary {
    padding: 15px 20px;
    cursor: pointer;
    color: #d9d7ff;
    font-weight: 800;
}
.star-runner-page .star-runner-redesign .star-runner-about[open] summary {
    border-bottom: 1px solid rgba(102, 92, 255, 0.32);
}
.star-runner-page .star-runner-redesign .star-runner-about p {
    max-width: 78ch;
    margin: 0;
    padding: 0 20px 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.55;
}
.star-runner-page .star-runner-redesign .star-runner-about p:first-of-type {
    padding-top: 16px;
}
.star-runner-page .star-runner-redesign .star-runner-about p:last-child {
    padding-bottom: 20px;
}

.star-runner-game { min-width: 0; }
.star-runner-page .star-runner-layout { grid-template-columns: minmax(150px,.35fr) minmax(0,1fr); }
.star-runner-page .star-runner-screen { width: 100%; aspect-ratio: 336 / 208; }
.star-runner-page .star-runner-screen canvas { width: 100%; height: 100%; image-rendering: auto; }
.star-runner-page .star-runner-journey { display: none; }
.star-runner-page.game-mode-active .star-runner-game { height: 100%; min-height: 0; }
.star-runner-page.game-mode-active .star-runner-guide,
.star-runner-page.game-mode-active .star-runner-about,
.star-runner-page.game-mode-active .star-runner-help,
.star-runner-page.game-mode-active .star-runner-reset-score { display: none; }
.star-runner-page.game-mode-active .star-runner-layout { display: block; height: 100%; }
.star-runner-page.game-mode-active .star-runner-center {
    --sr-control-gap: 16px;
    --sr-control-space: calc(88px + var(--sr-control-gap) + var(--sr-control-gap));
    --sr-board-size: min(calc(100% - var(--sr-control-space)), var(--sr-board-width, calc(100% - var(--sr-control-space))));
    --sr-control-edge: calc((100% - var(--sr-board-size)) / 2 - 44px - var(--sr-control-gap));
    position: relative; height: 100%; display: grid;
    grid-template-rows: auto minmax(0,1fr); gap: 8px;
}
.star-runner-page.game-mode-active .star-runner-hud { width: calc(100% - 60px); margin: 0 auto 0 0; grid-template-columns: .8fr 1fr .8fr 1fr 1fr; }
.star-runner-page.game-mode-active .star-runner-screen { align-self: center; justify-self: center; width: var(--sr-board-size); max-height: 100%; margin: 0; }
.star-runner-page.game-mode-active .star-runner-actions { position: absolute; inset: 0; pointer-events: none; min-height: 0; margin: 0; }
.star-runner-page.game-mode-active .star-runner-controls { display: contents; }
.star-runner-page.game-mode-active .star-runner-controls button { position: absolute; width: 44px; height: 44px; min-height: 44px; pointer-events: auto; }
.star-runner-page.game-mode-active [data-direction="up"] { left: var(--sr-control-edge); top: calc(50% - 60px); }
.star-runner-page.game-mode-active [data-direction="down"] { left: var(--sr-control-edge); top: 50%; }
.star-runner-page.game-mode-active [data-direction="left"] { right: var(--sr-control-edge); top: calc(50% - 60px); }
.star-runner-page.game-mode-active [data-direction="right"] { right: var(--sr-control-edge); top: 50%; }
.star-runner-page.game-mode-active .star-runner-pause { right: var(--sr-control-edge); top: calc(50% + 60px); }
@media (orientation: landscape) and (max-height: 600px) {
 .star-runner-page .star-runner-hud { gap: 4px; }
 .star-runner-page .star-runner-hud > * { min-width: 0; padding: 5px; font-size: .65rem; }
}

.star-runner-page .star-runner-controls button { border: 2px solid rgba(255,255,255,.4); border-radius: 10px; background: #11142d; color: #fff; padding: 0; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.star-runner-page .star-runner-control-icon { display: block; width: 22px; height: 22px; margin: auto; transform: rotate(var(--arrow-rotation,0deg)); }
.star-runner-page .star-runner-pause { border-color: var(--sr-cyan); background: #153953; }
.star-runner-page .start-play-symbol { width: 1.05em; height: 1.05em; }

/* HUD'en er kompakt; portrætrammen må ikke vokse med skjult spilindhold. */
.star-runner-page .star-runner-hud > span { padding: 3px 6px; min-height: 28px; }
.star-runner-page.game-mode-active .ninabella-game-page { grid-template-columns: minmax(0,1fr); }
.star-runner-page.game-mode-active .ninabella-game-layout,
.star-runner-page.game-mode-active .ninabella-game-panel { min-width: 0; width: 100%; max-width: 100%; }
@media (orientation: portrait) {
 .star-runner-page.game-mode-active .ninabella-game-content { visibility: hidden; }
 .star-runner-page.game-mode-active .game-rotate-notice { width: 100%; min-width: 0; }
 .star-runner-page.game-mode-active .game-rotate-notice span { max-width: 100%; overflow-wrap: anywhere; }
}


/* Lydknappen har sin egen plads ved spilstyringen. */
.star-runner-page .star-runner-controls .game-audio-button {
    position: static; width: 44px; height: 44px; min-height: 44px;
    padding: 10px; flex: 0 0 44px;
}
.star-runner-page.game-mode-active .star-runner-controls .game-audio-button {
    position: absolute; left: var(--sr-control-edge); right: auto; top: calc(50% + 60px);
}

.star-runner-page:not(.game-mode-active) .star-runner-redesign .star-runner-controls { display: flex; align-items: center; gap: 6px; }
.star-runner-page .uses-keyboard-controls .star-runner-controls [data-direction] { display: none; }

@media (orientation: landscape) and (max-height: 599px) {
    .star-runner-page.game-mode-active .star-runner-center { --sr-control-gap: 32px; }
}

/* Fast luft inden for spilrammen, også ved fuldskærm og rotation. */
.star-runner-page.game-mode-active .ninabella-game-panel { padding: 16px; }
.star-runner-page.game-mode-active .game-close-button { top: 18px; right: 18px; }

@media (orientation: landscape) and (max-height: 599px) {
    .star-runner-page.game-mode-active [data-direction="up"],
    .star-runner-page.game-mode-active [data-direction="left"] { top: var(--sr-control-row-1, calc(50% - 60px)); }
    .star-runner-page.game-mode-active [data-direction="down"],
    .star-runner-page.game-mode-active [data-direction="right"] { top: var(--sr-control-row-2, 50%); }
    .star-runner-page.game-mode-active .star-runner-pause,
    .star-runner-page.game-mode-active .star-runner-controls .game-audio-button { top: var(--sr-control-row-3, calc(50% + 60px)); }
}

/* Telefonlandskab: bevar luft til siderne, men brug højden til banen. */
@media (orientation: landscape) and (max-height: 599px) {
    .star-runner-page.game-mode-active .ninabella-game-panel { padding: 8px 16px; }
    .star-runner-page.game-mode-active .star-runner-center { gap: 4px; }
    .star-runner-page.game-mode-active .star-runner-hud > span { height: 20px; min-height: 20px; padding: 1px 4px; font-size: .6rem; line-height: 1; letter-spacing: .02em; }
    .star-runner-page.game-mode-active .game-close-button { top: 10px; }
}

/* Telefonlandskab: HUD'en går lodret langs venstre side, så labyrinten får hele højden. */
@media (orientation: landscape) and (max-height: 599px) {
    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-center {
        --sr-control-gap: 20px;
        --sr-control-space: 0px;
        --sr-board-size: min(100%, var(--sr-board-width, 100%));
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr) 44px;
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "hud board right";
        gap: var(--sr-control-gap);
    }

    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-hud {
        grid-area: hud;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-self: start;
        width: 80px;
        margin: 0;
        gap: 4px;
    }

    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-hud > span {
        min-height: 0;
        height: auto;
        padding: 2px 4px;
        font-size: .6rem;
        line-height: 1.15;
        letter-spacing: .02em;
        white-space: normal;
    }

    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-screen {
        grid-area: board;
        align-self: stretch;
        justify-self: center;
        width: var(--sr-board-size);
        max-height: 100%;
    }

    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) [data-direction="up"],
    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) [data-direction="down"],
    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-controls .game-audio-button {
        left: 36px;
        right: auto;
    }

    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) [data-direction="left"],
    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) [data-direction="right"],
    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-pause {
        right: 0;
        left: auto;
    }

    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-controls button,
    .star-runner-page.game-mode-active .star-runner-game:not(.uses-keyboard-controls) .star-runner-controls .game-audio-button {
        height: 40px;
        min-height: 40px;
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

/* Tabletlandskab: 10px ekstra lodret luft mellem knapperne. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1366px) and (min-height: 600px) {
    .star-runner-page.game-mode-active [data-direction="up"],
    .star-runner-page.game-mode-active [data-direction="left"] { top: calc(50% - 70px); }
    .star-runner-page.game-mode-active .star-runner-pause,
    .star-runner-page.game-mode-active .star-runner-controls .game-audio-button { top: calc(50% + 70px); }
}

/* Desktop med tastatur: lyd og pause ved HUD'en frigør siderne til banen. */
.star-runner-page.game-mode-active .uses-keyboard-controls .star-runner-center {
    --sr-control-space: 0px;
}
.star-runner-page.game-mode-active .uses-keyboard-controls .star-runner-hud {
    width: calc(100% - 180px);
    min-height: 44px;
}
.star-runner-page.game-mode-active .uses-keyboard-controls .star-runner-pause {
    top: 0; right: 60px;
}
.star-runner-page.game-mode-active .uses-keyboard-controls .star-runner-controls .game-audio-button {
    top: 0; left: auto; right: 120px;
}

/* Startvisningen skal også passe, før spiltilstand aktiveres. */
.star-runner-page:not(.game-mode-active) .star-runner-redesign .star-runner-hud {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, .9fr) auto;
}
.star-runner-page:not(.game-mode-active) .star-runner-hud > span { min-width: 0; white-space: normal; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .star-runner-page:not(.game-mode-active) .star-runner-layout { grid-template-columns: minmax(0, 1fr); }
    .star-runner-page:not(.game-mode-active) .star-runner-center { grid-row: 1; }
    .star-runner-page:not(.game-mode-active) .star-runner-guide { grid-row: 2; min-height: 0; }
}
@media (max-width: 600px) {
    .star-runner-page:not(.game-mode-active) .star-runner-redesign .star-runner-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .star-runner-page:not(.game-mode-active) .star-runner-reset-score { grid-column: 1 / -1; min-height: 36px; }
}

/* Egne SVG-ikoner til pause og fortsæt. */
.star-runner-page .star-runner-pause-icon {
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
}

/* Explicit SVG icons replace the old position-dependent guide drawings. */
.star-runner-page .guide-item .guide-icon.guide-svg-icon::before,
.star-runner-page .guide-item .guide-icon.guide-svg-icon::after { content:none; display:none; }
.star-runner-page .guide-icon.guide-svg-icon img { display:block; width:39px; height:39px; object-fit:contain; }