html,
body {
    font-family: Helvetica;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
    touch-action: none;
}

header,
footer {
    position: fixed;
    left: 0;
    width: 100%;
    background: #00000098;
    color: white;
    text-align: center;

    font-size: clamp(16px, 2.5vw, 24px);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

header {
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: #121212;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.logo img {
    height: 80px;
}

nav {
    position: absolute;
    right: 10px;
}

nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: #f0f0f0;
    font-weight: 600;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #00d1ff;
}

footer {
    bottom: 0;
    font-size: clamp(14px, 2vw, 20px);
}

footer a {
    color: #00d1ff;
}

/* GATE OVERLAY */
.blackout-overlay {
    position: fixed;
    inset: 0;
    background: black;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease;
    pointer-events: none;
}

.blackout-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/*.wheel {
    position: fixed;
    width: 100vmin;
    height: 100vmin;
    border-radius: 50%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: cyan;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: wheel-anim 2s ease-in-out infinite;
}*/
.wheel {
    position: fixed;
    width: 100vmin;
    height: 100vmin;
    border-radius: 50%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes wheel-anim {
    100% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    }

    50% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.8);
    }

    100% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    }
}

.bg-video {
    opacity: 1;
    width: 225vw;
}

.weapon {
    position: relative;
}

.cell {
    background: radial-gradient(circle at 30% 30%, #00ffc8b6, #180071b6);
    border-radius: 54% 46% 50% 50% / 46% 54% 50% 50%;
    animation: morphNormal 6s ease-in-out infinite alternate;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.7);
    transition: all 0.4s ease, animation 0.2s;
    position: relative;
    z-index: 2;
}


.cell:hover {
    background: radial-gradient(circle at 30% 30%, #00ffc8a6, #180071a6);
}

.cell:focus {}


.weapon:hover .cell {
    transform: scale(1.1);
    animation: morphBurst 0.6s ease-out;
}

.cell::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(rgba(0, 255, 255, 0.3), transparent 60%);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.weapon:hover .cell::after {
    animation: radiate 1s ease-out;
}

/* Normal gentle morph */
@keyframes morphNormal {
    0% {
        border-radius: 54% 46% 50% 50% / 46% 54% 50% 50%;
    }

    50% {
        border-radius: 56% 44% 52% 48% / 48% 52% 44% 56%;
    }

    100% {
        border-radius: 50% 57% 45% 48% / 53% 47% 52% 48%;
    }
}

/* Quick burst morph on hover */
@keyframes morphBurst {
    0% {
        border-radius: 54% 46% 50% 50% / 46% 54% 50% 50%;
    }

    25% {
        border-radius: 65% 35% 55% 45% / 45% 55% 35% 65%;
    }

    50% {
        border-radius: 45% 65% 40% 60% / 60% 40% 65% 35%;
    }

    75% {
        border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
    }

    100% {
        border-radius: 54% 46% 50% 50% / 46% 54% 50% 50%;
    }
}

@keyframes radiate {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
    }
}

.weapon {
    position: absolute;
    width: 30vmin;
    height: 30vmin;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    text-align: center;
    color: white;
    font-size: 2.5vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: transform 0.2s, background 0.2s;
    border: 2px solid transparent;
    user-select: none;
}

/*
.weapon.selected {
    border-color: cyan;
    background: #0a3d3d;
    transform: scale(1.2);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}*/

.weapon img {
    width: 100%;
    position: relative;
    z-index: 1001;
    pointer-events: none;
}

.center-circle {
    width: 25vmin;
    height: 25vmin;
    background: #4ed5e779;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 3vmin;
    position: absolute;
    left: calc(50% - 12.5vmin);
    top: calc(50% - 12.5vmin);
    border: 2px solid transparent;
    transition: transform 0.2s, background 0.2s;
    flex-direction: column;
    text-align: center;
    user-select: none;

}

.center-circle p {
    margin-top: 0;
    font-size: medium;
    font-weight: bold;
}

.center-circle.selected {
    border-color: cyan;
    background: rgba(0, 255, 255, 0.2);
    transform: scale(1.1);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.circle {
    --circle-size: 40px;
    position: fixed;
    height: var(--circle-size);
    width: var(--circle-size);
    border: 1px solid white;
    border-radius: 100%;
    top: calc(var(--circle-size) / 2 * -1);
    left: calc(var(--circle-size) / 2 * -1);
    pointer-events: none;
    z-index: 99999;
}

.sub-weapon {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ea3d76bf, #3800ffd6);
	box-shadow: 0 0 20px rgba(69, 17, 255, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	cursor: pointer;
	overflow: hidden;
	color: white;
	text-align: center;
	z-index: 10;
	font-weight: bold;
	font-size: 75%;
    animation: growshrink 1s ease-in-out infinite;
    transition: all 1s ease-in-out;
}

@keyframes growshrink {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
    }

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

.sub-weapon:hover {
  transform: scale(1.2);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.9);
}


@media (orientation: landscape) {

    /*.wheel {
        position: fixed;
        width: 80vmin;
        height: 80vmin;
        border-radius: 50%;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: center;
        align-items: center;
    }*/
    .wheel {
        position: fixed;
        width: 80vmin;
        height: 80vmin;
        border-radius: 50%;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bg-video {
        min-height: 100vh;
        opacity: 1;

    }

    .weapon {
        position: absolute;
        width: 16vmin;
        height: 16vmin;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        text-align: center;
        color: white;
        font-size: 2.5vmin;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: transform 0.2s, background 0.2s;
        border: 2px solid transparent;
        user-select: none;
    }
}