/* ─── Icon Layer Overlays ──────────────────────────────────────────────────── */

/*
 * Effect modifier system
 * ──────────────────────
 *
 * Position slot rules (.nlf-icon-layer--* .nlf-icon--*) define ONLY layout:
 *   top / bottom / left / right / width / perspective on the wrapper div.
 *
 * Visual effects are driven by CSS modifier classes emitted by the PHP
 * renderer (Variation1IconLayerRenderer) based on ACF True/False fields:
 *
 *   ACF field        PHP class added         Effect
 *   ─────────────── ─────────────────────── ─────────────────────────────────
 *   enable_3d=false  nlf-icon--rotate        2D rotate only (no perspective)
 *   enable_3d=true   nlf-icon--3d            Full 3D perspective + rotateXYZ
 *   blur_back_icon   nlf-icon--blur          filter: blur(4px) on back icon
 *   (back icon)      nlf-icon--back-3d       Always on back icons; 3D depth
 *
 * This means:
 *   • .nlf-icon--rotate img  → simple CSS rotate, no transform-style
 *   • .nlf-icon--3d img      → full rotateX/Y/Z per position (see below)
 *   • .nlf-icon--back-3d img → full rotateX/Y/Z per back position
 *   • .nlf-icon--blur img    → filter: blur(4px) — additive with any above
 *
 * Both .nlf-icon--3d and .nlf-icon--back-3d rules are position-specific
 * (scoped with the position class) so each slot keeps its own unique angle.
 */

:root {
    --nlf-container-width: 460px;
    --nlf-back-nudge-x: 16px;
    --nlf-back-nudge-y: -20px;
}

.game-icons-container {
    position: relative;
    max-width: 600px;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    padding-bottom: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nlf-icon-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nlf-icon-layer--back  { z-index: 1; }
.nlf-icon-layer--front { z-index: 2; }

/* ─── Individual icon wrappers ─────────────────────────────────────────────── */

.nlf-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base img — no transform. Effects are applied via modifier classes below. */
.nlf-icon img {
    width: 100%;
    height: auto;
    display: block;
}

/* ─── Variation-1 · Front-layer position slots (layout only) ───────────────── */

.nlf-icon-layer--front .nlf-icon--bottom-left {
    bottom: 7%;
    left: 53px;
    width: 120px;
    transform: translateX(-50%);
}

.nlf-icon-layer--front .nlf-icon--middle-left {
    top: 39%;
    left: 53px;
    width: 120px;
    transform: translate(-85%, -50%);
}

.nlf-icon-layer--front .nlf-icon--top-left {
    top: 4%;
    left: 70px;
    width: 120px;
    transform: translateX(-50%);
}

.nlf-icon-layer--front .nlf-icon--bottom-right {
    bottom: 7%;
    right: 105px;
    width: 120px;
    transform: translateX(100%);
}

.nlf-icon-layer--front .nlf-icon--middle-right {
    top: 39%;
    right: 21px;
    width: 120px;
    transform: translate(50%, -50%);
}

.nlf-icon-layer--front .nlf-icon--top-right {
    top: 6%;
    right: 45px;
    width: 120px;
    transform: translateX(50%);
}

/* ─── Variation-1 · Back-layer position slots (layout only) ────────────────── */

.nlf-icon-layer--back .nlf-icon--bottom-left {
    bottom: 2%;
    left: 152px;
    width: 120px;
    transform: translate(calc(-50% - var(--nlf-back-nudge-x)), var(--nlf-back-nudge-y));
}

.nlf-icon-layer--back .nlf-icon--middle-left {
    top: 52%;
    left: 18px;
    width: 120px;
    transform: translate(calc(-50% - var(--nlf-back-nudge-x)), calc(-50% + var(--nlf-back-nudge-y)));
}

.nlf-icon-layer--back .nlf-icon--top-left {
    top: 6%;
    left: 43px;
    width: 120px;
    transform: translate(calc(-50% - var(--nlf-back-nudge-x)), calc(var(--nlf-back-nudge-y) * -1));
}

.nlf-icon-layer--back .nlf-icon--bottom-right {
    bottom: 1%;
    right: 142px;
    width: 120px;
    transform: translate(calc(50% + var(--nlf-back-nudge-x)), var(--nlf-back-nudge-y));
}

.nlf-icon-layer--back .nlf-icon--middle-right {
    top: 50%;
    right: 24px;
    width: 120px;
    transform: translate(calc(50% + var(--nlf-back-nudge-x)), calc(-50% + var(--nlf-back-nudge-y)));
}

.nlf-icon-layer--back .nlf-icon--top-right {
    top: 0;
    right: 88px;
    width: 120px;
    transform: translate(calc(50% + var(--nlf-back-nudge-x)), calc(var(--nlf-back-nudge-y) * -1));
}

/* ═══════════════════════════════════════════════════════════════════════════
   EFFECT MODIFIERS
   Applied by Variation1IconLayerRenderer based on ACF fields.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── nlf-icon--rotate  (enable_3d = false on front icon) ──────────────────── */
/*
 * Simple 2D rotation — no perspective, no rotateX/Y.
 * Per-position angle chosen to match the visual intent of each slot.
 */

.nlf-icon-layer--front .nlf-icon--bottom-left.nlf-icon--rotate  img { rotate: -12deg; }
.nlf-icon-layer--front .nlf-icon--middle-left.nlf-icon--rotate  img { rotate: -8deg;  }
.nlf-icon-layer--front .nlf-icon--top-left.nlf-icon--rotate     img { rotate: 18deg;  }
.nlf-icon-layer--front .nlf-icon--bottom-right.nlf-icon--rotate img { rotate: 12deg;  }
.nlf-icon-layer--front .nlf-icon--middle-right.nlf-icon--rotate img { rotate: 8deg;   }
.nlf-icon-layer--front .nlf-icon--top-right.nlf-icon--rotate    img { rotate: 18deg;  }

/* ─── nlf-icon--3d  (enable_3d = true on front icon) ───────────────────────── */
/*
 * Full 3D transform per position — perspective on wrapper, rotateXYZ on img.
 * These are the exact transforms that were previously unconditional.
 */

/* Front · bottom-left · 3D */
.nlf-icon-layer--front .nlf-icon--bottom-left.nlf-icon--3d {
    perspective: 100px;
}
.nlf-icon-layer--front .nlf-icon--bottom-left.nlf-icon--3d img {
    transform: rotateX(49deg) rotateY(-8deg) rotateZ(48deg) rotate3d(-10, 6, 106, -4deg);
    transform-style: preserve-3d;
}

/* Front · middle-left · 3D */
.nlf-icon-layer--front .nlf-icon--middle-left.nlf-icon--3d {
    perspective: 80px;
}
.nlf-icon-layer--front .nlf-icon--middle-left.nlf-icon--3d img {
    transform: rotateX(10deg) rotateY(30deg) rotateZ(-4deg) rotate3d(-10, 6, 106, -4deg);
    border-radius: 5px;
    transform-style: preserve-3d;
}

/* Front · top-left · 3D (no extra perspective needed for this slot) */
.nlf-icon-layer--front .nlf-icon--top-left.nlf-icon--3d img {
    transform: rotateX(6deg) rotateY(14deg) rotateZ(18deg);
    transform-style: preserve-3d;
}

/* Front · bottom-right · 3D */
.nlf-icon-layer--front .nlf-icon--bottom-right.nlf-icon--3d {
    perspective: 100px;
}
.nlf-icon-layer--front .nlf-icon--bottom-right.nlf-icon--3d img {
    transform: rotateX(50deg) rotateY(4deg) rotateZ(-52deg) rotate3d(10, -6, 106, 4deg);
    border-radius: 5px;
    transform-style: preserve-3d;
}

/* Front · middle-right · 3D */
.nlf-icon-layer--front .nlf-icon--middle-right.nlf-icon--3d {
    perspective: 80px;
}
.nlf-icon-layer--front .nlf-icon--middle-right.nlf-icon--3d img {
    transform: rotateX(10deg) rotateY(-30deg) rotateZ(4deg) rotate3d(10, -6, 106, 4deg);
    transform-style: preserve-3d;
}

/* Front · top-right · 3D */
.nlf-icon-layer--front .nlf-icon--top-right.nlf-icon--3d img {
    transform: rotateX(6deg) rotateY(-14deg) rotateZ(18deg);
    transform-style: preserve-3d;
}

/* ─── nlf-icon--back-3d  (always on back icons) ─────────────────────────────── */
/*
 * Back icons always render with full 3D depth.
 * These are the exact per-position transforms that were previously unconditional.
 */

/* Back · bottom-left · 3D */
.nlf-icon-layer--back .nlf-icon--bottom-left.nlf-icon--back-3d {
    perspective: 100px;
}
.nlf-icon-layer--back .nlf-icon--bottom-left.nlf-icon--back-3d img {
    transform: rotateX(29deg) rotateY(-34deg) rotateZ(15deg) rotate3d(-10, 6, 106, -4deg);
    transform-style: preserve-3d;
    filter: brightness(0.7);
}

/* Back · middle-left · 3D */
.nlf-icon-layer--back .nlf-icon--middle-left.nlf-icon--back-3d {
    perspective: 80px;
}
.nlf-icon-layer--back .nlf-icon--middle-left.nlf-icon--back-3d img {
    transform: rotateX(10deg) rotateY(30deg) rotateZ(-4deg) rotate3d(-10, 6, 106, -4deg);
    border-radius: 5px;
    transform-style: preserve-3d;
    filter: brightness(0.9);
}

/* Back · top-left · 3D */
.nlf-icon-layer--back .nlf-icon--top-left.nlf-icon--back-3d {
    perspective: 100px;
}
.nlf-icon-layer--back .nlf-icon--top-left.nlf-icon--back-3d img {
    transform: rotateX(50deg) rotateY(17deg) rotateZ(-39deg) rotate3d(10, -6, 106, 4deg);
    border-radius: 5px;
    transform-style: preserve-3d;
    filter: brightness(0.9);
}

/* Back · bottom-right · 3D */
.nlf-icon-layer--back .nlf-icon--bottom-right.nlf-icon--back-3d {
    perspective: 100px;
}
.nlf-icon-layer--back .nlf-icon--bottom-right.nlf-icon--back-3d img {
    transform: rotateX(12deg) rotateY(42deg) rotateZ(10deg) rotate3d(10, -6, 106, 4deg);
    border-radius: 5px;
    transform-style: preserve-3d;
    filter: brightness(0.9);
}

/* Back · middle-right · 3D */
.nlf-icon-layer--back .nlf-icon--middle-right.nlf-icon--back-3d {
    perspective: 80px;
}
.nlf-icon-layer--back .nlf-icon--middle-right.nlf-icon--back-3d img {
    transform: rotateX(10deg) rotateY(-30deg) rotateZ(4deg) rotate3d(10, -6, 106, 4deg);
    transform-style: preserve-3d;
    filter: brightness(0.9);
}

/* Back · top-right · 3D */
.nlf-icon-layer--back .nlf-icon--top-right.nlf-icon--back-3d {
    perspective: 130px;
}
.nlf-icon-layer--back .nlf-icon--top-right.nlf-icon--back-3d img {
    transform: perspective(400px) rotateY(-23deg) rotateX(35deg) rotateZ(-11deg) rotate3d(126, 49, 55, -18deg);
    transform-style: preserve-3d;
    filter: brightness(0.9);
}

/* ─── nlf-icon--blur  (blur_back_icon = true on back icon) ─────────────────── */
/*
 * Additive blur on top of whatever transform is already applied.
 * Uses filter composition — brightness from nlf-icon--back-3d is preserved
 * because this selector targets the same img and CSS specificity ensures
 * both rules apply (blur overrides only filter, not transform).
 * We replicate the brightness to avoid losing it.
 */
.nlf-icon-layer--back .nlf-icon--bottom-left.nlf-icon--back-3d.nlf-icon--blur img  { filter: blur(1px) brightness(0.7); }
.nlf-icon-layer--back .nlf-icon--middle-left.nlf-icon--back-3d.nlf-icon--blur img  { filter: blur(1px) brightness(0.9); }
.nlf-icon-layer--back .nlf-icon--top-left.nlf-icon--back-3d.nlf-icon--blur img     { filter: blur(1px) brightness(0.9); }
.nlf-icon-layer--back .nlf-icon--bottom-right.nlf-icon--back-3d.nlf-icon--blur img { filter: blur(1px) brightness(0.9); }
.nlf-icon-layer--back .nlf-icon--middle-right.nlf-icon--back-3d.nlf-icon--blur img { filter: blur(1px) brightness(0.9); }
.nlf-icon-layer--back .nlf-icon--top-right.nlf-icon--back-3d.nlf-icon--blur img    { filter: blur(1px) brightness(0.9); }

/* Fallback for blur without back-3d (defensive) */
.nlf-icon--blur img { filter: blur(4px); }

/* ─── Floating-from-center animation ──────────────────────────────────────── */
/*
 * Icons start and end at their natural resting position (translate: 0 0),
 * so they are always correctly placed on load — no freeze or snap.
 * At 50% they drift outward in their slot direction, giving the impression
 * they are perpetually emerging from the centre of the container.
 *
 * All icons start together (no delay) with slightly varied durations
 * so they drift out of phase naturally over time without a staggered freeze.
 *
 * Standalone `translate` composes with — never overrides — the wrapper's
 * layout `transform` and the img's 3D `transform`.
 *
 * Back icons: amplitude ±8px  |  Front icons: amplitude ±4px
 */

/* — Back icons — */
@keyframes nlf-drift-back-top-left     { 0%, 100% { translate: 0 0; } 50% { translate: -6px -8px; } }
@keyframes nlf-drift-back-top-right    { 0%, 100% { translate: 0 0; } 50% { translate:  6px -8px; } }
@keyframes nlf-drift-back-middle-left  { 0%, 100% { translate: 0 0; } 50% { translate: -8px  0px; } }
@keyframes nlf-drift-back-middle-right { 0%, 100% { translate: 0 0; } 50% { translate:  8px  0px; } }
@keyframes nlf-drift-back-bottom-left  { 0%, 100% { translate: 0 0; } 50% { translate: -6px  8px; } }
@keyframes nlf-drift-back-bottom-right { 0%, 100% { translate: 0 0; } 50% { translate:  6px  8px; } }

/* — Front icons — */
@keyframes nlf-drift-front-top-left     { 0%, 100% { translate: 0 0; } 50% { translate: -3px -4px; } }
@keyframes nlf-drift-front-top-right    { 0%, 100% { translate: 0 0; } 50% { translate:  3px -4px; } }
@keyframes nlf-drift-front-middle-left  { 0%, 100% { translate: 0 0; } 50% { translate: -4px  0px; } }
@keyframes nlf-drift-front-middle-right { 0%, 100% { translate: 0 0; } 50% { translate:  4px  0px; } }
@keyframes nlf-drift-front-bottom-left  { 0%, 100% { translate: 0 0; } 50% { translate: -3px  4px; } }
@keyframes nlf-drift-front-bottom-right { 0%, 100% { translate: 0 0; } 50% { translate:  3px  4px; } }

.nlf-icon-layer--back .nlf-icon--top-left     { animation: nlf-drift-back-top-left     8.0s ease-in-out -1.6s infinite; }
.nlf-icon-layer--back .nlf-icon--top-right    { animation: nlf-drift-back-top-right    9.2s ease-in-out -4.8s infinite; }
.nlf-icon-layer--back .nlf-icon--middle-left  { animation: nlf-drift-back-middle-left  7.6s ease-in-out -2.9s infinite; }
.nlf-icon-layer--back .nlf-icon--middle-right { animation: nlf-drift-back-middle-right 8.8s ease-in-out -6.1s infinite; }
.nlf-icon-layer--back .nlf-icon--bottom-left  { animation: nlf-drift-back-bottom-left  7.2s ease-in-out -3.8s infinite; }
.nlf-icon-layer--back .nlf-icon--bottom-right { animation: nlf-drift-back-bottom-right 9.6s ease-in-out -5.4s infinite; }

.nlf-icon-layer--front .nlf-icon--top-left     { animation: nlf-drift-front-top-left     8.4s ease-in-out -0.8s infinite; }
.nlf-icon-layer--front .nlf-icon--top-right    { animation: nlf-drift-front-top-right    7.8s ease-in-out -5.2s infinite; }
.nlf-icon-layer--front .nlf-icon--middle-left  { animation: nlf-drift-front-middle-left  9.0s ease-in-out -3.3s infinite; }
.nlf-icon-layer--front .nlf-icon--middle-right { animation: nlf-drift-front-middle-right 8.2s ease-in-out -7.0s infinite; }
.nlf-icon-layer--front .nlf-icon--bottom-left  { animation: nlf-drift-front-bottom-left  7.4s ease-in-out -2.1s infinite; }
.nlf-icon-layer--front .nlf-icon--bottom-right { animation: nlf-drift-front-bottom-right 9.4s ease-in-out -4.4s infinite; }

@media (prefers-reduced-motion: reduce) {
    .nlf-icon-layer--back  .nlf-icon,
    .nlf-icon-layer--front .nlf-icon {
        animation: none;
    }
}

/* ─── Responsive adjustments ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --nlf-container-width: 420px;
        --nlf-back-nudge-x: 10px;
        --nlf-back-nudge-y: -14px;
    }

    .nlf-icon-layer--front .nlf-icon--bottom-left,
    .nlf-icon-layer--front .nlf-icon--middle-left,
    .nlf-icon-layer--front .nlf-icon--top-left,
    .nlf-icon-layer--front .nlf-icon--bottom-right,
    .nlf-icon-layer--front .nlf-icon--middle-right,
    .nlf-icon-layer--front .nlf-icon--top-right,
    .nlf-icon-layer--back .nlf-icon--bottom-left,
    .nlf-icon-layer--back .nlf-icon--middle-left,
    .nlf-icon-layer--back .nlf-icon--top-left,
    .nlf-icon-layer--back .nlf-icon--bottom-right,
    .nlf-icon-layer--back .nlf-icon--middle-right,
    .nlf-icon-layer--back .nlf-icon--top-right {
        width: 100px;
    }
}

@media (min-width: 426px) and (max-width: 767px) {
    .game-icons-container {
        margin: 0 auto;
        /*padding-bottom: 0;*/
    }
}

@media (min-width: 768px) {
    :root {
        --nlf-container-width: 500px;
    }

    .game-icons-container {
        position: relative;
        left: unset;
        top: unset;
        transform: none;
        width: 100%;
        max-width: 600px;
        /*min-height: 546px;*/
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        /*padding-bottom: 0;*/
    }

    /* nl-content back in normal flow — centered by parent flex */
    .game-icons-container .nl-content {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        z-index: 3;
    }

    .nlf-icon-layer {
        transform: translateY(90px);
    }


    /* Front — desktop position overrides */
    .nlf-icon-layer--front .nlf-icon--bottom-left  { bottom: 22%; left: -25px; transform: translateX(-50%); }
    .nlf-icon-layer--front .nlf-icon--middle-left  { top: 39%; left: 78px; transform: translate(-85%, -50%); }
    .nlf-icon-layer--front .nlf-icon--top-left     { top: -3%; left: 73px; transform: translateX(-50%); }
    .nlf-icon-layer--front .nlf-icon--top-right    { top: -4%; right: 37px; transform: translateX(50%); }
    .nlf-icon-layer--front .nlf-icon--middle-right { top: 39%; right: 38px; transform: translate(50%, -50%); }
    .nlf-icon-layer--front .nlf-icon--bottom-right { bottom: 23%; right: 42px; transform: translateX(100%); }

    /* Back — desktop position overrides */
    .nlf-icon-layer--back .nlf-icon--bottom-left  { bottom: 24%; left: 55px; }
    .nlf-icon-layer--back .nlf-icon--middle-left  { top: 38%; left: -4px; }
    .nlf-icon-layer--back .nlf-icon--top-left     { top: -8%; left: 30px; }
    .nlf-icon-layer--back .nlf-icon--top-right    { top: -8%; right: 130px; }
    .nlf-icon-layer--back .nlf-icon--middle-right { top: 37%; right: 7px; }
    .nlf-icon-layer--back .nlf-icon--bottom-right { bottom: 25%; right: 50px; }

    /* Desktop 3D img overrides — front */
    .nlf-icon-layer--front .nlf-icon--bottom-left.nlf-icon--3d  img { transform: rotateX(45deg) rotateY(-17deg) rotateZ(42deg) rotate3d(-10, 6, 106, -4deg); }
    .nlf-icon-layer--front .nlf-icon--middle-left.nlf-icon--3d  img { transform: rotateX(5deg)  rotateY(30deg)  rotateZ(3deg)  rotate3d(-10, 6, 106, -4deg); }
    .nlf-icon-layer--front .nlf-icon--middle-right.nlf-icon--3d img { transform: rotateX(5deg)  rotateY(-30deg) rotateZ(-3deg) rotate3d(10, -6, 106, 4deg); }
    .nlf-icon-layer--front .nlf-icon--bottom-right.nlf-icon--3d img { transform: rotateX(50deg) rotateY(17deg)  rotateZ(-39deg) rotate3d(10, -6, 106, 4deg); }

    /* Desktop 3D img overrides — back */
    .nlf-icon-layer--back .nlf-icon--bottom-left.nlf-icon--back-3d  img { transform: rotateX(45deg) rotateY(-22deg) rotateZ(42deg) rotate3d(-10, 6, 106, -4deg); filter: brightness(0.7); }
    .nlf-icon-layer--back .nlf-icon--middle-left.nlf-icon--back-3d  img { transform: rotateX(5deg)  rotateY(30deg)  rotateZ(-15deg) rotate3d(-10, 6, 106, -4deg); filter: brightness(0.9); }
    .nlf-icon-layer--back .nlf-icon--middle-right.nlf-icon--back-3d img { transform: rotateX(5deg)  rotateY(-30deg) rotateZ(-3deg) rotate3d(10, -6, 106, 4deg); filter: brightness(0.9); }
    .nlf-icon-layer--back .nlf-icon--bottom-right.nlf-icon--back-3d img { transform: rotateX(50deg) rotateY(17deg)  rotateZ(-39deg) rotate3d(10, -6, 106, 4deg); filter: brightness(0.9); }

    /* Desktop blur overrides — keep brightness correct */
    .nlf-icon-layer--back .nlf-icon--bottom-left.nlf-icon--back-3d.nlf-icon--blur  img { filter: blur(1px) brightness(0.7); }
    .nlf-icon-layer--back .nlf-icon--middle-left.nlf-icon--back-3d.nlf-icon--blur  img { filter: blur(1px) brightness(0.9); }
    .nlf-icon-layer--back .nlf-icon--top-left.nlf-icon--back-3d.nlf-icon--blur     img { filter: blur(1px) brightness(0.9); }
    .nlf-icon-layer--back .nlf-icon--bottom-right.nlf-icon--back-3d.nlf-icon--blur img { filter: blur(1px) brightness(0.9); }
    .nlf-icon-layer--back .nlf-icon--middle-right.nlf-icon--back-3d.nlf-icon--blur img { filter: blur(1px) brightness(0.9); }
    .nlf-icon-layer--back .nlf-icon--top-right.nlf-icon--back-3d.nlf-icon--blur    img { filter: blur(1px) brightness(0.9); }
}

@media (min-width: 1024px) {
    :root {
        --nlf-container-width: 500px;
    }
}

@media (min-width: 768px) {
    @supports (-moz-appearance: none) {
        .game-icons-container {
            max-height: 620px;
        }
    }
}