html, body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family: Arial, sans-serif;

    /* 🔥 FULL LOCK MOBILE */
    position: fixed;
    inset: 0;

    overscroll-behavior: none;
    touch-action: none;
}

/* gif tylko na body — na html i body naraz Chrome mobile
   przemalowywał dwie pełnoekranowe warstwy na każdą klatkę gifa */
html {
    background: #000;
}

/* 🔥 CENTROWANIE */
body {
    display: grid;
    place-items: center;

    /* 🔥 BACKGROUND IMAGE */
    background: black url("../img/back.gif") center center / cover no-repeat;
}

/* SCENA */
.scene {
    position: relative;
    width: min(90vmin, 600px);
    height: min(90vmin, 600px);

    display: grid;
    place-items: center;
}

/* ORBITA */
.orbit {
    position: absolute;
    width: 100%;
    height: 100%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    cursor: grab;
    touch-action: none;

    will-change: transform;
	
	pointer-events: auto;
}

.orbit:active {
    cursor: grabbing;
}

.ball {
    position: absolute;

    top: 50%;
    left: 50%;

    width: clamp(28px, 6.6vmin, 40px);
    height: clamp(28px, 6.6vmin, 40px);

    margin: calc(clamp(28px, 6.6vmin, 40px) / -2);

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #ffffff;

    font-size: clamp(9px, 3vmin, 18px);
    font-weight: bold;

    text-decoration: none;

    background: radial-gradient(circle at 30% 30%, #aef, #1aa, #003);

    box-shadow:
        0 0 10px #4ff,
        0 0 18px #0ff;

    text-shadow:
        0 0 6px rgba(229, 0, 129, 0.9),
        0 0 14px rgba(229, 0, 129, 0.6),
        0 0 28px rgba(229, 0, 129, 0.25);

    user-select: none;

    transition: none;
	
	line-height: 1;
    font-weight: 700;
}

@media (hover: hover) {
    .ball:hover {
        transform: scale(1.2);

        box-shadow:
            0 0 15px #fff,
            0 0 35px #0ff;

        text-shadow:
            0 0 10px #ff00ff,
            0 0 25px #ff00ff,
            0 0 40px rgba(255, 0, 255, 0.8);
    }
}

/* 🔥 puls */
@keyframes magentaPulse {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(255, 0, 255, 0.6),
            0 0 20px rgba(255, 0, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 18px rgba(255, 0, 255, 1),
            0 0 35px rgba(255, 0, 255, 0.6);
    }
}

/* ORBITA */
.ball:nth-child(1) { transform: rotate(0deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(2) { transform: rotate(40deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(3) { transform: rotate(80deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(4) { transform: rotate(120deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(5) { transform: rotate(160deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(6) { transform: rotate(200deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(7) { transform: rotate(240deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(8) { transform: rotate(280deg) translate(clamp(120px, 30vmin, 180px)); }
.ball:nth-child(9) { transform: rotate(320deg) translate(clamp(120px, 30vmin, 180px)); }

/* CENTRUM */
.center {
    position: absolute;
    width: clamp(120px, 35vmin, 240px);
    height: clamp(120px, 35vmin, 240px);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    overflow: hidden;

    box-shadow: 0 0 20px #0ff;

    pointer-events: none;
}

.center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ENTER */
.enter-ring {
    position: absolute;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 5;

    color: rgba(255, 255, 255, 0.9);

    font-size: clamp(18px, 4vmin, 44px);
    letter-spacing: 3px;

    text-decoration: none;

    font-family: ui-monospace, monospace;

    pointer-events: auto;

    transition: all 0.3s ease;

    text-shadow:
        0 0 8px rgba(255,255,255,0.4),
        0 0 14px rgba(255,255,255,0.2);
}

.enter-ring:hover {
    color: #fff;

    text-shadow:
        0 0 10px #ff0000,
        0 0 25px #ff0000,
        0 0 45px rgba(255,0,0,0.9);

    transform: scale(1.1);
}

/* FOOTER */
.footer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 10px;

    font-size: 10px;
    font-family: ui-monospace, monospace;

    color: rgba(255, 255, 255, 0.75);
	
	white-space: nowrap;

    pointer-events: none;

    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.9),
        0 0 14px rgba(255, 255, 255, 0.6),
        0 0 28px rgba(255, 255, 255, 0.25);
}

/*@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
    }
}*/

/* STARS */
#stars {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/* LOGO TOP */
.logo {
    position: fixed;
    left: 50%;
    top: 50%;

    transform: translate(-50%, calc(-50% - min(45vmin, 300px) - 2.5vmin));

    font-family: ui-monospace, monospace;
    font-size: clamp(26px, 4.0vmin, 36px);
    letter-spacing: 6px;

    color: rgba(255, 255, 255, 0.85);
	
	white-space: nowrap;

    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.6),
        0 0 28px rgba(255, 255, 255, 0.35);

    z-index: 1000;
    pointer-events: none;

    animation: logoPulse 3.5s ease-in-out infinite;
}

/* LOGO BOTTOM */
.logo-bottom {
    position: fixed;
    left: 50%;
    top: 50%;

    transform: translate(-50%, calc(-50% + min(45vmin, 300px) + 6vmin));

    font-family: ui-monospace, monospace;
    font-size: clamp(16px, 3vmin, 21px);
    letter-spacing: 6px;

    color: rgba(255, 255, 255, 0.75);
	

    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.6),
        0 0 28px rgba(255, 255, 255, 0.35);

    z-index: 1000;
    pointer-events: none;

    display: flex;
    gap: 0.5em;

    animation: logoPulse 3.5s ease-in-out infinite;
}

@media (max-width: 768px) {
    .logo-bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.4em;

        transform: translate(-50%, calc(-50% + min(50vmin, 320px) + 8vmin));
    }

    .logo-bottom span:nth-child(2) {
        opacity: 0.6;
        font-size: 0.85em;
    }
}

/* GLOW — puls na opacity zamiast text-shadow:
   opacity idzie przez kompozytor (GPU), text-shadow wymuszał
   repaint obu logo w każdej klatce na Chrome mobile */
@keyframes logoPulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}