.n1f-worlds {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1vw, 18px);
}

.n1f-world {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    border-radius: var(--n1f-panel-radius);
    border: 1px solid var(--n1f-border);
    background: #0a0a0d;
    isolation: isolate;
    box-shadow: 0 18px 45px rgba(0,0,0,0.38);
    transition: transform var(--n1f-transition), border-color var(--n1f-transition), box-shadow var(--n1f-transition);
}

.n1f-world:hover { transform: translateY(-3px) scale(1.004); }

.n1f-world-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /*filter: brightness(1) contrast(1.05) saturate(1.04);
    transition: transform 840ms cubic-bezier(.2,.8,.2,1), filter 840ms cubic-bezier(.2,.8,.2,1);*/
}

    /*.n1f-world:hover .n1f-world-bg {
    /*transform: scale(1.025);
    filter: brightness(1.06) contrast(1.08) saturate(1.08);
}*/

.n1f-world::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.08) 42%, rgba(0,0,0,0.48) 100%),
        radial-gradient(circle at 50% 74%, rgba(0,0,0,0.02), rgba(0,0,0,0.24) 82%);
    pointer-events: none;
}

.n1f-world::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%, rgba(0,0,0,0.12));
    pointer-events: none;
}

.n1f-world-brand {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(26px, 2vw, 42px) clamp(34px, 3vw, 62px);
}

.n1f-world-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    transform: translateY(-2px);
}

.n1f-world-copy strong {
    line-height: 0.95;
    text-transform: uppercase;
    font-weight: 900;
}

.n1f-world-copy em {
    font-style: normal;
    color: rgba(255,255,255,0.76);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: clamp(10px, 0.85vw, 16px);
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,0.86);
}

.n1f-world--electronic {
    border-color: rgba(143,92,255,0.42);
}

.n1f-world--electronic:hover {
    border-color: rgba(180,135,255,0.20);

    box-shadow:
        0 0 0 1px rgba(180,135,255,0.18),
        0 0 28px rgba(143,92,255,0.30),
        0 0 64px rgba(143,92,255,0.10),
        0 18px 45px rgba(0,0,0,0.44);
}

.n1f-world--electronic:hover .n1f-world-bg {
    animation:
        n1f-electronic-glitch-hover
        400ms
        steps(3, end)
        1;

    filter:
        brightness(1.04)
        contrast(1.08)
        saturate(1.08);
}

@keyframes n1f-electronic-glitch-hover {
    0%, 100% {
        transform: translate3d(0,0,0) scale(1.001);
    }

    18% {
        transform: translate3d(-1px,1px,0) scale(1.002);
    }

    32% {
        transform: translate3d(1px,-1px,0) scale(1.001);
    }

    46% {
        transform: translate3d(-1px,-1px,0) scale(1.003);
    }

    64% {
        transform: translate3d(1px,1px,0) scale(1.001);
    }
}

.n1f-world--electronic .n1f-world-copy strong {
    font-family: "N1F Orbitron", sans-serif;
    font-size: clamp(24px, 2.7vw, 54px);
    letter-spacing: 0.34em;
    color: #c9a7ff;

    text-shadow:
        0 0 8px rgba(255,255,255,0.28),
        0 0 22px rgba(143,92,255,0.82),
        0 0 44px rgba(143,92,255,0.34);
}

.n1f-world--electronic:hover .n1f-world-copy strong {
    color: #eee7ff;

    text-shadow:
        0 0 10px rgba(255,255,255,0.55),
        0 0 24px rgba(180,135,255,0.90),
        0 0 54px rgba(143,92,255,0.54),
        0 0 92px rgba(143,92,255,0.22);
}

.n1f-world--electronic .n1f-world-brand {
    overflow: hidden;
}

.n1f-electric-fx {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    filter: none;
    transition: opacity 720ms ease, filter 720ms ease;
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.n1f-electric-fx svg {
    width: 100%;
    height: 100%;
    display: block;
}

.n1f-world--electronic:hover .n1f-electric-fx {
    opacity: 1;
}

.electric-core-rings circle {
    fill: none;
    stroke: rgba(225,205,255,0.34);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-dasharray: 10 18 4 28 38 42;
    transform-origin: 836px 438px;
    filter:
        drop-shadow(0 0 6px rgba(255,255,255,0.28))
        drop-shadow(0 0 18px rgba(143,92,255,0.46))
        drop-shadow(0 0 36px rgba(143,92,255,0.16));
    animation:
        n1f-electric-ring-pulse 7600ms ease-out infinite,
        n1f-electric-ring-flow 12000ms linear infinite;
}

.electric-core-rings circle:nth-child(2) {
    opacity: 0.52;
    animation-delay: 360ms, 0ms;
}

.electric-core-rings circle:nth-child(3) {
    opacity: 0.34;
    animation-delay: 720ms, 0ms;
}

.electric-arcs {
    display: none;
}

.electric-core-dot {
    fill: rgba(255,255,255,0.13);
    filter:
        drop-shadow(0 0 12px rgba(255,255,255,0.40))
        drop-shadow(0 0 36px rgba(143,92,255,0.58))
        drop-shadow(0 0 90px rgba(143,92,255,0.24));
    transform-origin: 836px 438px;
    animation: n1f-electric-core-breathe 2800ms ease-in-out infinite;
}

.electric-dust {
    opacity: 1;
    transform-origin: 836px 438px;
    animation: n1f-electric-dust-drift 26000ms linear infinite;
}

.electric-dust circle {
    fill: rgba(245,238,255,0.55);
    animation: n1f-electric-dust-twinkle 7200ms ease-in-out infinite;
}

@keyframes n1f-electric-dust-drift {
    from {
        transform: translate3d(-18px, -26px, 0) rotate(-0.25deg);
    }

    to {
        transform: translate3d(24px, 48px, 0) rotate(0.45deg);
    }
}

.electric-dust circle:nth-child(2n) { animation-delay: 900ms; opacity: 0.55; }
.electric-dust circle:nth-child(3n) { animation-delay: 1800ms; opacity: 0.38; }
.electric-dust circle:nth-child(4n) { animation-delay: 2600ms; opacity: 0.68; }

@keyframes n1f-electric-ring-pulse {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }

    18% {
        opacity: 0.34;
    }

    54% {
        opacity: 0.16;
    }

    82% {
        opacity: 0.055;
    }

    100% {
        opacity: 0;
        transform: scale(3.05);
    }
}

@keyframes n1f-electric-ring-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -220; }
}

@keyframes n1f-electric-core-breathe {
    0%, 100% {
        opacity: 0.16;
        transform: scale(0.94);
    }

    48% {
        opacity: 0.38;
        transform: scale(1.08);
    }
}

@keyframes n1f-electric-dust-twinkle {
    0%, 100% {
        opacity: 0.14;
    }

    48% {
        opacity: 0.82;
    }

    64% {
        opacity: 0.34;
    }
}

.n1f-world--electronic .n1f-world-copy {
    position: relative;
    z-index: 3;
}



.n1f-world--rock {
    border-color: rgba(255,58,58,0.42);
}

.n1f-world--rock:hover {
    border-color: rgba(255,92,58,0.20);

    box-shadow:
        0 0 0 1px rgba(255,92,58,0.14),
        0 0 34px rgba(255,58,32,0.22),
        0 0 78px rgba(120,18,12,0.10),
        0 18px 45px rgba(0,0,0,0.44);
}

.n1f-world--rock:hover .n1f-world-bg {
    transform: scale(1.05);

    filter:
        brightness(1.015)
        contrast(1.03)
        saturate(1.01);
}

.n1f-rock-fx {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 520ms ease;
    will-change: opacity;
}

.n1f-rock-fx svg {
    width: 100%;
    height: 100%;
    display: block;
}

.n1f-world--rock:hover .n1f-rock-fx {
    opacity: 1;
}

.n1f-rock-vents {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 520ms ease;
}

.n1f-world--rock:hover .n1f-rock-vents {
    opacity: 1;
}

/* TESTBLOCK 

TESTBLOCK END */

.rock-shockwaves {
    mix-blend-mode: screen;
}

.rock-wave {
    fill: url(#rockShockwave);

    transform-origin: 870px 400px;

    opacity: 0;

    animation:
        n1f-rock-shockwave
        28800ms
        cubic-bezier(.16,.84,.24,1)
        infinite;
}

.rock-wave-2 {
    animation-delay: 14400ms;
}

.rock-wave-3 {
    animation-delay: 2880ms;
}

.rock-core-glow {
    fill: url(#rockCoreGlow);

    transform-origin: 870px 400px;

    opacity: 0.44;

    mix-blend-mode: screen;

    animation:
        n1f-rock-core-glow
        18200ms
        ease-in-out
        infinite;
}

@keyframes n1f-rock-shockwave {

    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    18% {
        opacity: 0.34;
    }

    58% {
        opacity: 0.12;
    }

    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@keyframes n1f-rock-core-glow {

    0%, 100% {
        opacity: 0.14;
        transform: scale(0.96);
    }

    42% {
        opacity: 0.34;
        transform: scale(1.04);
    }

    66% {
        opacity: 0.22;
        transform: scale(1.01);
    }
}

.rock-space-warp {
    mix-blend-mode: normal;
}

.rock-pressure-wave {
    opacity: 0;
    transform-origin: 850px 400px;

    animation:
        n1f-rock-pressure-warp
        28800ms
        cubic-bezier(.16,.84,.24,1)
        infinite;
}

.rock-pressure-wave-2 {
    animation-delay: 14400ms;
}

.rock-pressure-wave-3 {
    animation-delay: 28800ms;
}

.rock-pressure-mask {
    transform-origin: 850px 400px;

    animation:
        n1f-rock-pressure-mask
        48800ms
        cubic-bezier(.16,.84,.24,1)
        infinite;
}

.rock-pressure-mask-2 {
    animation-delay: 14400ms;
}

.rock-pressure-mask-3 {
    animation-delay: 28800ms;
}

@keyframes n1f-rock-pressure-warp {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 0.37;
    }

    48% {
        opacity: 0.07;
    }

    100% {
        opacity: 0;
    }
}

@keyframes n1f-rock-pressure-mask {
    0% {
        transform:
            scaleX(0.82)
            scaleY(0.80)
            rotate(-0.8deg);
    }
    
    48% {
        transform:
            scaleX(1.28)
            scaleY(1.26)
            rotate(0.5deg);
    }
    
    100% {
        transform:
            scaleX(1.72)
            scaleY(1.70)
            rotate(-0.3deg);
    }
}

.rock-thermal-vents {
    mix-blend-mode: screen;
}

.rock-vent {
    fill: rgba(255,102,54,0.76);
    opacity: 0;
    filter:
        drop-shadow(0 0 10px rgba(255,92,44,0.72))
        drop-shadow(0 0 26px rgba(255,32,16,0.42));

    transform-box: fill-box;
    transform-origin: center;

    animation:
        n1f-rock-vent-breathe
        24400ms
        cubic-bezier(.18,.82,.24,1)
        infinite;
}

.rock-vent-2 { animation-delay: 3200ms; }
.rock-vent-3 { animation-delay: 6900ms; }
.rock-vent-4 { animation-delay: 10800ms; }
.rock-vent-5 { animation-delay: 15400ms; }
.rock-vent-6 { animation-delay: 20100ms; }

@keyframes n1f-rock-vent-breathe {
    0%, 100% {
        opacity: 0;
        transform: scale(0.28);
    }

    15% {
        opacity: 0;
        transform: scale(0.28);
    }

    18% {
        opacity: 0.78;
        transform: scale(1.18);
    }

    22% {
        opacity: 0.46;
        transform: scale(0.82);
    }

    26% {
        opacity: 0.10;
        transform: scale(0.46);
    }

    31% {
        opacity: 0;
        transform: scale(0.22);
    }
}

.n1f-world--rock .n1f-world-copy strong {
    font-family: "N1F Bebas", "Arial Black", sans-serif;
    font-size: clamp(36px, 3.4vw, 70px);
    letter-spacing: 0.08em;
    color: #ff4747;

    text-shadow:
        3px 3px 0 rgba(0,0,0,0.70),
        0 0 16px rgba(255,40,40,0.54),
        0 0 34px rgba(120,18,12,0.34);
}

.n1f-world--rock:hover .n1f-world-copy strong {
    color: #ff6a4a;

    text-shadow:
        3px 3px 0 rgba(0,0,0,0.74),
        0 0 12px rgba(255,110,72,0.72),
        0 0 32px rgba(255,44,32,0.46),
        0 0 70px rgba(120,18,12,0.32);
}

.n1f-world--urban {
    border-color: rgba(88,232,255,0.42);
}

.n1f-world--urban:hover {
    border-color: rgba(120,245,255,0.20);

    box-shadow:
        0 0 0 1px rgba(120,245,255,0.16),
        0 0 28px rgba(88,232,255,0.28),
        0 0 64px rgba(88,232,255,0.10),
        0 18px 45px rgba(0,0,0,0.44);
}

.n1f-world--urban:hover .n1f-world-bg {
    animation:
        n1f-urban-pulse-hover
        4800ms
        cubic-bezier(.12,.24,.88,1.006)
        infinite;

    filter:
        brightness(1.03)
        contrast(1.04)
        saturate(1.04);
}

@keyframes n1f-urban-pulse-hover {
    0%, 100% {
        transform: scale(1.002);
    }

    42% {
        transform: scale(1.004);
    }

    68% {
        transform: scale(1.006);
    }
}
/*.n1f-world--urban .n1f-world-copy strong {
    font-family: "N1F Marker", "Arial Black", sans-serif;
    font-size: clamp(30px, 3vw, 62px);
    letter-spacing: 0.10em;
    color: #74f5ff;
    text-shadow: 0 0 12px rgba(39,215,255,0.76), 3px 3px 0 rgba(0,0,0,0.65);
}*/
.n1f-world--urban .n1f-world-copy strong {
    font-family: "N1F Marker", "Comic Sans MS", cursive;
    font-size: clamp(42px, 4.4vw, 82px);
    letter-spacing: 0.015em;

    color: #8ff6ff;

    text-shadow:
        2px 2px 0 rgba(0,0,0,0.72),
        0 0 10px rgba(88,232,255,0.42),
        0 0 24px rgba(88,232,255,0.20);
}

.n1f-world--urban:hover .n1f-world-copy strong {
    color: #b8fbff;

    text-shadow:
        2px 2px 0 rgba(0,0,0,0.78),
        0 0 8px rgba(120,245,255,0.54),
        0 0 20px rgba(88,232,255,0.28),
        0 0 38px rgba(18,80,120,0.18);
}


.n1f-urban-fx {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 620ms ease;
}

.n1f-world--urban:hover .n1f-urban-fx {
    opacity: 1;
}

.n1f-world--voice {
    border-color: rgba(255,211,106,0.42);
}

.n1f-world--voice:hover {
    border-color: rgba(255,226,150,0.20);

    box-shadow:
        0 0 0 1px rgba(255,226,150,0.16),
        0 0 28px rgba(255,211,106,0.28),
        0 0 64px rgba(255,176,58,0.10),
        0 18px 45px rgba(0,0,0,0.44);
}

.n1f-world--voice:hover .n1f-world-bg {
    animation:
        n1f-voice-elegant-hover
        24s
        ease-in-out
        infinite;

    filter:
        brightness(1.025)
        contrast(1.025)
        saturate(1.025);
}

@keyframes n1f-voice-elegant-hover {
    0%, 100% {
        transform: scale(1.003);
    }

    50% {
        transform: scale(1.014);
    }
}

.n1f-world--voice .n1f-world-copy strong {
    font-family: "N1F Cinzel", Georgia, serif;
    font-size: clamp(28px, 2.8vw, 56px);
    letter-spacing: 0.22em;
    color: #ffe0a0;

    text-shadow:
        0 0 10px rgba(255,230,170,0.46),
        0 0 26px rgba(255,190,70,0.52);
}

.n1f-world--voice:hover .n1f-world-copy strong {
    color: #fff0c8;

    text-shadow:
        0 0 8px rgba(255,240,200,0.58),
        0 0 22px rgba(255,210,120,0.34),
        0 0 42px rgba(255,176,58,0.18);
}

.n1f-voice-fx {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 620ms ease;
}

.n1f-world--voice:hover .n1f-voice-fx {
    opacity: 1;
}

.n1f-persona-logo {
    max-width: 520px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;

    filter:
        drop-shadow(0 0 18px rgba(var(--world-accent-rgb), 0.18))
        drop-shadow(0 0 42px rgba(var(--world-accent-rgb), 0.08));
}

.n1f-persona-wordmark {
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 0.9;

    color: var(--world-accent);

    text-shadow:
        0 0 12px rgba(var(--world-accent-rgb), 0.35),
        0 0 32px rgba(var(--world-accent-rgb), 0.15);
}

.n1f-persona-hero {
    position: relative;

    width: min(1120px, calc(100vw - 80px));
    margin: 120px auto 80px;

    padding: 72px;

    border-radius: 36px;

    background:
        linear-gradient(
            180deg,
            rgba(5,5,10,0.92),
            rgba(2,2,6,0.96)
        );

    border: 1px solid rgba(var(--world-accent-rgb), 0.14);

    box-shadow:
        0 0 40px rgba(var(--world-accent-rgb), 0.08);
}

.n1f-persona-claim {
    margin-top: 28px;

    font-size: 1.4rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--n1f-text);
    opacity: 0.86;
}

.n1f-persona-description {
    margin-top: 26px;

    max-width: 760px;

    line-height: 1.8;

    color: var(--n1f-soft-text);
}

.n1f-persona-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 34px;
}

.n1f-persona-tags span {
    padding: 10px 18px;

    border-radius: 999px;

    border: 1px solid rgba(var(--world-accent-rgb), 0.18);

    background:
        rgba(var(--world-accent-rgb), 0.08);

    color: var(--world-accent);

    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.n1f-persona-releases {
    width: min(1120px, calc(100vw - 80px));

    margin: 0 auto 140px;
}

.n1f-release-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 28px;

    margin-top: 42px;
}

.n1f-release-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(5,5,10,0.94),
            rgba(2,2,6,0.96)
        );

    border: 1px solid rgba(var(--world-accent-rgb), 0.10);

    text-decoration: none;

    transition:
        transform 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.n1f-release-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(var(--world-accent-rgb), 0.24);

    box-shadow:
        0 0 32px rgba(var(--world-accent-rgb), 0.12);
}

.n1f-release-card-cover img {
    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    display: block;
}

.n1f-release-card-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 22px;
}

.n1f-release-card-meta small {
    color: var(--n1f-soft-text);

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.n1f-release-card-meta strong {
    color: var(--n1f-text);

    font-size: 1.4rem;
}

.n1f-release-bubble {
    position: absolute;
    left: calc(100% + 18px);
    top: 50%;
    bottom: auto;

    width: max-content;
    min-width: 300px;
    max-width: 420px;
    min-height: 190px;
    max-height: none;

    padding: 18px 20px;

    transform:
        translateY(-50%)
        translateX(-10px)
        scale(0.96);

    opacity: 0;
    pointer-events: none;

    z-index: 50;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(8,8,14,0.98),
            rgba(2,2,6,0.99)
        );

    border: 1px solid rgba(var(--world-accent-rgb),0.26);

    box-shadow:
        0 0 28px rgba(var(--world-accent-rgb),0.18),
        0 18px 44px rgba(0,0,0,0.58);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

body[data-world="rock"] .n1f-release-bubble::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.025),
            transparent 18%,
            transparent 78%,
            rgba(0,0,0,0.34)
        );

    opacity: 0.9;
}

.n1f-release-bubble::after {
    content: "";
    position: absolute;
    right: 100%;
    top: 54%;

    width: 18px;
    height: 18px;

    transform:
        translate(50%, -54%)
        rotate(45deg);

    background: rgba(4,4,8,0.98);

    border-left: 1px solid rgba(var(--world-accent-rgb),0.20);
    border-bottom: 1px solid rgba(var(--world-accent-rgb),0.20);
}

.n1f-release-marquee-item:hover .n1f-release-bubble {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);
}

.n1f-release-bubble small,
.n1f-release-bubble em {
    display: block;

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

    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-style: normal;
}

.n1f-release-bubble strong {
    display: block;

    margin: 8px 0 10px;

    color: var(--world-accent);

    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
}

.n1f-release-bubble-tracks {
    display: block;

    columns: 2;
    column-gap: 26px;

    margin-top: 12px;

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

    font-size: 9px;
    line-height: 1.35;
}

.n1f-release-bubble-tracks span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.n1f-release-bubble-tracks span {
    display: block;

    break-inside: avoid;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.n1f-release-marquee {
    display: flex;
    gap: 26px;
    overflow: visible;
    width: max-content;

    animation:
        n1f-release-marquee
        42s
        linear
        infinite;
}

.n1f-release-marquee-clip {
    overflow: visible;
    padding: 40px 0;
}

.n1f-release-showroom-box:hover .n1f-release-marquee {
    animation-play-state: paused;
}

@keyframes n1f-release-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.n1f-release-marquee-item {
    position: relative;
    overflow: visible;
    flex: 0 0 180px;

    width: 180px;
    height: 180px;

    border-radius: 22px;

    color: inherit;
    text-decoration: none;

    z-index: 1;
}

.n1f-release-marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: inherit;

    border: 1px solid rgba(var(--world-accent-rgb),0.14);

    box-shadow:
        0 14px 38px rgba(0,0,0,0.42);

    transition:
        transform 220ms ease,
        filter 220ms ease,
        box-shadow 220ms ease;
}

.n1f-release-marquee-item:hover {
    z-index: 8;
}

.n1f-release-marquee-item:hover img {
    transform: scale(1.06);
    filter: brightness(1.08) contrast(1.08);

    box-shadow:
        0 0 28px rgba(var(--world-accent-rgb),0.22),
        0 20px 54px rgba(0,0,0,0.52);
}

.n1f-release-showroom {
    width: min(1180px, calc(100vw - 80px));
    margin: 0 auto 90px;
}

.n1f-release-showroom-box {
    position: relative;

    overflow: hidden;

    min-height: 260px;

    padding: 34px 0;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(5,5,10,0.82),
            rgba(2,2,6,0.94)
        );

    border: 1px solid rgba(var(--world-accent-rgb),0.14);

    box-shadow:
        inset 0 0 60px rgba(var(--world-accent-rgb),0.045),
        0 22px 70px rgba(0,0,0,0.42);
}

.n1f-release-showroom-box::before,
.n1f-release-showroom-box::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    width: 120px;

    z-index: 3;
    pointer-events: none;
}

.n1f-release-showroom-box::before {
    left: 0;
    background: linear-gradient(90deg, rgba(2,2,6,1), transparent);
}

.n1f-release-showroom-box::after {
    right: 0;
    background: linear-gradient(270deg, rgba(2,2,6,1), transparent);
}

body[data-world="rock"] .n1f-release-bubble {
    border-radius: 6px !important;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(16,10,10,0.98),
            rgba(3,2,2,1)
        ) !important;

    border:
        1px solid rgba(255,71,71,0.42) !important;
    
    border-left:
        3px solid rgba(255,71,71,0.45) !important;

    box-shadow:
        -10px 0 0 rgba(255,71,71,0.10),
        18px 0 44px rgba(255,71,71,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.035),
        inset 0 -22px 44px rgba(120,0,0,0.16),
        0 22px 54px rgba(0,0,0,0.72) !important;
}

body[data-world="rock"] .n1f-release-bubble::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.02) 0%,
            transparent 18%,
            transparent 82%,
            rgba(255,255,255,0.015) 100%
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 38px,
            rgba(255,71,71,0.018) 39px,
            transparent 40px
        );

    opacity: 0.55;

    mix-blend-mode: screen;
}

body[data-world="rock"] .n1f-release-bubble::after {
    background: rgba(12,4,4,1) !important;

    border-left:
        1px solid rgba(255,71,71,0.42) !important;

    border-bottom:
        1px solid rgba(255,71,71,0.42) !important;
}

/**body[data-world="rock"] .n1f-release-bubble {
    background: red !important;
    border: 6px solid lime !important;
    border-radius: 0 !important;
}**/

body[data-world="electronic"] .n1f-release-bubble {
    border-radius: 20px;

    backdrop-filter: blur(18px);

    background:
        linear-gradient(
            180deg,
            rgba(10,12,22,0.78),
            rgba(4,4,10,0.92)
        );

    border:
        1px solid rgba(140,90,255,0.34);

    box-shadow:
        0 0 32px rgba(140,90,255,0.22),
        0 0 90px rgba(140,90,255,0.08);
}

body[data-world="electronic"] .n1f-release-bubble::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.018) 0px,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 4px
        );

    pointer-events: none;

    opacity: 0.45;
}

body[data-world="urban"] .n1f-release-bubble {
    border-radius: 10px 24px 10px 24px;

    background:
        linear-gradient(
            180deg,
            rgba(6,14,18,0.92),
            rgba(3,6,10,0.98)
        );

    border:
        1px solid rgba(80,220,255,0.22);

    box-shadow:
        0 0 20px rgba(80,220,255,0.12);
}

body[data-world="voice"] .n1f-release-bubble {
    border-radius: 28px;

    background:
        radial-gradient(
            circle at top,
            rgba(255,245,220,0.08),
            rgba(10,8,6,0.96)
        );

    border:
        1px solid rgba(255,220,140,0.18);

    box-shadow:
        0 0 24px rgba(255,220,140,0.10);
}

.n1f-release-marquee-track {
    display: flex;
    gap: 28px;

    width: max-content;

    animation:
        n1fMarqueeScroll 38s linear infinite;
}

.n1f-release-showroom:hover .n1f-release-marquee-track {
    animation-play-state: paused;
}

@keyframes n1fMarqueeScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-35%);
    }
}

body[data-world="rock"] .n1f-release-marquee-item img {
    transform: rotate(-0.7deg);

    transition:
        transform 240ms ease,
        box-shadow 240ms ease;
}

body[data-world="rock"] .n1f-release-marquee-item:hover img {
    transform:
        scale(1.02)
        rotate(0.4deg);
}