/* SPACE BOY */

.space-boy-root {
    min-height: 100%;
    background: #050508;
}

.space-boy-page {
    --speed-amber: #f0a54d;
    --speed-amber-soft: #ffd08e;
    --speed-line: rgba(240, 165, 77, .22);
    --speed-line-strong: rgba(240, 165, 77, .44);
    --speed-text: rgba(240, 235, 222, .92);
    --speed-muted: rgba(240, 235, 222, .68);
    --space-boy-route: #9cecff;
    --space-boy-route-glow: rgba(98, 217, 232, .48);
    --space-boy-route-soft: rgba(98, 217, 232, .22);
    --space-boy-line: rgba(156, 236, 255, .26);
    --space-boy-cell: rgba(7, 13, 20, .92);
    --space-boy-cell-active: rgba(14, 29, 38, .94);
    --space-boy-board-line: rgba(156, 236, 255, .34);
    --space-boy-board-fill: rgba(156, 236, 255, .09);
    --space-boy-board-glow: rgba(98, 217, 232, .09);
    --space-boy-region-glow: rgba(73, 174, 205, .11);
    --space-boy-rotation-ms: 140ms;
    min-height: 100svh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(98, 217, 232, .045), transparent 38%),
        linear-gradient(180deg, #05070b 0%, #070a11 56%, #040507 100%),
        #050508;
}

.space-boy-terminal-shell {
    width: min(900px, calc(100% - 24px));
    border: 0;
    outline: 0;
    box-shadow: none;
}

/* Gleiches Vollbildmuster wie der Speed-Memory-Ladescreen: Bildsequenzen
   und der Endabschluss stehen außerhalb der Astronautenbar-Systemhülle. */
.space-boy-image-mode .space-boy-header,
.space-boy-image-mode #space-boy-back-link,
.space-boy-image-mode .space-boy-hero,
.space-boy-image-mode .space-boy-play,
.space-boy-image-mode .space-boy-boardcomputer {
    display: none !important;
}

.space-boy-image-mode .space-boy-terminal-shell {
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
}

.space-boy-image-mode .space-boy-main {
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
    align-content: center;
}

.space-boy-image-mode .space-boy-story {
    min-height: 100svh;
    min-height: 100dvh;
}

.space-boy-image-mode .space-boy-story-image {
    width: min(92vw, 580px, calc((100dvh - 24px) / 1.5));
    height: min(calc(100dvh - 24px), calc(92vw * 1.5), 870px);
}

.space-boy-main {
    display: grid;
    gap: 0;
    padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom)));
}

.space-boy-hero {
    padding: 20px 0 0;
}

.space-boy-title {
    margin: 0;
    color: rgba(222, 250, 255, .96);
    font-size: clamp(1.48rem, 3.2vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: .08em;
    text-shadow:
        0 0 3px rgba(220, 250, 255, .72),
        0 0 8px rgba(98, 217, 232, .42),
        0 0 15px rgba(45, 145, 180, .22);
}

.space-boy-shell[data-level="1"][data-sector="1"] {
    --space-boy-route: #a5efff;
    --space-boy-route-glow: rgba(88, 210, 235, .5);
    --space-boy-cell: rgba(5, 15, 23, .94);
    --space-boy-cell-active: rgba(10, 32, 43, .95);
    --space-boy-board-line: rgba(138, 226, 246, .38);
    --space-boy-board-fill: rgba(68, 170, 198, .1);
    --space-boy-board-glow: rgba(73, 183, 211, .13);
    --space-boy-region-glow: rgba(61, 160, 194, .14);
}

.space-boy-shell[data-level="1"][data-sector="2"] {
    --space-boy-route: #d8bdff;
    --space-boy-route-glow: rgba(188, 125, 220, .48);
    --space-boy-cell: rgba(18, 9, 25, .94);
    --space-boy-cell-active: rgba(37, 18, 47, .95);
    --space-boy-board-line: rgba(211, 163, 238, .4);
    --space-boy-board-fill: rgba(164, 100, 190, .11);
    --space-boy-board-glow: rgba(182, 106, 213, .15);
    --space-boy-region-glow: rgba(150, 78, 177, .17);
}

/* Sektorpalette: fortlaufende, zurückhaltende Raumregionen. */
.space-boy-shell[data-level="2"][data-sector="1"] {
    --space-boy-route: #b9c9ff;
    --space-boy-route-glow: rgba(121, 137, 218, .47);
    --space-boy-cell: rgba(10, 13, 28, .94);
    --space-boy-cell-active: rgba(22, 28, 57, .95);
    --space-boy-board-line: rgba(158, 171, 236, .38);
    --space-boy-board-fill: rgba(105, 117, 193, .1);
    --space-boy-board-glow: rgba(112, 125, 204, .14);
    --space-boy-region-glow: rgba(89, 98, 177, .16);
}

.space-boy-shell[data-level="2"][data-sector="2"] {
    --space-boy-route: #b9ddbd;
    --space-boy-route-glow: rgba(105, 175, 119, .45);
    --space-boy-cell: rgba(9, 20, 15, .94);
    --space-boy-cell-active: rgba(22, 43, 29, .95);
    --space-boy-board-line: rgba(150, 205, 158, .37);
    --space-boy-board-fill: rgba(91, 155, 103, .1);
    --space-boy-board-glow: rgba(91, 165, 105, .13);
    --space-boy-region-glow: rgba(72, 145, 85, .15);
}

.space-boy-shell[data-level="3"][data-sector="1"] {
    --space-boy-route: #bdc7e8;
    --space-boy-route-glow: rgba(122, 139, 190, .43);
    --space-boy-cell: rgba(11, 13, 24, .94);
    --space-boy-cell-active: rgba(25, 30, 49, .95);
    --space-boy-board-line: rgba(158, 169, 213, .37);
    --space-boy-board-fill: rgba(102, 115, 171, .1);
    --space-boy-board-glow: rgba(100, 112, 169, .13);
    --space-boy-region-glow: rgba(79, 90, 152, .14);
}

.space-boy-shell[data-level="3"][data-sector="2"] {
    --space-boy-route: #c8b6d7;
    --space-boy-route-glow: rgba(151, 117, 169, .43);
    --space-boy-cell: rgba(18, 12, 23, .94);
    --space-boy-cell-active: rgba(39, 23, 45, .95);
    --space-boy-board-line: rgba(183, 151, 200, .36);
    --space-boy-board-fill: rgba(137, 94, 154, .1);
    --space-boy-board-glow: rgba(142, 96, 160, .13);
    --space-boy-region-glow: rgba(119, 75, 137, .15);
}

.space-boy-shell {
    width: 100%;
    color: rgba(232, 247, 250, .92);
}

.space-boy-play[hidden],
.space-boy-story[hidden],
.space-boy-end-screen[hidden],
.space-boy-highscores[hidden] {
    display: none;
}

.space-boy-story {
    display: grid;
    min-height: min(46rem, calc(100svh - 14rem));
    place-items: center;
}

/* Die während des Spiels aufrufbare Bestenliste bleibt kompakt. Results
   verwendet dagegen den umgebenden Vollbildmodus mit Textinhalt. */
.space-boy-shell[data-story-state="HIGHSCORES"] .space-boy-story {
    display: block;
    min-height: 0;
}

.space-boy-story-image {
    display: block;
    width: min(92vw, 30rem, calc((100svh - 14rem) / 1.5));
    height: min(calc(100svh - 14rem), calc(92vw * 1.5), 45rem);
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0;
    transform: translateY(4px) scale(1.01);
    transition: opacity .28s ease, transform .28s ease;
}

.space-boy-story-image[hidden] {
    display: none;
}

.space-boy-shell[data-story-state="TITLE"] .space-boy-story-image {
    width: min(92vw, 36.25rem, calc((100svh - 10rem) / 1.5));
    height: min(calc(100svh - 10rem), calc(92vw * 1.5), 54.375rem);
}

.space-boy-image-mode .space-boy-shell[data-story-state="TITLE"] .space-boy-story-image {
    width: min(92vw, 580px, calc((100dvh - 24px) / 1.5));
    height: min(calc(100dvh - 24px), calc(92vw * 1.5), 870px);
}

.space-boy-story.is-revealed .space-boy-story-image {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.space-boy-results,
.space-boy-highscores {
    width: 100%;
    color: rgba(232, 247, 250, .9);
    font-size: clamp(.78rem, 3.5vw, .95rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

.space-boy-end-screen {
    display: grid;
    gap: 18px;
    width: min(100%, 32rem);
    margin: 24px auto;
    padding: clamp(20px, 6vw, 32px);
    border: 1px solid rgba(98, 217, 232, .28);
    border-radius: 6px;
    background:
        radial-gradient(ellipse at 50% 5%, rgba(98, 217, 232, .11), transparent 58%),
        linear-gradient(180deg, rgba(8, 20, 29, .94), rgba(4, 7, 11, .97));
    box-shadow: inset 0 0 28px rgba(98, 217, 232, .07), 0 0 20px rgba(45, 145, 180, .11);
    animation: space-boy-end-screen-breathe 5.8s ease-in-out infinite;
}

.space-boy-image-mode .space-boy-shell[data-story-state="RESULTS"] .space-boy-story {
    display: grid;
    min-height: 100svh;
    min-height: 100dvh;
    place-items: center;
    padding: max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.space-boy-image-mode .space-boy-end-screen {
    gap: clamp(1.1rem, 3.4vh, 1.7rem);
    width: min(100%, 31rem);
    margin: 0;
    padding: clamp(1.35rem, 5vw, 2.25rem);
    border-color: rgba(178, 241, 255, .46);
    border-radius: 2px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(143, 231, 255, .15), transparent 48%),
        linear-gradient(180deg, rgba(7, 23, 34, .96), rgba(3, 7, 12, .985));
    box-shadow:
        inset 0 0 32px rgba(132, 227, 255, .1),
        inset 0 0 0 1px rgba(219, 252, 255, .05),
        0 0 10px rgba(115, 224, 255, .16),
        0 0 30px rgba(42, 137, 184, .13);
    animation: space-boy-results-arrive .72s ease-out both, space-boy-end-screen-breathe 6.8s ease-in-out .72s infinite;
}

.space-boy-end-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .2rem;
}

.space-boy-end-action {
    display: grid;
    place-items: center;
    min-height: 3rem;
    box-sizing: border-box;
    text-decoration: none;
}

.space-boy-results h2,
.space-boy-highscores h2,
.space-boy-play-highscores h2 {
    margin: 0 0 .9rem;
    color: rgba(191, 245, 255, .82);
    font: inherit;
    font-size: .82em;
    font-weight: 400;
    letter-spacing: .13em;
    text-shadow: 0 0 5px rgba(156, 236, 255, .34), 0 0 13px rgba(98, 217, 232, .2);
}

.space-boy-results .space-boy-results-title {
    margin-bottom: 1.35rem;
    color: rgba(230, 253, 255, .98);
    font-size: clamp(1.35rem, 6.4vw, 2.15rem);
    letter-spacing: .17em;
    text-align: center;
    text-shadow:
        0 0 3px rgba(245, 255, 255, .88),
        0 0 10px rgba(142, 231, 255, .68),
        0 0 24px rgba(61, 170, 218, .38);
}

.space-boy-results dl,
.space-boy-highscores ol {
    margin: 0;
    padding: 0;
}

.space-boy-results dl {
    display: grid;
    gap: .55rem;
}

.space-boy-results dl > div,
.space-boy-highscores li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: baseline;
}

.space-boy-results dt,
.space-boy-results dd {
    margin: 0;
}

.space-boy-results dt {
    color: rgba(156, 236, 255, .66);
    font: inherit;
    letter-spacing: .12em;
}

.space-boy-results dd {
    color: rgba(232, 247, 250, .94);
}

.space-boy-results .space-boy-result-total {
    margin: 0 0 .65rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid rgba(156, 236, 255, .32);
    color: var(--space-boy-route);
}

.space-boy-results .space-boy-result-total dd {
    color: var(--space-boy-route);
    font-size: 1.24em;
    text-shadow: 0 0 4px rgba(227, 252, 255, .76), 0 0 15px rgba(98, 217, 232, .5);
}

.space-boy-highscores ol {
    display: grid;
    gap: .55rem;
    list-style: none;
}

.space-boy-highscores li {
    grid-template-columns: 2ch 1fr auto;
    color: rgba(232, 247, 250, .88);
}

.space-boy-image-mode .space-boy-highscores h2 {
    margin-top: .15rem;
}

.space-boy-image-mode .space-boy-highscores li:first-child {
    color: rgba(235, 253, 255, .98);
    text-shadow: 0 0 4px rgba(223, 251, 255, .62), 0 0 12px rgba(98, 217, 232, .3);
}

.space-boy-highscore-rank,
.space-boy-highscore-date {
    color: rgba(156, 236, 255, .62);
}

.space-boy-highscore-empty {
    color: rgba(183, 165, 192, .66);
}

.space-boy-header {
    display: grid;
    gap: 7px;
    margin-bottom: 10px;
}

.space-boy-play {
    display: grid;
    justify-items: center;
    gap: 0;
    padding-top: 24px;
}

.space-boy-back {
    width: fit-content;
    color: rgba(183, 165, 192, .78);
    font-size: .7rem;
    line-height: 1.3;
    letter-spacing: .08em;
    text-decoration: none;
}

.space-boy-back:focus-visible,
.space-boy-control:focus-visible,
.space-boy-tile:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.space-boy-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.space-boy-title-row h1 {
    display: flex;
    align-items: baseline;
    gap: .55em;
    margin: 0;
    color: var(--space-boy-route);
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    line-height: 1;
    letter-spacing: .1em;
    text-shadow: 0 0 9px rgba(98, 217, 232, .26);
}

.space-boy-title-row h1 small {
    color: rgba(156, 236, 255, .62);
    font-size: .45em;
    letter-spacing: .14em;
}

.space-boy-timer {
    display: block;
    margin-bottom: 28px;
    color: rgba(232, 247, 250, .9);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.05rem, 5vw, 1.28rem);
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
}

.space-boy-status {
    min-height: 1.25em;
    color: rgba(156, 236, 255, .72);
    font-size: .72rem;
    line-height: 1.25;
    letter-spacing: .08em;
}

.space-boy-stage {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    width: min(100%, 34rem, calc((100svh - 3rem) * var(--space-boy-ratio)));
    min-width: 0;
    margin: 0;
    aspect-ratio: var(--space-boy-stage-ratio);
    background: radial-gradient(ellipse at 50% 47%, var(--space-boy-region-glow), transparent 68%);
}

.space-boy-shell[data-paused="true"] .space-boy-fighter span,
.space-boy-shell[data-paused="true"] .space-boy-asteroid-visual,
.space-boy-shell[data-paused="true"] .space-boy-card-background::before,
.space-boy-shell[data-paused="true"] .space-boy-guardian,
.space-boy-shell[data-paused="true"] .space-boy-launch-line,
.space-boy-shell[data-paused="true"] .space-boy-target-symbol {
    animation-play-state: paused;
}

.space-boy-board {
    position: absolute;
    z-index: 1;
    top: var(--space-boy-board-top);
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--space-boy-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--space-boy-rows), minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    height: var(--space-boy-board-height);
    padding: 2px;
    border: 1px solid var(--space-boy-board-line);
    background: var(--space-boy-board-fill);
    box-shadow: 0 0 16px var(--space-boy-board-glow);
}

.space-boy-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(156, 236, 255, .14);
    border-radius: 1px;
    background: var(--space-boy-cell);
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.space-boy-tile:active:not(:disabled) {
    background: transparent;
}

.space-boy-tile.is-occupied {
    border-color: rgba(117, 221, 234, .58);
    background: transparent;
    box-shadow: inset 0 0 10px rgba(98, 217, 232, .1);
}

.space-boy-route {
    position: absolute;
    inset: 0;
    transform: rotate(calc(var(--turns) * 90deg));
    transform-origin: 50% 50%;
    transition: transform var(--space-boy-rotation-ms) linear;
    will-change: transform;
    z-index: 1;
}

.space-boy-card-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    transform: rotate(calc(var(--turns) * 90deg));
    transform-origin: 50% 50%;
    transition: transform var(--space-boy-rotation-ms) linear;
    pointer-events: none;
}

.space-boy-card-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/programme/space-boy/cards/space-card-backgrounds.png");
    background-repeat: no-repeat;
    background-size: 558.35% 186.12%;
    background-position: var(--space-boy-card-background-x) 43.59%;
    opacity: .47;
    filter: saturate(.68) brightness(.7);
    transform: scale(1.06);
    transform-origin: 50% 50%;
    will-change: transform, filter;
    animation: space-boy-card-background-drift var(--space-boy-card-background-drift, 13s) ease-in-out infinite alternate both;
    animation-delay: var(--space-boy-card-background-delay, 0s);
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.space-boy-tile[data-card-background="0"] { --space-boy-card-background-x: 3.31%; --space-boy-card-background-drift: 13s; --space-boy-card-background-delay: -3s; }
.space-boy-tile[data-card-background="1"] { --space-boy-card-background-x: 26.69%; --space-boy-card-background-drift: 16s; --space-boy-card-background-delay: -9s; }
.space-boy-tile[data-card-background="2"] { --space-boy-card-background-x: 50.08%; --space-boy-card-background-drift: 14s; --space-boy-card-background-delay: -6s; }
.space-boy-tile[data-card-background="3"] { --space-boy-card-background-x: 73.47%; --space-boy-card-background-drift: 17s; --space-boy-card-background-delay: -12s; }
.space-boy-tile[data-card-background="4"] { --space-boy-card-background-x: 96.85%; --space-boy-card-background-drift: 15s; --space-boy-card-background-delay: -1s; }

@keyframes space-boy-card-background-drift {
    from { transform: scale(1.06) translate3d(-3%, -2%, 0); filter: saturate(.62) brightness(.66); }
    to { transform: scale(1.095) translate3d(3%, 2%, 0); filter: saturate(.74) brightness(.74); }
}

.space-boy-route::before,
.space-boy-route::after {
    content: "";
    position: absolute;
    background: var(--space-boy-route);
    box-shadow: 0 0 5px var(--space-boy-route-glow);
}

.space-boy-asteroids {
    position: absolute;
    z-index: 5;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.space-boy-guardian-layer {
    position: absolute;
    z-index: 6;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.space-boy-guardian {
    position: absolute;
    width: 40%;
    aspect-ratio: 1 / 2;
    background-image: url("/images/programme/space-boy/sprites/guardian-sprites.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 600% 100%;
    opacity: .96;
    transform: translate(-50%, -50%);
    transition: opacity 180ms linear;
    animation: space-boy-guardian-sprite 5.1s steps(1, end) infinite;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

@keyframes space-boy-guardian-sprite {
    0%, 16.65% { background-position: 0 0; }
    16.66%, 33.31% { background-position: 19.56% 0; }
    33.32%, 49.97% { background-position: 39.78% 0; }
    49.98%, 66.63% { background-position: 60.06% 0; }
    66.64%, 83.29% { background-position: 80.17% 0; }
    83.3%, 100% { background-position: 100% 0; }
}

.space-boy-guardian.is-moving {
    transition:
        top var(--guardian-move-ms, 640ms) ease-in-out,
        left var(--guardian-move-ms, 640ms) ease-in-out,
        opacity 180ms linear;
}

.space-boy-guardian.is-hidden {
    opacity: 0;
}

.space-boy-guardian.is-warning {
    opacity: .48;
    animation:
        space-boy-guardian-sprite 5.1s steps(1, end) infinite,
        space-boy-guardian-warning 180ms steps(2, end) infinite;
}

@keyframes space-boy-guardian-warning {
    50% { opacity: .22; filter: contrast(1.45); }
}

.space-boy-asteroid {
    position: absolute;
    width: 13.5%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.space-boy-asteroid-visual {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("/images/programme/space-boy/sprites/asteroid-sprites.png");
    background-repeat: no-repeat;
    background-position: var(--asteroid-sprite-position, 0) 0;
    background-size: 300% 100%;
    transform: rotate(var(--asteroid-spin-angle, 0deg));
    transform-origin: 50% 50%;
    animation: space-boy-asteroid-spin var(--asteroid-spin-duration, 6s) linear infinite;
    animation-direction: var(--asteroid-spin-direction, normal);
    will-change: transform;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

@keyframes space-boy-asteroid-spin {
    from {
        transform: rotate(var(--asteroid-spin-angle, 0deg));
    }

    to {
        /* 360deg ist dieselbe Transformmatrix wie 0deg. WebKit kann diese
           Endpunkte normalisieren und dann keine Rotation mehr interpolieren. */
        transform: rotate(calc(var(--asteroid-spin-angle, 0deg) + 359deg));
    }
}

.space-boy-tile[data-card-type="straight"] .space-boy-route::before {
    top: 0;
    bottom: 0;
    left: calc(50% - 2px);
    width: 4px;
}

.space-boy-tile[data-card-type="straight"] .space-boy-route::after {
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.space-boy-tile[data-card-type="curve"] .space-boy-route::before {
    top: 0;
    left: calc(50% - 2px);
    width: 4px;
    height: calc(50% + 2px);
}

.space-boy-tile[data-card-type="curve"] .space-boy-route::after {
    top: calc(50% - 2px);
    right: 0;
    width: calc(50% + 2px);
    height: 4px;
}

.space-boy-external {
    position: absolute;
    z-index: 3;
    color: rgba(255, 221, 139, .9);
    font-size: 1.8cqw;
    line-height: 1.1;
    letter-spacing: .06em;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(255, 190, 75, .4);
}

.space-boy-target {
    top: var(--space-boy-exit-y);
    left: var(--space-boy-exit-x);
    transform: translate(-50%, -50%);
}

.space-boy-target-symbol {
    display: block;
    width: 7.85cqw;
    aspect-ratio: 1774 / 5322;
    background-image: url("/images/programme/space-boy/sprites/goal-sprites.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 600% 100%;
    animation: space-boy-goal-sprite 2.7s steps(1, end) infinite;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.space-boy-target[data-sprite="mothership"] .space-boy-target-symbol {
    width: 13.3cqw;
    aspect-ratio: 1 / 2;
    background-image: url("/images/programme/space-boy/sprites/mothership-sprites.png");
    animation-name: space-boy-mothership-sprite;
    animation-duration: 4.8s;
}

.space-boy-target .space-boy-external-label {
    position: absolute;
    top: 5px;
    right: 12px;
    white-space: nowrap;
}

.space-boy-launch {
    top: var(--space-boy-entry-y);
    left: var(--space-boy-entry-x);
    transform: translate(-50%, -50%);
}

.space-boy-launch-line {
    display: block;
    width: 8.4cqw;
    aspect-ratio: 1 / 2;
    background-image: url("/images/programme/space-boy/sprites/start-sprites.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 300% 100%;
    transform: translateY(-32px);
    animation: space-boy-three-frame-sprite 2.1s steps(1, end) infinite;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.space-boy-launch .space-boy-external-label {
    position: absolute;
    top: 5px;
    left: 11px;
    white-space: nowrap;
}

.space-boy-target[data-side="left"] .space-boy-external-label,
.space-boy-launch[data-side="left"] .space-boy-external-label {
    right: auto;
    left: 11px;
}

.space-boy-target[data-side="right"] .space-boy-external-label,
.space-boy-launch[data-side="right"] .space-boy-external-label {
    right: 11px;
    left: auto;
}

.space-boy-target[data-side="top"] .space-boy-external-label {
    top: 11px;
}

.space-boy-launch[data-side="right"] .space-boy-launch-line,
.space-boy-launch[data-side="left"] .space-boy-launch-line {
    transform: rotate(90deg) translateY(-32px);
}

.space-boy-fighter {
    position: absolute;
    z-index: 4;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.space-boy-fighter[data-external-side="right"] {
    margin-left: 10px;
}

.space-boy-fighter[data-external-side="left"] {
    margin-left: -10px;
}

.space-boy-fighter[data-external-side="bottom"] {
    margin-top: 8px;
}

.space-boy-fighter[data-external-side="top"] {
    margin-top: -8px;
}

.space-boy-fighter span {
    display: block;
    width: 7.6cqw;
    aspect-ratio: 1;
    background-image: url("/images/programme/space-boy/sprites/fighter-sprites.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 300% 100%;
    transform: translate(-50%, -50%) rotate(var(--fighter-angle, 0deg));
    transform-origin: 50% 50%;
    animation: space-boy-fighter-sprite 360ms steps(1, end) infinite;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

@keyframes space-boy-three-frame-sprite {
    0%, 33.32% { background-position: 0 0; }
    33.33%, 66.65% { background-position: 50% 0; }
    66.66%, 100% { background-position: 100% 0; }
}

@keyframes space-boy-fighter-sprite {
    0%, 33.32% { background-position: 3.8% 0; }
    33.33%, 66.65% { background-position: 49.72% 0; }
    66.66%, 100% { background-position: 95.82% 0; }
}

@keyframes space-boy-goal-sprite {
    0%, 16.65% { background-position: 1.6% 0; }
    16.66%, 33.31% { background-position: 21.05% 0; }
    33.32%, 49.97% { background-position: 40.12% 0; }
    49.98%, 66.63% { background-position: 59.54% 0; }
    66.64%, 83.29% { background-position: 79.02% 0; }
    83.3%, 100% { background-position: 98.2% 0; }
}

@keyframes space-boy-mothership-sprite {
    0%, 16.65% { background-position: .28% 0; }
    16.66%, 33.31% { background-position: 19.92% 0; }
    33.32%, 49.97% { background-position: 39.72% 0; }
    49.98%, 66.63% { background-position: 60.03% 0; }
    66.64%, 83.29% { background-position: 80.14% 0; }
    83.3%, 100% { background-position: 99.72% 0; }
}

.space-boy-fighter.is-rotating-with-card span {
    transition: transform var(--space-boy-rotation-ms) linear;
}

.space-boy-shell[data-state="ready"] .space-boy-fighter {
    opacity: .78;
}

.space-boy-shell[data-state="success"] .space-boy-status {
    color: #ffe39a;
}

.space-boy-shell[data-state="waiting"] .space-boy-status {
    color: #ffe39a;
}

.space-boy-shell[data-state="waiting"] .space-boy-fighter {
    opacity: .9;
}

.space-boy-shell[data-state="captured"] .space-boy-status {
    color: #ffe39a;
}

.space-boy-shell[data-state="captured"] .space-boy-fighter {
    z-index: 7;
    opacity: .92;
}

.space-boy-shell[data-state="waiting"] .space-boy-tile.is-occupied {
    border-color: rgba(255, 227, 154, .78);
    box-shadow:
        inset 0 0 12px rgba(255, 190, 75, .16),
        0 0 7px rgba(255, 204, 92, .18);
}

.space-boy-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 34rem;
    margin: 32px auto 0;
}

.space-boy-control {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3rem;
    padding: 10px 8px;
    border: 1px solid var(--speed-line);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(28, 22, 16, .82), rgba(8, 9, 12, .92));
    color: var(--speed-amber-soft);
    font: inherit;
    font-size: var(--font-meta);
    letter-spacing: .06em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.space-boy-control[aria-pressed="true"] {
    border-color: rgba(240, 208, 142, .72);
    color: #fff0cf;
}

.space-boy-control-primary {
    color: #fff0cf;
    border-color: var(--speed-line-strong);
    background: linear-gradient(180deg, rgba(59, 34, 10, .96), rgba(16, 12, 10, .96));
    box-shadow: inset 0 0 0 1px rgba(255, 228, 199, .12);
}

.space-boy-control-primary.is-ready {
    animation: space-boy-ready-pulse 2.6s ease-in-out infinite;
}

@keyframes space-boy-ready-pulse {
    0%,
    100% {
        border-color: var(--speed-line-strong);
        box-shadow: 0 0 8px rgba(240, 165, 77, .06), inset 0 0 0 1px rgba(255, 228, 199, .07);
    }

    50% {
        border-color: rgba(240, 208, 142, .68);
        box-shadow: 0 0 18px rgba(240, 165, 77, .16), inset 0 0 0 1px rgba(255, 228, 199, .13);
    }
}

@keyframes space-boy-highscore-breathe {
    0%,
    100% { filter: brightness(.94); }
    50% { filter: brightness(1.08); }
}

@keyframes space-boy-end-screen-breathe {
    0%,
    100% { filter: brightness(.96); box-shadow: inset 0 0 28px rgba(98, 217, 232, .07), 0 0 20px rgba(45, 145, 180, .1); }
    50% { filter: brightness(1.06); box-shadow: inset 0 0 32px rgba(98, 217, 232, .11), 0 0 27px rgba(45, 145, 180, .16); }
}

@keyframes space-boy-results-arrive {
    from { opacity: .2; transform: translateY(8px); filter: brightness(.78); }
    to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

@keyframes space-boy-boardcomputer-message {
    0% { opacity: .1; transform: translateX(-8px); filter: brightness(.65); }
    32% { opacity: .88; transform: translateX(3px); filter: brightness(1.45); }
    100% { opacity: 1; transform: translateX(0); filter: brightness(1); }
}

@keyframes space-boy-boardcomputer-sector {
    0%,
    100% { filter: brightness(1); }
    30% { filter: brightness(1.16); }
    52% { filter: brightness(.97); }
}

.space-boy-control:hover,
.space-boy-control:focus-visible {
    border-color: rgba(240, 208, 142, .82);
    color: #fff7e2;
    box-shadow: 0 0 16px rgba(240, 165, 77, .12);
    outline: none;
}

.space-boy-play-highscores {
    display: grid;
    gap: 10px;
    width: min(100%, 34rem);
    margin: 18px auto 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(98, 217, 232, .15);
    animation: space-boy-highscore-breathe 5.6s ease-in-out infinite;
}

.space-boy-play-highscores[hidden] {
    display: none;
}

.space-boy-play-highscores ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.space-boy-play-highscores li {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    color: var(--speed-muted);
    font-size: var(--font-system);
    letter-spacing: .04em;
}

.space-boy-play-highscores h2,
.space-boy-play-highscores .space-boy-highscore-rank {
    color: var(--speed-amber-soft);
}

.space-boy-play-highscores .space-boy-highscore-time {
    color: #fff0cf;
    text-shadow: 0 0 5px rgba(255, 208, 142, .24), 0 0 12px rgba(240, 165, 77, .12);
}

.space-boy-play-highscores .space-boy-highscore-date {
    color: rgba(240, 208, 142, .58);
}

.space-boy-boardcomputer {
    width: 100%;
    margin: 46px 0 0;
    padding: 28px 30px 24px;
    color: var(--legal-system-narration);
}

.space-boy-boardcomputer > :not(.machine-ghost) {
    position: relative;
    z-index: 1;
}

.space-boy-boardcomputer-message {
    color: var(--legal-system-narration);
    font-size: var(--font-system);
    line-height: 1.9;
    letter-spacing: .035em;
    text-shadow: 0 0 3px rgba(255, 151, 221, .3), 0 0 9px rgba(255, 79, 216, .18);
}

.space-boy-boardcomputer-message.is-activity {
    animation: space-boy-boardcomputer-message .8s ease-out both;
}

.space-boy-boardcomputer.is-activity {
    animation: space-boy-boardcomputer-sector 1.2s ease-out both;
}

@media (min-width: 700px) {
    .space-boy-shell {
        padding-top: 24px;
    }

    .space-boy-tile:hover:not(:disabled) {
        border-color: rgba(156, 236, 255, .4);
    }
}

@media (max-width: 699px) {
    /* Kompakte, aber frei scrollbare Spielgruppe. Der Zustand hängt nur am
       Space-Boy-Root und berührt keine globale Viewport- oder CRT-Regel. */
    .space-boy-shell.is-gameplay-active .space-boy-play {
        position: relative;
        padding-top: 4px;
    }

    .space-boy-shell.is-gameplay-active .space-boy-play::before {
        content: "SPACE BOY";
        display: block;
        color: rgba(222, 250, 255, .82);
        font-size: .64rem;
        line-height: 1;
        letter-spacing: .14em;
        text-shadow: 0 0 6px rgba(98, 217, 232, .28);
    }

    .space-boy-shell.is-gameplay-active .space-boy-timer {
        margin: 4px 0 5px;
        font-size: 1rem;
    }

    .space-boy-shell.is-gameplay-active .space-boy-stage {
        width: min(
            100%,
            23.25rem,
            calc((100svh - 10rem) * var(--space-boy-ratio))
        );
        flex: 0 0 auto;
    }

    .space-boy-shell.is-gameplay-active .space-boy-controls {
        width: min(100%, 21rem);
        gap: 5px;
        margin: 6px auto 0;
    }

    .space-boy-shell.is-gameplay-active .space-boy-control {
        min-height: 2.75rem;
        padding: 7px 4px;
    }

    .space-boy-shell.is-gameplay-active .space-boy-play-highscores:not([hidden]) {
        position: absolute;
        z-index: 12;
        top: 56px;
        bottom: auto;
        height: min(36.3rem, calc(100dvh - 120px));
        width: min(calc(100vw - 16px), 21rem);
        margin: 0;
        padding: 12px;
        overflow: auto;
        border: 1px solid rgba(98, 217, 232, .32);
        border-radius: 4px;
        background: rgba(5, 10, 16, .96);
    }

    .space-boy-terminal-shell {
        width: calc(100% - 8px);
        padding-top: max(18px, env(safe-area-inset-top));
    }

    .space-boy-stage {
        width: min(
            100%,
            23.25rem,
            calc((100svh - 10rem) * var(--space-boy-ratio))
        );
    }

    .space-boy-play {
        padding-top: 20px;
    }

    .space-boy-timer {
        margin-bottom: 24px;
    }

    .space-boy-controls {
        gap: 7px;
        margin-top: 30px;
    }

    .space-boy-boardcomputer {
        margin-top: 38px;
        padding: 24px 14px 22px;
    }

    .space-boy-end-screen {
        margin: 12px auto 18px;
        padding: 20px;
    }

    .space-boy-image-mode .space-boy-end-screen {
        margin: 0;
        padding: clamp(1.2rem, 6vw, 1.7rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .space-boy-fighter span,
    .space-boy-asteroid-visual,
    .space-boy-guardian,
    .space-boy-launch-line,
    .space-boy-target-symbol {
        animation: none;
    }

    .space-boy-asteroid-visual {
        transform: rotate(var(--asteroid-spin-angle, 0deg));
    }

    .space-boy-story-image {
        transition-duration: .01ms;
    }

    .space-boy-route {
        transition-duration: 0ms;
    }

    .space-boy-card-background,
    .space-boy-card-background::before {
        animation: none;
        transition-duration: 0ms;
    }

    .space-boy-guardian,
    .space-boy-guardian.is-moving {
        transition-duration: 0ms;
    }

    .space-boy-guardian.is-warning {
        animation: none;
        opacity: .44;
    }

    .space-boy-control-primary.is-ready,
    .space-boy-play-highscores,
    .space-boy-end-screen,
    .space-boy-image-mode .space-boy-end-screen,
    .space-boy-boardcomputer-message.is-activity,
    .space-boy-boardcomputer.is-activity {
        animation: none;
        filter: none;
        transform: none;
    }
}