:root {
    --overlap: 140vh;
    --lock-top: -60vh;
    --bottom-safe: 60px;
    --menu-bottom-offset: 250px;
    --menu-bottom-release-delay: 0px;
    --menu-bottom-buttons-disabled-opacity: 0.35;
    --game-one-pin-height: 290vh;
    --black-hole-radius: 0vmax;
    --black-hole-mask-scale: 0.05;
    --black-hole-mask-scale-expanded: 2;
    --black-hole-backdrop-duration: 250ms;
    --black-hole-backdrop-delay: 2000ms;
    --preloader-track-width: clamp(95px, 15vw, 125px);
    --preloader-track-height: 65px;
    --preloader-progress: 0%;
}

@property --black-hole-radius {
    syntax: '<length>';
    inherits: false;
    initial-value: 0vmax;
}

:root.black-hole-open {
    --black-hole-mask-scale: var(--black-hole-mask-scale-expanded);
}

/* ===== Basis-Layout ===== */
.preloader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3980;
    pointer-events: none;
}

.preloader-bar {
    width: var(--preloader-track-width);
    height: var(--preloader-track-height);
    position: relative;
    overflow: hidden;
    background: transparent;
}

.preloader-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--preloader-progress);
    height: 100%;
    background: #ffffff;
}

.preloader.is-hidden {
    display: none;
}

.white-flash {
    position: fixed;
    inset: 0;
    z-index: 3975;
    pointer-events: none;
    background: #ffffff;
    display: none;
    opacity: 0;
}

.black-hole-open .white-flash {
    display: block;
    opacity: 1;
    animation: white-flash-fade 1200ms ease-out forwards;
}

@keyframes white-flash-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.content {
    position: relative;
    z-index: 1;
    padding-top: 60vh;
    max-width: 100%;
    box-sizing: border-box;
    isolation: isolate;
}

.content::after {
    content: "";
    display: block;
    height: var(--bottom-safe);
}

.content-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 0;
}

.game-two {
    margin-top: 0;
    padding-bottom: 0;
}

/* Bottom-Menü (fix) */
.menu-bottom {
    position: fixed;
    bottom: calc(-1 * var(--menu-bottom-offset));
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    pointer-events: none;
}

.menu-bottom.is-released {
    position: absolute;
    bottom: auto;
    left: 0;
}

.menu-bottom-inner {
    position: relative;
    width: 100%;
    pointer-events: auto;
}

.menu-bottom-spacer {
    height: 0;
    min-height: 0;
    pointer-events: none;
}

.menu-bg-bottom {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 8;
    transform: translateY(-100%);
    transition: transform 420ms cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    background: #d9d9d9;
    pointer-events: none;
}

.menu-overlay img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: auto;
}

.menu-open .menu-overlay {
    transform: translateY(0);
    pointer-events: auto;
}

.menu-open body {
    overflow: hidden;
}


.viewport-frame {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    display: block;
}

.viewport-frame-upper-left {
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/virtuatoys-prototype-black-border-upper-left.webp');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
}

.viewport-frame-upper-right {
    width: 100vw;
    height: 100vh;
    left: auto;
    right: 0;
    z-index: 4001;
    background-image: url('../assets/virtuatoys-prototype-black-border-upper-right.webp');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100% 100%;
}

.viewport-frame-lower-left {
    width: 100vw;
    height: 100vh;
    top: auto;
    bottom: 0;
    z-index: 4002;
    background-image: url('../assets/virtuatoys-prototype-black-border-lower-left.webp');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
}

.viewport-frame-lower-right {
    width: 100vw;
    height: 100vh;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    z-index: 4003;
    background-image: url('../assets/virtuatoys-prototype-black-border-lower-right.webp');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% 100%;
}

.menu-bottom .menu-btn {
    top: auto;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 26%;
    max-width: 200px;
    pointer-events: auto;
}

.menu-bottom .archive-btn {
    left: 6%;
    bottom: 8%;
}

.menu-bottom .more-btn {
    right: 8%;
    bottom: 75%;
}

/* Sichtbarkeiten */
.mobile-only {
    display: flex;
    flex-direction: column;
    background: #bfbfbf;
    min-height: 100svh;
    position: relative;
}

.desktop-only {
    display: none !important;
}

/* ===== Top-Menü + Buttons ===== */
.menu-top {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.menu-top .menu-bg {
    width: 100%;
    height: auto;
    display: block;
}

/* Button-Reset (iOS-freundlich) */
.menu-btn {
    position: absolute;
    top: 10px;
    display: block;

    /* für sauberes Skalieren */
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    z-index: 20;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    appearance: none;
    transform-origin: 50% 58%;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* Layer-Promotion gegen Flackern */
}

.menu-btn:focus {
    outline: none;
}

.menu-btn img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;

    /* Events landen sicher auf dem Button */
}

/* Positionen */
.archive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 8;
    transform: translateY(100%);
    transition: transform 420ms cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    background: transparent;
    padding: env(safe-area-inset-top, 0)
        env(safe-area-inset-left, 0)
        calc(80px + env(safe-area-inset-bottom, 0))
        env(safe-area-inset-right, 0);
    pointer-events: none;
}

.archive-overlay img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: auto;
}

.archive-open .archive-overlay {
    transform: translateY(0);
    pointer-events: auto;
}

.archive-open body {
    overflow: hidden;
}

.menu-top .burger-btn {
    left: 7%;
    top: 11%;
    width: 20%;
}

.menu-top .burger-btn .menu-icon {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transition: transform 240ms cubic-bezier(.25,.8,.25,1), opacity 240ms cubic-bezier(.25,.8,.25,1);
    opacity: 1;
}

.menu-top .burger-btn .menu-icon-close {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}

.menu-close-active .burger-btn .menu-icon-burger {
    transform: scale(0);
    opacity: 0;
}

.menu-close-active .burger-btn .menu-icon-close {
    transform: scale(1);
    opacity: 1;
}

.menu-bottom .archive-btn {
    position: absolute;
    left: 8%;
    bottom: 75%;
    width: 28%;
}

.menu-bottom .archive-icon {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transition: transform 240ms cubic-bezier(.25,.8,.25,1), opacity 240ms cubic-bezier(.25,.8,.25,1);
    opacity: 1;
    pointer-events: none;
}

.menu-bottom .archive-icon-close {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}

.archive-close-active .archive-btn .archive-icon-default {
    transform: scale(0);
    opacity: 0;
}

.archive-close-active .archive-btn .archive-icon-close {
    transform: scale(1);
    opacity: 1;
}

.menu-top .vt-btn {
    right: 6%;
    top: 15%;
    width: 16%;
}

@keyframes vt-gelatine{
    0% {
        transform: scale(1);
    }

    32% {
        transform: scale(0.50);
    }

    58% {
        transform: scale(1.20);
    }

    74% {
        transform: scale(0.80);
    }

    88% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Animation läuft auf dem BUTTON */
.menu-btn.play {
    animation: vt-gelatine 460ms cubic-bezier(.25,.8,.25,1) both;
    will-change: transform;
    backface-visibility: hidden;
}

/* Bild klickt nicht „dazwischen“ */
.menu-btn img {
    pointer-events: none;
}

/* WICHTIG: :active nur neutralisieren, WENN NICHT gespielt wird */
.js .menu-btn:not(.play):active,
.js .menu-btn:not(.play):active * {
    animation: none !important;
    transform: none !important;
}

/* Fallback NUR ohne JS (html startet mit class="no-js") */
.no-js .menu-btn:active {
    animation: vt-gelatine 460ms cubic-bezier(.25,.8,.25,1) both;
    transform-origin: 50% 58%;
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
    .menu-btn.play,
    .no-js .menu-btn:active {
        animation: none;
    }
}

/* ===== Seite / Hintergrund ===== */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #000000;
}

.full-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}

.full-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding-top: 1vh;
}

/* ===== Pin-Zone ===== */
.game-one-pin {
    position: relative;
    height: var(--game-one-pin-height);
}

.game-one-layer {
    position: sticky;
    top: var(--lock-top);
    width: 100%;
    z-index: 1;
}

.content-img.game-one {
    position: relative;
    z-index: 1;
}

.game-two-layer {
    position: relative;
    width: 100%;
    z-index: 1;
}

.read-more-btn-wrap {
    position: absolute;
    left: 50%;
    top: 61%;
    transform: translate(-50%, -50%);
    width: clamp(270px, 72vw, 390px);
    max-width: 240px;
    z-index: 2;
}

.read-more-btn {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    width: 100%;
    transform: translateZ(0);
}

.read-more-btn img {
    width: 100%;
    height: auto;
    display: block;
}

.game-two-layer .read-more-btn-wrap {
    top: 52%;
    transform: translate(-50%, -50%) rotate(-13deg);
}

/* Überlappung + Kompensation */
.over-content,
.game-two-section {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--overlap));
    margin-bottom: calc(-1 * var(--overlap));
    padding-bottom: var(--bottom-safe);
}

/* ===== Desktop optional ===== */
@media (min-width: 769px){
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }
}

/* =========================================================
   Gerätespezifische MQs – ABSICHTLICH AM ENDE (gewinnen)
   ========================================================= */
/* Galaxy S24 Ultra — Portrait (≈ 412 × 915 CSS-px) */
@media screen
  and (min-width: 400px) and (max-width: 420px)
  and (min-height: 900px) and (max-height: 940px)
  and (orientation: portrait){
    :root {
        --overlap: 140vh;
        --lock-top: -60vh;
        --bottom-safe: calc(60px + env(safe-area-inset-bottom));
    }

    @supports (height: 1svh){
        :root {
            --overlap: 140svh;
            --lock-top: -60svh;
            --game-one-pin-height: 290svh;
        }
    }
}
.black-whole-backdrop,
.black-whole {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 3990;
    pointer-events: none;
}

.black-whole-backdrop {
    z-index: 3970;
    background: #000;
    /* animation placeholder - re-enable later */
    /* animation: black-whole-backdrop-fade var(--black-hole-backdrop-duration) linear var(--black-hole-backdrop-delay) forwards; */
}
.black-hole-open .black-whole-backdrop {
    display: none;
}

.black-whole {
    display: flex;
    align-items: center;
    justify-content: center;
    /* animation: black-whole-reveal 1000ms linear 2000ms forwards; */
}

.black-whole svg {
    width: 100vw;
    height: 100vh;
    display: block;
}

.black-whole rect,
.black-whole path {
    pointer-events: none;
}










.black-hole-cutout {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: scale(var(--black-hole-mask-scale));
    transition: transform 1000ms cubic-bezier(0.5, 0, 1, 1);
    will-change: transform;
}