/* =========================================================
   SHOGUN SLOT GENERATOR
   BLACK • CRIMSON • GOLD • EMBER
   ========================================================= */

#SLOT-widget {
    position: relative;
    max-width: 520px;
    margin: 30px auto;
    padding: 25px 22px 20px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    font-family: "Poppins", "Segoe UI", sans-serif;

    clip-path: polygon(
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px),
        0 18px
    );

    background:
        radial-gradient(circle at 50% -10%, rgba(255, 63, 14, .26), transparent 38%),
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .015) 0,
            rgba(255, 255, 255, .015) 1px,
            transparent 1px,
            transparent 10px
        ),
        linear-gradient(
            160deg,
            #250708 0%,
            #110709 48%,
            #050507 100%
        );

    border: 1px solid rgba(255, 92, 28, .78);

    box-shadow:
        0 24px 50px rgba(0, 0, 0, .58),
        0 0 0 1px rgba(255, 185, 50, .08),
        0 0 22px rgba(255, 42, 0, .26),
        0 0 48px rgba(120, 0, 0, .15),
        inset 0 0 28px rgba(255, 0, 0, .04);

    animation:
        SLOTmachineAura 4s ease-in-out infinite;
}


/* TOP BLADE */

#SLOT-widget::before {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 86%;
    height: 2px;
    z-index: 20;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff3215,
            #ffae20,
            #fff0a0,
            #ffae20,
            #ff3215,
            transparent
        );

    box-shadow:
        0 0 7px #ff4815,
        0 0 15px rgba(255, 135, 0, .5);

    animation:
        SLOTbladeGlow 2.8s ease-in-out infinite;
}


/* HUD GRID */

#SLOT-widget::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            rgba(255, 255, 255, .015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .015) 1px,
            transparent 1px
        );

    background-size:
        29px 29px;

    opacity: .42;
}


/* =========================================================
   HEADER
   ========================================================= */

.SLOT-head {
    position: relative;
    z-index: 10;
    text-align: center;
}


.SLOT-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 15px;

    color: #fff7e8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;

    clip-path: polygon(
        9px 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% calc(100% - 9px),
        calc(100% - 9px) 100%,
        9px 100%,
        0 calc(100% - 9px),
        0 9px
    );

    background:
        linear-gradient(
            145deg,
            #ff4118,
            #bc1000 55%,
            #570500
        );

    border:
        1px solid rgba(255, 184, 61, .75);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 5px 12px rgba(0, 0, 0, .3),
        0 0 15px rgba(255, 43, 0, .25);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .8);
}


.SLOT-badge span {
    color: #ffd34e;

    text-shadow:
        0 0 5px #ff9c15,
        0 0 9px rgba(255, 43, 0, .7);

    animation:
        SLOTbadgeSymbol 1.6s ease-in-out infinite;
}


.SLOT-title {
    margin: 14px 0 7px;

    color: #fff;

    font-size: 22px;
    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, .9),
        0 0 8px rgba(255, 67, 21, .45),
        0 0 18px rgba(255, 34, 0, .12);
}


.SLOT-sub {
    max-width: 410px;

    margin:
        0 auto 17px;

    color:
        rgba(255, 237, 224, .66);

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   SYSTEM BAR
   ========================================================= */

.SLOT-system {
    position: relative;
    z-index: 10;

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

    gap: 8px;

    margin-bottom: 12px;

    padding:
        7px 10px;

    clip-path: polygon(
        7px 0,
        calc(100% - 7px) 0,
        100% 7px,
        100% calc(100% - 7px),
        calc(100% - 7px) 100%,
        7px 100%,
        0 calc(100% - 7px),
        0 7px
    );

    background:
        linear-gradient(
            145deg,
            rgba(31, 12, 13, .96),
            rgba(8, 8, 10, .99)
        );

    border:
        1px solid rgba(255, 75, 24, .18);
}


.SLOT-system-label {
    color:
        rgba(255, 255, 255, .47);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.SLOT-system-line {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255, 62, 18, .12);
}


.SLOT-system-line i {
    position: absolute;

    top: 0;
    left: -40%;

    width: 40%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff3214,
            #ffb323,
            #fff1a0,
            transparent
        );

    box-shadow:
        0 0 5px #ff6715;

    animation:
        SLOTsystemFlow 2.4s linear infinite;
}


.SLOT-status {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #ffb826;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.SLOT-status b {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #ffc12c;

    box-shadow:
        0 0 5px #ff9517,
        0 0 10px rgba(255, 48, 0, .75);

    animation:
        SLOTstatusPulse 1.25s ease-in-out infinite;
}


/* =========================================================
   CONTROL
   ========================================================= */

.SLOT-controls {
    position: relative;
    z-index: 15;
}


/* =========================================================
   SPIN BUTTON
   ========================================================= */

.SLOT-btn {
    position: relative;

    width: 100%;
    min-height: 54px;

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

    gap: 11px;

    padding: 14px 20px;

    overflow: hidden;

    cursor: pointer;

    color: #fff7e5;

    font-family:
        "Poppins",
        "Segoe UI",
        sans-serif;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1.6px;

    text-transform: uppercase;

    clip-path: polygon(
        14px 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% calc(100% - 11px),
        calc(100% - 11px) 100%,
        11px 100%,
        0 calc(100% - 11px),
        0 14px
    );

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 220, 112, .26),
            transparent 41%
        ),
        linear-gradient(
            145deg,
            #ff431b 0%,
            #db1703 36%,
            #8b0700 70%,
            #420403 100%
        );

    border:
        1px solid rgba(255, 187, 61, .92);

    box-shadow:
        inset 0 1px 0 rgba(255, 246, 196, .55),
        inset 0 -6px 12px rgba(65, 0, 0, .5),
        0 5px 0 #500400,
        0 10px 20px rgba(0, 0, 0, .4),
        0 0 18px rgba(255, 38, 0, .34);

    text-shadow:
        0 2px 2px rgba(0, 0, 0, .9),
        0 0 8px rgba(255, 191, 54, .25);

    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease;
}


/* INNER FRAME */

.SLOT-btn::after {
    content: "";
    position: absolute;

    inset: 4px;

    pointer-events: none;

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 10px
    );

    border:
        1px solid rgba(255, 240, 180, .18);
}


/* KATANA SHINE */

.SLOT-btn::before {
    content: "";

    position: absolute;

    top: -50%;
    left: -55%;

    width: 27%;
    height: 200%;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .74),
            rgba(255, 213, 99, .45),
            transparent
        );

    animation:
        SLOTbuttonShine 3.3s ease-in-out infinite;
}


.SLOT-btn:hover {
    transform:
        translateY(-3px)
        scale(1.01);

    filter:
        brightness(1.13)
        saturate(1.12);

    box-shadow:
        inset 0 1px 0 rgba(255, 250, 210, .7),
        inset 0 -6px 12px rgba(65, 0, 0, .45),
        0 7px 0 #500400,
        0 14px 25px rgba(0, 0, 0, .45),
        0 0 28px rgba(255, 43, 0, .58),
        0 0 44px rgba(255, 126, 0, .17);
}


.SLOT-btn:active {
    transform:
        translateY(4px)
        scale(.985);

    box-shadow:
        inset 0 4px 10px rgba(50, 0, 0, .45),
        0 2px 0 #500400,
        0 5px 12px rgba(0, 0, 0, .4);
}


.SLOT-btn-icon {
    position: relative;

    z-index: 3;

    color: #ffd34d;

    font-size: 10px;

    text-shadow:
        0 0 5px #ff9c17,
        0 0 10px rgba(255, 45, 0, .7);

    animation:
        SLOTbuttonSymbol 1.4s ease-in-out infinite;
}


.SLOT-btn-text {
    position: relative;
    z-index: 3;
}


/* =========================================================
   RESULT
   ========================================================= */

.SLOT-result {
    position: relative;
    z-index: 12;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 11px;

    margin-top: 18px;

    opacity: 0;

    max-height: 0;

    overflow: hidden;

    transform:
        translateY(12px)
        scale(.97);

    transition:
        opacity .45s ease,
        max-height .65s ease,
        transform .45s ease;
}


.SLOT-result.show {
    opacity: 1;

    max-height: 600px;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   RESULT BOX
   ========================================================= */

.SLOT-box {
    position: relative;

    min-height: 102px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 14px 12px;

    overflow: hidden;

    box-sizing: border-box;

    text-align: center;

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 55, 12, .08),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(29, 12, 13, .98),
            rgba(7, 7, 9, .99)
        );

    border:
        1px solid rgba(255, 77, 24, .23);

    box-shadow:
        inset 0 0 18px rgba(255, 0, 0, .035),
        0 7px 18px rgba(0, 0, 0, .34);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.SLOT-box:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255, 106, 32, .5);

    box-shadow:
        inset 0 0 20px rgba(255, 0, 0, .06),
        0 10px 22px rgba(0, 0, 0, .4),
        0 0 17px rgba(255, 43, 0, .08);
}


/* CORNER ACCENT */

.SLOT-corner {
    position: absolute;

    top: 4px;
    left: 4px;

    width: 32px;
    height: 32px;

    pointer-events: none;

    border-top:
        2px solid #ff4619;

    border-left:
        2px solid #ff4619;

    filter:
        drop-shadow(0 0 4px rgba(255, 55, 0, .5));
}


/* DATA LABEL */

.SLOT-label {
    position: relative;

    z-index: 3;

    margin-bottom: 7px;

    color:
        rgba(255, 221, 190, .55);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}


.SLOT-label span {
    margin-right: 4px;
}


/* RESULT VALUE */

.SLOT-value {
    position: relative;

    z-index: 3;

    min-height: 26px;

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

    color: #ffb727;

    font-size: 16px;
    font-weight: 900;

    line-height: 1.3;

    text-shadow:
        0 0 5px rgba(255, 170, 31, .55),
        0 0 12px rgba(255, 43, 0, .18);
}


/* BOTTOM DATA LINE */

.SLOT-data-line {
    position: absolute;

    left: 10%;
    bottom: 6px;

    width: 80%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 49, 15, .55),
            rgba(255, 185, 40, .8),
            rgba(255, 49, 15, .55),
            transparent
        );

    box-shadow:
        0 0 5px rgba(255, 60, 0, .25);
}


/* =========================================================
   GLOW RESULT
   ========================================================= */

.glow {
    color: #ffe17a;

    text-shadow:
        0 0 5px #ffc333,
        0 0 12px rgba(255, 133, 15, .9),
        0 0 22px rgba(255, 42, 0, .45);

    animation:
        SLOTresultGlow .65s ease-out;
}


/* =========================================================
   FOOTER
   ========================================================= */

.SLOT-footer {
    position: relative;
    z-index: 10;

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

    gap: 8px;

    margin-top: 15px;

    color:
        rgba(255, 184, 43, .47);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.SLOT-footer span {
    width: 45px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 65, 17, .65),
            rgba(255, 184, 39, .8)
        );
}


.SLOT-footer span:last-child {
    transform:
        scaleX(-1);
}


/* =========================================================
   SHURIKEN
   ========================================================= */

.SLOT-shuriken {
    position: absolute;

    top: 32%;
    left: -45px;

    width: 25px;
    height: 25px;

    z-index: 30;

    pointer-events: none;

    opacity: 0;

    animation:
        SLOTshurikenFly 7.5s linear infinite;
}


.SLOT-shuriken::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            #fff0a2,
            #ffb423 20%,
            #9b1207 48%,
            #190507 69%,
            #ff8214
        );

    clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 24%,
        71% 50%,
        100% 76%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 76%,
        29% 50%,
        0% 24%,
        39% 35%
    );

    filter:
        drop-shadow(0 0 4px #ffbf29)
        drop-shadow(0 0 8px rgba(255, 49, 0, .75));
}


.SLOT-shuriken::after {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background:
        #050507;

    border:
        1px solid #ffc02b;
}


.SLOT-shuriken-2 {
    top: 69%;

    left: auto;
    right: -40px;

    width: 18px;
    height: 18px;

    animation:
        SLOTshurikenReverse 9.5s linear infinite;
}


.SLOT-shuriken-2::after {
    inset: 5px;
}


/* =========================================================
   KATANA SLASH
   ========================================================= */

.SLOT-slash {
    position: absolute;

    top: 19%;
    left: -90%;

    width: 75%;
    height: 230px;

    z-index: 40;

    pointer-events: none;

    opacity: 0;

    transform:
        rotate(-18deg)
        skewX(-14deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 55, 0, .05),
            rgba(255, 191, 42, .3),
            rgba(255, 255, 255, .95),
            #fff,
            rgba(255, 191, 45, .78),
            rgba(255, 43, 0, .35),
            transparent
        );

    filter:
        drop-shadow(0 0 4px #fff)
        drop-shadow(0 0 10px rgba(255, 179, 31, .85))
        drop-shadow(0 0 22px rgba(255, 37, 0, .6));
}


.SLOT-slash::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #fff1a1,
            #fff,
            #ffae1c,
            transparent
        );

    box-shadow:
        0 0 5px white,
        0 0 10px #ffae1c,
        0 0 20px rgba(255, 42, 0, .8);
}


/* CLICK TRIGGER */

#SLOT-widget.SLOT-spinning .SLOT-slash {
    animation:
        SLOTkatanaSlash .88s cubic-bezier(.2, .7, .3, 1);
}


/* =========================================================
   IMPACT FLASH
   ========================================================= */

.SLOT-impact {
    position: absolute;

    top: 19%;
    left: 50%;

    width: 250px;
    height: 220px;

    z-index: 38;

    pointer-events: none;

    opacity: 0;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 225, .52),
            rgba(255, 186, 47, .23) 28%,
            rgba(255, 42, 0, .08) 52%,
            transparent 72%
        );
}


#SLOT-widget.SLOT-spinning .SLOT-impact {
    animation:
        SLOTimpactFlash .8s ease-out;
}


/* =========================================================
   EMBER
   ========================================================= */

.SLOT-ember {
    position: absolute;

    bottom: 12px;

    width: 4px;
    height: 4px;

    z-index: 25;

    pointer-events: none;

    border-radius: 50%;

    background:
        #ffc02a;

    box-shadow:
        0 0 5px #ff8611,
        0 0 9px rgba(255, 40, 0, .8);

    opacity: 0;
}


.SLOT-ember.ember-1 {
    left: 12%;
    animation:
        SLOTemberRise 3.7s ease-out infinite;
}


.SLOT-ember.ember-2 {
    left: 35%;
    animation:
        SLOTemberRise 4.2s ease-out .8s infinite;
}


.SLOT-ember.ember-3 {
    left: 69%;
    animation:
        SLOTemberRise 3.9s ease-out 1.5s infinite;
}


.SLOT-ember.ember-4 {
    left: 88%;
    animation:
        SLOTemberRise 4.6s ease-out 2.1s infinite;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes SLOTmachineAura {
    0%,
    100% {
        box-shadow:
            0 24px 50px rgba(0, 0, 0, .58),
            0 0 0 1px rgba(255, 185, 50, .08),
            0 0 18px rgba(255, 42, 0, .22),
            0 0 42px rgba(120, 0, 0, .12),
            inset 0 0 28px rgba(255, 0, 0, .04);
    }

    50% {
        box-shadow:
            0 24px 50px rgba(0, 0, 0, .62),
            0 0 0 1px rgba(255, 185, 50, .13),
            0 0 28px rgba(255, 42, 0, .4),
            0 0 60px rgba(120, 0, 0, .2),
            inset 0 0 28px rgba(255, 0, 0, .055);
    }
}


@keyframes SLOTbladeGlow {
    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
        filter:
            brightness(1.4);
    }
}


@keyframes SLOTbadgeSymbol {
    0%,
    100% {
        opacity: .55;
        transform:
            scale(.8);
    }

    50% {
        opacity: 1;
        transform:
            scale(1.2);
    }
}


@keyframes SLOTsystemFlow {
    from {
        left: -40%;
    }

    to {
        left: 110%;
    }
}


@keyframes SLOTstatusPulse {
    0%,
    100% {
        opacity: .45;
        transform:
            scale(.8);
    }

    50% {
        opacity: 1;
        transform:
            scale(1.2);
    }
}


@keyframes SLOTbuttonShine {
    0%,
    50% {
        left: -55%;
        opacity: 0;
    }

    57% {
        opacity: .85;
    }

    76% {
        left: 135%;
        opacity: .45;
    }

    77%,
    100% {
        left: 135%;
        opacity: 0;
    }
}


@keyframes SLOTbuttonSymbol {
    0%,
    100% {
        opacity: .55;
        transform:
            scale(.8)
            rotate(0deg);
    }

    50% {
        opacity: 1;
        transform:
            scale(1.2)
            rotate(90deg);
    }
}


@keyframes SLOTresultGlow {
    0% {
        opacity: .3;

        transform:
            scale(.92);
    }

    55% {
        opacity: 1;

        transform:
            scale(1.06);
    }

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


@keyframes SLOTshurikenFly {
    0%,
    18% {
        left: -45px;
        top: 32%;
        opacity: 0;

        transform:
            rotate(0deg);
    }

    19% {
        opacity: .95;
    }

    42% {
        top: 24%;
    }

    65% {
        top: 43%;
    }

    79% {
        left: calc(100% + 45px);

        opacity: .85;

        transform:
            rotate(1800deg);
    }

    80%,
    100% {
        left: calc(100% + 45px);

        opacity: 0;
    }
}


@keyframes SLOTshurikenReverse {
    0%,
    46% {
        right: -40px;

        opacity: 0;

        transform:
            rotate(0deg);
    }

    47% {
        opacity: .8;
    }

    88% {
        right: calc(100% + 40px);

        opacity: .7;

        transform:
            rotate(-1440deg);
    }

    89%,
    100% {
        right: calc(100% + 40px);

        opacity: 0;
    }
}


@keyframes SLOTkatanaSlash {
    0% {
        left: -90%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    55% {
        left: 35%;
        opacity: 1;
    }

    90% {
        left: 125%;
        opacity: .45;
    }

    100% {
        left: 135%;
        opacity: 0;
    }
}


@keyframes SLOTimpactFlash {
    0% {
        opacity: 0;

        transform:
            translateX(-50%)
            scale(.2);
    }

    30% {
        opacity: .8;

        transform:
            translateX(-50%)
            scale(.9);
    }

    65% {
        opacity: .25;

        transform:
            translateX(-50%)
            scale(1.7);
    }

    100% {
        opacity: 0;

        transform:
            translateX(-50%)
            scale(2);
    }
}


@keyframes SLOTemberRise {
    0% {
        opacity: 0;

        transform:
            translateY(15px)
            translateX(0)
            scale(.4);
    }

    18% {
        opacity: .9;
    }

    60% {
        opacity: .7;

        transform:
            translateY(-50px)
            translateX(8px)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translateY(-105px)
            translateX(-7px)
            scale(.2);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    #SLOT-widget {
        margin:
            22px 8px;

        padding:
            21px 14px 17px;
    }

    .SLOT-title {
        font-size: 18px;
    }

    .SLOT-sub {
        font-size: 11px;
    }

    .SLOT-result {
        grid-template-columns:
            1fr;

        gap: 9px;
    }

    .SLOT-box {
        min-height: 88px;

        padding:
            12px 10px;
    }

    .SLOT-value {
        font-size: 15px;
    }

    .SLOT-btn {
        min-height: 50px;

        padding:
            13px;

        font-size: 13px;
    }

}


@media (max-width: 360px) {

    #SLOT-widget {
        padding:
            18px 10px 15px;
    }

    .SLOT-title {
        font-size: 16px;
    }

    .SLOT-badge {
        font-size: 9px;

        padding:
            6px 10px;
    }

    .SLOT-btn {
        font-size: 12px;
    }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    #SLOT-widget,
    #SLOT-widget::before,
    .SLOT-badge span,
    .SLOT-system-line i,
    .SLOT-status b,
    .SLOT-btn::before,
    .SLOT-btn-icon,
    .SLOT-shuriken,
    .SLOT-ember {
        animation: none !important;
    }

}

/* =========================================================
   GENERATOR WRAPPER
   ========================================================= */

.generator-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 12px;
}


/* =========================================================
   MAIN SHOGUN MACHINE
   ========================================================= */

.machine {
    position: relative;
    width: min(100%, 430px);
    box-sizing: border-box;
    padding: 18px 17px 17px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    color: #fff;
    font-family: "Orbitron", "Segoe UI", sans-serif;

    clip-path: polygon(
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px),
        0 18px
    );

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255, 73, 16, .26),
            transparent 38%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 10px
        ),
        linear-gradient(
            160deg,
            #250708 0%,
            #110709 48%,
            #050507 100%
        );

    border:
        1px solid rgba(255, 92, 28, .78);

    box-shadow:
        0 22px 45px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,185,50,.08),
        0 0 22px rgba(255,42,0,.28),
        0 0 50px rgba(120,0,0,.15),
        inset 0 0 28px rgba(255,0,0,.045);

    animation:
        machineAura 4s ease-in-out infinite;
}


/* TOP BLADE */

.machine::before {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 86%;
    height: 2px;
    z-index: 10;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff3215,
            #ffae20,
            #fff0a0,
            #ffae20,
            #ff3215,
            transparent
        );

    box-shadow:
        0 0 7px #ff4815,
        0 0 15px rgba(255,135,0,.5);

    animation:
        topBladeGlow 2.6s ease-in-out infinite;
}


/* HUD GRID */

.machine::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        27px 27px;

    opacity: .42;
}


/* =========================================================
   TITLE
   ========================================================= */

.machine-title {
    position: relative;
    z-index: 12;

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

    gap: 9px;

    margin-bottom: 14px;
}


.machine h2 {
    margin: 0;

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.35;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    text-shadow:
        0 2px 2px rgba(0,0,0,.9),
        0 0 7px rgba(255,64,20,.55),
        0 0 15px rgba(255,50,0,.16);
}


.machine h2 small {
    display: block;

    margin-bottom: 3px;

    color: #ffb62a;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 3px;

    text-shadow:
        0 0 5px rgba(255,154,22,.8);
}


.title-wing {
    flex: 1;

    max-width: 42px;
    height: 2px;

    transform:
        skewX(-35deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff3213,
            #ffbd2c
        );

    box-shadow:
        0 0 6px rgba(255,72,0,.6);
}


.title-wing.right {
    transform:
        skewX(35deg)
        scaleX(-1);
}


/* =========================================================
   DISPLAY SHELL
   ========================================================= */

.display-shell {
    position: relative;
    z-index: 15;

    padding: 8px;

    clip-path: polygon(
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px),
        0 12px
    );

    background:
        linear-gradient(
            145deg,
            rgba(58,12,10,.98),
            rgba(11,10,12,.99)
        );

    border:
        1px solid rgba(255,77,24,.45);

    box-shadow:
        inset 0 0 20px rgba(255,0,0,.05),
        0 9px 20px rgba(0,0,0,.42),
        0 0 15px rgba(255,39,0,.12);
}


/* =========================================================
   DISPLAY TOP LABEL
   ========================================================= */

.display-label {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        2px 5px 7px;

    color:
        rgba(255,255,255,.46);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.3px;
}


.system-status {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #ffb827;
}


.system-status i {
    width: 5px;
    height: 5px;

    display: block;

    border-radius: 50%;

    background:
        #ffb827;

    box-shadow:
        0 0 5px #ff9d18,
        0 0 10px rgba(255,53,0,.7);

    animation:
        statusPulse 1.3s ease-in-out infinite;
}


/* =========================================================
   NUMBER DISPLAY
   ========================================================= */

.display {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    padding: 13px 11px;

    overflow: hidden;

    clip-path: polygon(
        9px 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% calc(100% - 9px),
        calc(100% - 9px) 100%,
        9px 100%,
        0 calc(100% - 9px),
        0 9px
    );

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(122,9,3,.3),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            #050507,
            #0d0708
        );

    border:
        1px solid rgba(255,80,24,.23);

    box-shadow:
        inset 0 0 25px rgba(0,0,0,.9),
        inset 0 0 15px rgba(255,28,0,.05);
}


/* SCANLINE */

.display::before {
    content: "";

    position: absolute;

    left: 0;
    top: -40%;

    width: 100%;
    height: 35%;

    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,80,20,.08),
            rgba(255,194,50,.13),
            transparent
        );

    animation:
        displayScanner 3.8s linear infinite;
}


/* INNER LIGHT */

.display::after {
    content: "";

    position: absolute;

    top: 0;
    left: -45%;

    width: 30%;
    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,220,135,.08),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        displaySweep 5s ease-in-out infinite;
}


/* =========================================================
   ENERGY NUMBER CORES
   ========================================================= */

.ball {
    position: relative;

    aspect-ratio: 1 / 1;

    width: 100%;

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

    box-sizing: border-box;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 25%,
            #fff7b8 0%,
            #ffd448 9%,
            #ff9719 25%,
            #e22a08 53%,
            #710500 78%,
            #240202 100%
        );

    border:
        2px solid rgba(255,205,81,.92);

    box-shadow:
        0 0 5px rgba(255,215,95,.85),
        0 0 13px rgba(255,79,0,.62),
        0 0 25px rgba(255,27,0,.22),
        inset -7px -8px 12px rgba(70,0,0,.55),
        inset 4px 4px 8px rgba(255,255,255,.24);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* ENERGY RING */

.ball::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border:
        1px solid rgba(255,135,24,.24);

    border-top-color:
        rgba(255,230,130,.9);

    border-bottom-color:
        rgba(255,42,0,.7);

    box-shadow:
        0 0 7px rgba(255,53,0,.24);

    animation:
        energyRing 4s linear infinite;
}


/* REFLECTION */

.ball::after {
    content: "";

    position: absolute;

    top: 14%;
    left: 20%;

    width: 28%;
    height: 18%;

    border-radius: 50%;

    transform:
        rotate(-30deg);

    background:
        rgba(255,255,255,.48);

    filter:
        blur(1px);
}


.ball span {
    position: relative;

    z-index: 3;

    color: #fff;

    font-size: 28px;
    font-weight: 900;

    line-height: 1;

    text-shadow:
        0 2px 2px rgba(61,0,0,.9),
        0 0 5px #ffcf45,
        0 0 10px rgba(255,49,0,.55);
}


/* =========================================================
   SPIN STATE
   ========================================================= */

.ball.spin {
    animation:
        shogunBallSpin .23s linear infinite;

    box-shadow:
        0 0 8px #fff2a4,
        0 0 18px #ff9f19,
        0 0 34px rgba(255,39,0,.75),
        inset -7px -8px 12px rgba(70,0,0,.45),
        inset 4px 4px 8px rgba(255,255,255,.35);
}


.ball.spin span {
    animation:
        numberFlicker .12s linear infinite;
}


/* =========================================================
   DISPLAY BOTTOM
   ========================================================= */

.display-bottom {
    display: flex;

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

    gap: 7px;

    padding:
        7px 4px 1px;

    color:
        rgba(255,188,46,.65);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.energy-line {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255,72,20,.15);
}


.energy-line i {
    position: absolute;

    top: 0;
    left: -45%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff4018,
            #ffbd29,
            #fff2a1,
            transparent
        );

    box-shadow:
        0 0 5px #ff6615;

    animation:
        energyFlow 2.3s linear infinite;
}


/* =========================================================
   SHOGUN ACTION BUTTON
   ========================================================= */

#generate-btn {
    position: relative;

    z-index: 20;

    width: 88%;
    min-height: 51px;

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

    gap: 10px;

    margin:
        17px auto 0;

    padding:
        13px 20px;

    overflow: hidden;

    cursor: pointer;

    color:
        #fff6e7;

    font-family:
        "Orbitron",
        "Segoe UI",
        sans-serif;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 1.6px;

    text-transform: uppercase;

    clip-path: polygon(
        14px 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% calc(100% - 11px),
        calc(100% - 11px) 100%,
        11px 100%,
        0 calc(100% - 11px),
        0 14px
    );

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,222,116,.27),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #ff431b 0%,
            #dd1703 37%,
            #8b0700 70%,
            #420403 100%
        );

    border:
        1px solid rgba(255,187,61,.92);

    box-shadow:
        inset 0 1px 0 rgba(255,246,196,.55),
        inset 0 -6px 12px rgba(65,0,0,.5),
        0 5px 0 #500400,
        0 10px 20px rgba(0,0,0,.4),
        0 0 18px rgba(255,38,0,.34);

    text-shadow:
        0 2px 2px rgba(0,0,0,.9),
        0 0 8px rgba(255,191,54,.25);

    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease;
}


/* INNER FRAME */

#generate-btn::after {
    content: "";

    position: absolute;

    inset: 4px;

    pointer-events: none;

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 10px
    );

    border:
        1px solid rgba(255,240,180,.18);
}


/* MOVING KATANA SHINE */

#generate-btn::before {
    content: "";

    position: absolute;

    top: -50%;
    left: -55%;

    width: 26%;
    height: 200%;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.72),
            rgba(255,213,99,.46),
            transparent
        );

    animation:
        buttonKatanaShine 3.4s ease-in-out infinite;
}


#generate-btn:hover {
    transform:
        translateY(-3px)
        scale(1.015);

    filter:
        brightness(1.13)
        saturate(1.12);

    box-shadow:
        inset 0 1px 0 rgba(255,250,210,.7),
        inset 0 -6px 12px rgba(65,0,0,.45),
        0 7px 0 #500400,
        0 14px 25px rgba(0,0,0,.45),
        0 0 28px rgba(255,43,0,.6),
        0 0 45px rgba(255,126,0,.18);
}


#generate-btn:active {
    transform:
        translateY(4px)
        scale(.985);

    box-shadow:
        inset 0 4px 10px rgba(50,0,0,.45),
        0 2px 0 #500400,
        0 5px 12px rgba(0,0,0,.4);
}


.btn-symbol {
    color: #ffd35a;

    font-size: 10px;

    text-shadow:
        0 0 5px #ff9e17,
        0 0 10px rgba(255,45,0,.7);

    animation:
        buttonSymbol 1.5s ease-in-out infinite;
}


.btn-text {
    position: relative;
    z-index: 3;
}


/* =========================================================
   BOTTOM JAPANESE TEXT
   ========================================================= */

.machine-bottom-line {
    position: relative;
    z-index: 10;

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

    gap: 8px;

    margin-top: 11px;

    color:
        rgba(255,190,45,.5);

    font-size: 7px;

    letter-spacing: 2px;
}


.machine-bottom-line span {
    width: 42px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,70,20,.7),
            rgba(255,190,40,.8)
        );
}


.machine-bottom-line span:last-child {
    transform:
        scaleX(-1);
}


.machine-bottom-line b {
    font-weight: 700;
}


/* =========================================================
   SHURIKEN
   ========================================================= */

.machine-shuriken {
    position: absolute;

    top: 34%;
    left: -45px;

    width: 25px;
    height: 25px;

    z-index: 35;

    pointer-events: none;

    opacity: 0;

    animation:
        machineShurikenFly 7s linear infinite;
}


.machine-shuriken::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            #fff0a2,
            #ffb423 20%,
            #9b1207 48%,
            #190507 69%,
            #ff8214
        );

    clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 24%,
        71% 50%,
        100% 76%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 76%,
        29% 50%,
        0% 24%,
        39% 35%
    );

    filter:
        drop-shadow(0 0 4px #ffbf29)
        drop-shadow(0 0 8px rgba(255,49,0,.75));
}


.machine-shuriken::after {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background:
        #050507;

    border:
        1px solid #ffc02b;
}


.machine-shuriken-2 {
    top: 70%;
    left: auto;
    right: -40px;

    width: 18px;
    height: 18px;

    animation:
        machineShurikenReverse 9s linear infinite;
}


.machine-shuriken-2::after {
    inset: 5px;
}


/* =========================================================
   KATANA SLASH
   ========================================================= */

.machine-slash {
    position: absolute;

    top: 17%;
    left: -90%;

    width: 75%;
    height: 220px;

    z-index: 40;

    pointer-events: none;

    opacity: 0;

    transform:
        rotate(-18deg)
        skewX(-14deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,55,0,.05),
            rgba(255,191,42,.3),
            rgba(255,255,255,.95),
            #fff,
            rgba(255,191,45,.78),
            rgba(255,43,0,.35),
            transparent
        );

    filter:
        drop-shadow(0 0 4px #fff)
        drop-shadow(0 0 10px rgba(255,179,31,.85))
        drop-shadow(0 0 22px rgba(255,37,0,.6));
}


.machine-slash::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #fff1a1,
            #fff,
            #ffae1c,
            transparent
        );

    box-shadow:
        0 0 5px white,
        0 0 10px #ffae1c,
        0 0 20px rgba(255,42,0,.8);
}


/* ACTIVE SLASH */

.machine.generating .machine-slash {
    animation:
        generatorKatanaSlash .85s cubic-bezier(.2,.7,.3,1);
}


/* =========================================================
   IMPACT FLASH
   ========================================================= */

.machine-impact {
    position: absolute;

    top: 19%;
    left: 50%;

    width: 220px;
    height: 180px;

    z-index: 38;

    pointer-events: none;

    opacity: 0;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,225,.52),
            rgba(255,186,47,.23) 28%,
            rgba(255,42,0,.08) 52%,
            transparent 72%
        );
}


.machine.generating .machine-impact {
    animation:
        generatorImpact .8s ease-out;
}


/* =========================================================
   EMBERS
   ========================================================= */

.machine-ember {
    position: absolute;

    bottom: 15px;

    width: 4px;
    height: 4px;

    z-index: 25;

    pointer-events: none;

    border-radius: 50%;

    background:
        #ffc02a;

    box-shadow:
        0 0 5px #ff8611,
        0 0 9px rgba(255,40,0,.8);

    opacity: 0;
}


.ember-a {
    left: 12%;
    animation:
        machineEmber 3.7s ease-out infinite;
}


.ember-b {
    left: 35%;
    animation:
        machineEmber 4.3s ease-out .8s infinite;
}


.ember-c {
    left: 69%;
    animation:
        machineEmber 3.9s ease-out 1.5s infinite;
}


.ember-d {
    left: 88%;
    animation:
        machineEmber 4.6s ease-out 2.1s infinite;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes machineAura {
    0%,
    100% {
        box-shadow:
            0 22px 45px rgba(0,0,0,.58),
            0 0 0 1px rgba(255,185,50,.08),
            0 0 18px rgba(255,42,0,.22),
            0 0 42px rgba(120,0,0,.12),
            inset 0 0 28px rgba(255,0,0,.04);
    }

    50% {
        box-shadow:
            0 22px 45px rgba(0,0,0,.62),
            0 0 0 1px rgba(255,185,50,.13),
            0 0 28px rgba(255,42,0,.4),
            0 0 60px rgba(120,0,0,.2),
            inset 0 0 28px rgba(255,0,0,.055);
    }
}


@keyframes topBladeGlow {
    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
        filter: brightness(1.4);
    }
}


@keyframes statusPulse {
    0%,
    100% {
        opacity: .4;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


@keyframes displayScanner {
    0% {
        top: -40%;
    }

    100% {
        top: 115%;
    }
}


@keyframes displaySweep {
    0%,
    20% {
        left: -45%;
        opacity: 0;
    }

    35% {
        opacity: .7;
    }

    60% {
        left: 130%;
        opacity: .4;
    }

    61%,
    100% {
        left: 130%;
        opacity: 0;
    }
}


@keyframes energyRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes energyFlow {
    from {
        left: -45%;
    }

    to {
        left: 110%;
    }
}


@keyframes shogunBallSpin {
    0% {
        transform:
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);
    }

    50% {
        transform:
            rotateY(180deg)
            rotateZ(8deg)
            scale(1.09);
    }

    100% {
        transform:
            rotateY(360deg)
            rotateZ(0deg)
            scale(1);
    }
}


@keyframes numberFlicker {
    0% {
        opacity: .3;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }

    100% {
        opacity: .3;
        transform: scale(.85);
    }
}


@keyframes buttonKatanaShine {
    0%,
    50% {
        left: -55%;
        opacity: 0;
    }

    57% {
        opacity: .85;
    }

    76% {
        left: 135%;
        opacity: .45;
    }

    77%,
    100% {
        left: 135%;
        opacity: 0;
    }
}


@keyframes buttonSymbol {
    0%,
    100% {
        opacity: .55;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


@keyframes machineShurikenFly {
    0%,
    18% {
        left: -45px;
        top: 35%;
        opacity: 0;
        transform: rotate(0deg);
    }

    19% {
        opacity: .95;
    }

    42% {
        top: 26%;
    }

    65% {
        top: 44%;
    }

    79% {
        left: calc(100% + 45px);
        opacity: .85;
        transform: rotate(1800deg);
    }

    80%,
    100% {
        left: calc(100% + 45px);
        opacity: 0;
    }
}


@keyframes machineShurikenReverse {
    0%,
    46% {
        right: -40px;
        opacity: 0;
        transform: rotate(0deg);
    }

    47% {
        opacity: .8;
    }

    88% {
        right: calc(100% + 40px);
        opacity: .7;
        transform: rotate(-1440deg);
    }

    89%,
    100% {
        right: calc(100% + 40px);
        opacity: 0;
    }
}


@keyframes generatorKatanaSlash {
    0% {
        left: -90%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    55% {
        left: 35%;
        opacity: 1;
    }

    90% {
        left: 125%;
        opacity: .45;
    }

    100% {
        left: 135%;
        opacity: 0;
    }
}


@keyframes generatorImpact {
    0% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(.2);
    }

    30% {
        opacity: .8;
        transform:
            translateX(-50%)
            scale(.9);
    }

    65% {
        opacity: .25;
        transform:
            translateX(-50%)
            scale(1.7);
    }

    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(2);
    }
}


@keyframes machineEmber {
    0% {
        opacity: 0;

        transform:
            translateY(15px)
            translateX(0)
            scale(.4);
    }

    18% {
        opacity: .9;
    }

    60% {
        opacity: .7;

        transform:
            translateY(-50px)
            translateX(8px)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translateY(-105px)
            translateX(-7px)
            scale(.2);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .generator-container {
        padding:
            18px 8px;
    }

    .machine {
        width: 100%;

        padding:
            16px 12px 15px;
    }

    .machine h2 {
        font-size: 13px;

        letter-spacing: .7px;
    }

    .machine h2 small {
        font-size: 7px;

        letter-spacing: 2px;
    }

    .display {
        gap: 7px;

        padding:
            12px 9px;
    }

    .ball span {
        font-size: 25px;
    }

    #generate-btn {
        width: 91%;

        min-height: 48px;

        font-size: 12px;
    }

    .title-wing {
        max-width: 27px;
    }

}


@media (max-width: 360px) {

    .machine {
        padding:
            14px 9px;
    }

    .display {
        gap: 5px;

        padding:
            11px 7px;
    }

    .ball span {
        font-size: 22px;
    }

    #generate-btn {
        width: 94%;
    }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .machine,
    .machine::before,
    .system-status i,
    .display::before,
    .display::after,
    .ball::before,
    .energy-line i,
    #generate-btn::before,
    .btn-symbol,
    .machine-shuriken,
    .machine-ember {
        animation: none !important;
    }

}

/* =========================================================
   JAPANESE ANIME GAMING / SHOGUN HUD FOOTER
   BLACK • CRIMSON • GOLD • EMBER
   ========================================================= */

.shura-trend-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 7px;
    padding: 10px 12px 9px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% -60%, rgba(255, 43, 0, .22), transparent 42%),
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .012) 0,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px,
            transparent 9px
        ),
        linear-gradient(
            180deg,
            #170507 0%,
            #0c0709 48%,
            #050507 100%
        );
    border-top: 1px solid rgba(255, 72, 22, .9);
    box-shadow:
        0 -8px 28px rgba(0, 0, 0, .75),
        0 -2px 18px rgba(255, 36, 0, .24),
        inset 0 1px 0 rgba(255, 193, 90, .12),
        inset 0 10px 22px rgba(255, 0, 0, .035);
    font-family: "Poppins", "Segoe UI", sans-serif;
    isolation: isolate;
    overflow: hidden;
}

/* Blade line bagian atas */
.shura-trend-fixed-footer::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #7b0500 5%,
        #ff2c0d 18%,
        #ffb52b 34%,
        #fff1a0 50%,
        #ffb52b 66%,
        #ff2c0d 82%,
        #7b0500 95%,
        transparent 100%
    );
    box-shadow:
        0 0 7px rgba(255, 47, 0, .8),
        0 0 16px rgba(255, 117, 0, .35);
    animation: shuraBladeGlow 3s ease-in-out infinite;
    pointer-events: none;
}

/* Japanese HUD texture */
.shura-trend-fixed-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 42, 0, .06) 20%,
            transparent 34%,
            transparent 66%,
            rgba(255, 146, 0, .04) 80%,
            transparent 100%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 89px,
            rgba(255, 255, 255, .012) 90px
        );
}

/* =========================================================
   BUTTON BASE
   ========================================================= */

.shura-trend-fixed-footer a {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: none;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    padding: 6px 5px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    color: #e6e2dc;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .45px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .95),
        0 0 6px rgba(255, 95, 35, .12);
    clip-path: polygon(
        11px 0,
        calc(100% - 11px) 0,
        100% 11px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 11px
    );
    background: linear-gradient(
        145deg,
        rgba(43, 13, 14, .96),
        rgba(15, 10, 12, .98) 55%,
        rgba(7, 7, 9, 1)
    );
    border: 1px solid rgba(255, 67, 28, .18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        inset 0 -8px 18px rgba(0, 0, 0, .28),
        0 5px 12px rgba(0, 0, 0, .32);
    transition:
        transform .24s ease,
        filter .24s ease,
        color .24s ease,
        box-shadow .24s ease;
}

/* Crimson corner accent */
.shura-trend-fixed-footer a::before {
    content: "";
    position: absolute;
    inset: 3px;
    pointer-events: none;
    clip-path: polygon(
        8px 0,
        45% 0,
        39% 2px,
        9px 2px,
        2px 9px,
        2px 37%,
        0 43%,
        0 8px
    );
    background: linear-gradient(
        135deg,
        #ff3918,
        #ff981e
    );
    opacity: .58;
    filter: drop-shadow(0 0 4px rgba(255, 54, 10, .4));
}

/* Katana indicator */
.shura-trend-fixed-footer a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 20%;
    height: 2px;
    transform: translateX(-50%) skewX(-35deg);
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        transparent,
        #ff3b13,
        #ffbb2b,
        transparent
    );
    box-shadow: 0 0 6px rgba(255, 61, 0, .45);
    transition:
        width .25s ease,
        box-shadow .25s ease;
}

.shura-trend-fixed-footer a:hover {
    color: #fff;
    transform: translateY(-5px);
    filter: brightness(1.12);
    background: linear-gradient(
        145deg,
        rgba(92, 15, 12, .98),
        rgba(31, 9, 11, .98) 55%,
        rgba(10, 8, 10, 1)
    );
    border-color: rgba(255, 88, 32, .52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 0 18px rgba(255, 24, 0, .07),
        0 7px 18px rgba(0, 0, 0, .44),
        0 0 16px rgba(255, 36, 0, .10);
}

.shura-trend-fixed-footer a:hover::after {
    width: 50%;
    box-shadow:
        0 0 7px rgba(255, 55, 0, .8),
        0 0 13px rgba(255, 147, 0, .35);
}

/* =========================================================
   ICON
   ========================================================= */

.shura-trend-fixed-footer img {
    position: relative;
    width: 25px;
    height: 25px;
    padding: 4px;
    box-sizing: content-box;
    object-fit: contain;
    border-radius: 8px;
    background: radial-gradient(
        circle,
        rgba(255, 83, 20, .10),
        rgba(255, 43, 0, .025) 55%,
        transparent 72%
    );
    filter:
        drop-shadow(0 0 3px rgba(255, 178, 38, .85))
        drop-shadow(0 0 7px rgba(255, 49, 0, .32));
    transition:
        transform .28s cubic-bezier(.34, 1.56, .64, 1),
        filter .28s ease;
}

.shura-trend-fixed-footer a:hover img {
    transform:
        translateY(-2px)
        scale(1.16)
        rotate(-4deg);
    filter:
        drop-shadow(0 0 5px rgba(255, 210, 80, 1))
        drop-shadow(0 0 10px rgba(255, 58, 0, .65))
        drop-shadow(0 0 18px rgba(255, 125, 0, .22));
}

/* =========================================================
   SPECIAL DAFTAR / ULTIMATE BUTTON
   ========================================================= */

.shura-trend-fixed-footer .tada {
    position: relative;
    height: 76px;
    margin-top: -25px;
    padding-top: 7px;
    color: #fff7e2;
    overflow: visible;
    clip-path: polygon(
        15px 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% calc(100% - 13px),
        calc(100% - 13px) 100%,
        13px 100%,
        0 calc(100% - 13px),
        0 15px
    );
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 198, 68, .26), transparent 36%),
        linear-gradient(
            145deg,
            #ff3f16 0%,
            #d31700 34%,
            #8f0900 68%,
            #3d0504 100%
        );
    border: 1px solid rgba(255, 204, 92, .88);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 192, .52),
        inset 0 -6px 13px rgba(65, 0, 0, .52),
        0 5px 0 #4f0500,
        0 10px 22px rgba(0, 0, 0, .5),
        0 0 17px rgba(255, 41, 0, .42),
        0 0 33px rgba(255, 121, 0, .16);
    animation: shuraUltimate 2.2s ease-in-out infinite;
}

/* Inner frame */
.shura-trend-fixed-footer .tada::before {
    content: "";
    position: absolute;
    inset: 5px;
    opacity: 1;
    pointer-events: none;
    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );
    background: linear-gradient(
        135deg,
        rgba(255, 245, 188, .13),
        transparent 34%,
        transparent 67%,
        rgba(255, 121, 0, .09)
    );
    border: 1px solid rgba(255, 231, 153, .25);
    filter: none;
}

/* Star effect */
.shura-trend-fixed-footer .tada::after {
    content: "✦";
    position: absolute;
    top: -13px;
    right: 8px;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    transform: none;
    color: #fff5b8;
    font-size: 15px;
    line-height: 1;
    background: none;
    text-shadow:
        0 0 4px #fff,
        0 0 8px #ffc12d,
        0 0 15px #ff3c00;
    animation: shuraStar 1.5s ease-in-out infinite;
}

.shura-trend-fixed-footer .tada img {
    position: relative;
    z-index: 3;
    width: 31px;
    height: 31px;
    padding: 3px;
    background: radial-gradient(
        circle,
        rgba(255, 242, 168, .14),
        transparent 68%
    );
    filter:
        drop-shadow(0 0 4px rgba(255, 241, 158, .95))
        drop-shadow(0 0 9px rgba(255, 152, 24, .85))
        drop-shadow(0 0 16px rgba(255, 42, 0, .4));
}

.shura-trend-fixed-footer .tada:hover {
    transform:
        translateY(-7px)
        scale(1.025);
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 223, 116, .35), transparent 39%),
        linear-gradient(
            145deg,
            #ff5b25 0%,
            #ee1d05 34%,
            #a90a00 68%,
            #550604 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 207, .7),
        inset 0 -6px 13px rgba(65, 0, 0, .45),
        0 7px 0 #4f0500,
        0 14px 27px rgba(0, 0, 0, .55),
        0 0 25px rgba(255, 47, 0, .65),
        0 0 48px rgba(255, 146, 0, .26);
}

.shura-trend-fixed-footer .tada:hover img {
    transform:
        translateY(-1px)
        scale(1.16)
        rotate(5deg);
}

/* =========================================================
   CINEMATIC KATANA SLASH
   ========================================================= */

.samurai-slash {
    position: absolute;
    top: -62px;
    left: -50%;
    width: 42%;
    height: 200px;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transform: rotate(-15deg) skewX(-18deg);
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 24%,
        rgba(255, 94, 10, .07) 34%,
        rgba(255, 190, 47, .32) 43%,
        rgba(255, 255, 255, .95) 49%,
        #ffffff 50%,
        rgba(255, 211, 97, .92) 52%,
        rgba(255, 57, 0, .48) 59%,
        transparent 72%
    );
    filter:
        drop-shadow(0 0 4px #fff)
        drop-shadow(0 0 10px rgba(255, 180, 45, .9))
        drop-shadow(0 0 22px rgba(255, 44, 0, .65));
    animation: katanaSlashOne 6s cubic-bezier(.2, .7, .3, 1) infinite;
}

.samurai-slash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 3%;
    width: 95%;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        #fff1a4 20%,
        #fff 48%,
        #ffae1b 70%,
        transparent
    );
    box-shadow:
        0 0 5px #fff,
        0 0 10px #ffb51d,
        0 0 20px rgba(255, 40, 0, .9);
}

.samurai-slash::after {
    content: "";
    position: absolute;
    top: 55%;
    left: 5%;
    width: 90%;
    height: 25px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 62, 0, .08),
        rgba(255, 132, 0, .32),
        transparent
    );
    filter: blur(8px);
}

/* Slash kedua */
.samurai-slash-2 {
    position: absolute;
    top: -55px;
    right: -45%;
    width: 38%;
    height: 190px;
    z-index: 39;
    pointer-events: none;
    opacity: 0;
    transform: rotate(17deg) skewX(14deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 47, 0, .09),
        rgba(255, 181, 39, .4),
        rgba(255, 255, 255, .95),
        rgba(255, 201, 69, .45),
        transparent
    );
    filter:
        drop-shadow(0 0 4px #fff)
        drop-shadow(0 0 9px rgba(255, 177, 35, .9))
        drop-shadow(0 0 20px rgba(255, 42, 0, .55));
    animation: katanaSlashTwo 8s cubic-bezier(.2, .7, .3, 1) infinite;
}

/* =========================================================
   SHURIKEN
   ========================================================= */

.shuriken {
    position: absolute;
    top: 11px;
    left: -60px;
    width: 28px;
    height: 28px;
    z-index: 35;
    pointer-events: none;
    opacity: 0;
    animation: shurikenFly 7.5s linear infinite;
}

.shuriken::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #fff2a5 0%,
        #ffba28 18%,
        #9d1306 47%,
        #1b0506 68%,
        #ff8214 100%
    );
    clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 24%,
        71% 50%,
        100% 76%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 76%,
        29% 50%,
        0% 24%,
        39% 35%
    );
    filter:
        drop-shadow(0 0 4px rgba(255, 197, 57, .95))
        drop-shadow(0 0 9px rgba(255, 56, 0, .75));
}

.shuriken::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #060608;
    border: 2px solid #ffc02d;
    box-shadow:
        inset 0 0 4px #ff7213,
        0 0 5px rgba(255, 111, 0, .8);
}

/* Shuriken kedua */
.shuriken-2 {
    position: absolute;
    right: -55px;
    bottom: 9px;
    width: 20px;
    height: 20px;
    z-index: 34;
    pointer-events: none;
    opacity: 0;
    animation: shurikenFlyReverse 10s linear infinite;
}

.shuriken-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #ffed8b,
        #ff8a16,
        #710600,
        #ffc128
    );
    clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 24%,
        71% 50%,
        100% 76%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 76%,
        29% 50%,
        0% 24%,
        39% 35%
    );
    filter:
        drop-shadow(0 0 4px #ffbb24)
        drop-shadow(0 0 7px rgba(255, 47, 0, .7));
}

.shuriken-2::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #070709;
    border: 1px solid #ffbd25;
}

/* =========================================================
   SLASH IMPACT FLASH
   ========================================================= */

.slash-impact {
    position: absolute;
    top: 0;
    left: 50%;
    width: 260px;
    height: 100%;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 224, .55) 0%,
        rgba(255, 186, 52, .27) 25%,
        rgba(255, 41, 0, .09) 50%,
        transparent 72%
    );
    animation: slashImpactFlash 6s ease-in-out infinite;
}

/* =========================================================
   EMBER PARTICLES
   ========================================================= */

.ember {
    position: absolute;
    bottom: 5px;
    width: 4px;
    height: 4px;
    z-index: 25;
    pointer-events: none;
    border-radius: 50%;
    background: #ffbb29;
    box-shadow:
        0 0 5px #ff8c12,
        0 0 10px rgba(255, 42, 0, .75);
    opacity: 0;
}

.ember-1 {
    left: 15%;
    animation: emberRise 3.6s ease-out infinite;
}

.ember-2 {
    left: 34%;
    animation: emberRise 4.2s ease-out .8s infinite;
}

.ember-3 {
    left: 68%;
    animation: emberRise 3.8s ease-out 1.4s infinite;
}

.ember-4 {
    left: 86%;
    animation: emberRise 4.6s ease-out 2s infinite;
}

/* =========================================================
   DIFFERENT BUTTON DETAIL
   ========================================================= */

.shura-trend-fixed-footer a:nth-of-type(1) {
    background: linear-gradient(
        145deg,
        rgba(52, 12, 11, .98),
        rgba(15, 9, 10, .99)
    );
}

.shura-trend-fixed-footer a:nth-of-type(2) {
    background: linear-gradient(
        145deg,
        rgba(43, 18, 9, .98),
        rgba(13, 10, 8, .99)
    );
}

.shura-trend-fixed-footer a:nth-of-type(4) {
    background: linear-gradient(
        145deg,
        rgba(46, 12, 9, .98),
        rgba(13, 9, 9, .99)
    );
}

.shura-trend-fixed-footer a:nth-of-type(5) {
    background: linear-gradient(
        145deg,
        rgba(40, 12, 13, .98),
        rgba(11, 9, 11, .99)
    );
}

/* =========================================================
   CLICK
   ========================================================= */

.shura-trend-fixed-footer a:active {
    transform:
        translateY(2px)
        scale(.96);
}

.shura-trend-fixed-footer .tada:active {
    transform:
        translateY(1px)
        scale(.97);
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, .3),
        0 2px 0 #4f0500,
        0 5px 12px rgba(0, 0, 0, .4);
}

/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes shuraUltimate {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 192, .52),
            inset 0 -6px 13px rgba(65, 0, 0, .52),
            0 5px 0 #4f0500,
            0 10px 22px rgba(0, 0, 0, .5),
            0 0 14px rgba(255, 41, 0, .34),
            0 0 27px rgba(255, 121, 0, .12);
    }

    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 192, .62),
            inset 0 -6px 13px rgba(65, 0, 0, .48),
            0 5px 0 #4f0500,
            0 10px 22px rgba(0, 0, 0, .5),
            0 0 28px rgba(255, 41, 0, .75),
            0 0 52px rgba(255, 121, 0, .3);
    }
}

@keyframes shuraStar {
    0%,
    100% {
        opacity: .45;
        transform:
            scale(.7)
            rotate(0deg);
    }

    50% {
        opacity: 1;
        transform:
            scale(1.35)
            rotate(90deg);
    }
}

@keyframes shuraBladeGlow {
    0%,
    100% {
        opacity: .72;
        filter: brightness(.9);
    }

    50% {
        opacity: 1;
        filter: brightness(1.35);
    }
}

@keyframes katanaSlashOne {
    0%,
    66% {
        left: -50%;
        opacity: 0;
    }

    67% {
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    72% {
        left: 40%;
        opacity: 1;
    }

    76% {
        left: 115%;
        opacity: .8;
    }

    78%,
    100% {
        left: 125%;
        opacity: 0;
    }
}

@keyframes katanaSlashTwo {
    0%,
    81% {
        right: -45%;
        opacity: 0;
    }

    82% {
        opacity: .95;
    }

    87% {
        right: 45%;
        opacity: .9;
    }

    91% {
        right: 115%;
        opacity: .6;
    }

    93%,
    100% {
        right: 125%;
        opacity: 0;
    }
}

@keyframes slashImpactFlash {
    0%,
    68% {
        opacity: 0;
        transform:
            translateX(-50%)
            scaleX(.15);
    }

    71% {
        opacity: .8;
        transform:
            translateX(-50%)
            scaleX(.7);
    }

    75% {
        opacity: .3;
        transform:
            translateX(-50%)
            scaleX(1.8);
    }

    79%,
    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            scaleX(2.3);
    }
}

@keyframes shurikenFly {
    0%,
    18% {
        left: -60px;
        top: 16px;
        opacity: 0;
        transform:
            rotate(0deg)
            scale(.7);
    }

    19% {
        opacity: 1;
    }

    35% {
        top: 4px;
    }

    52% {
        top: 24px;
    }

    69% {
        top: 8px;
    }

    79% {
        left: calc(100% + 60px);
        opacity: 1;
        transform:
            rotate(1800deg)
            scale(1);
    }

    80%,
    100% {
        left: calc(100% + 60px);
        opacity: 0;
    }
}

@keyframes shurikenFlyReverse {
    0%,
    43% {
        right: -55px;
        bottom: 7px;
        opacity: 0;
        transform:
            rotate(0deg)
            scale(.7);
    }

    44% {
        opacity: .9;
    }

    58% {
        bottom: 27px;
    }

    74% {
        bottom: 6px;
    }

    89% {
        right: calc(100% + 55px);
        bottom: 18px;
        opacity: .85;
        transform:
            rotate(-1440deg)
            scale(1);
    }

    90%,
    100% {
        right: calc(100% + 55px);
        opacity: 0;
    }
}

@keyframes emberRise {
    0% {
        opacity: 0;
        transform:
            translateY(10px)
            translateX(0)
            scale(.5);
    }

    20% {
        opacity: 1;
    }

    60% {
        opacity: .8;
        transform:
            translateY(-32px)
            translateX(8px)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translateY(-70px)
            translateX(-7px)
            scale(.25);
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 500px) {
    .shura-trend-fixed-footer {
        gap: 3px;
        padding: 8px 4px 7px;
    }

    .shura-trend-fixed-footer a {
        height: 54px;
        padding: 4px 2px;
        font-size: 9px;
        letter-spacing: .15px;
        clip-path: polygon(
            8px 0,
            calc(100% - 8px) 0,
            100% 8px,
            100% calc(100% - 7px),
            calc(100% - 7px) 100%,
            7px 100%,
            0 calc(100% - 7px),
            0 8px
        );
    }

    .shura-trend-fixed-footer img {
        width: 22px;
        height: 22px;
        padding: 3px;
    }

    .shura-trend-fixed-footer .tada {
        height: 66px;
        margin-top: -21px;
    }

    .shura-trend-fixed-footer .tada img {
        width: 27px;
        height: 27px;
    }

    .shura-trend-fixed-footer .tada::after {
        top: -11px;
        right: 5px;
        font-size: 13px;
    }

    .samurai-slash {
        width: 65%;
        height: 150px;
        top: -45px;
    }

    .samurai-slash-2 {
        width: 58%;
        height: 150px;
        top: -43px;
    }

    .shuriken {
        width: 23px;
        height: 23px;
    }

    .shuriken::after {
        top: 7px;
        left: 7px;
        width: 9px;
        height: 9px;
    }

    .slash-impact {
        width: 150px;
    }
}

@media (max-width: 360px) {
    .shura-trend-fixed-footer {
        gap: 2px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .shura-trend-fixed-footer a {
        height: 51px;
        font-size: 8px;
    }

    .shura-trend-fixed-footer img {
        width: 20px;
        height: 20px;
    }

    .shura-trend-fixed-footer .tada {
        height: 62px;
        margin-top: -18px;
    }

    .shura-trend-fixed-footer .tada img {
        width: 25px;
        height: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shura-trend-fixed-footer::before,
    .shura-trend-fixed-footer .tada,
    .shura-trend-fixed-footer .tada::after,
    .samurai-slash,
    .samurai-slash-2,
    .shuriken,
    .shuriken-2,
    .slash-impact,
    .ember {
        animation: none;
    }

    .samurai-slash,
    .samurai-slash-2,
    .shuriken,
    .shuriken-2,
    .slash-impact,
    .ember {
        display: none;
    }

    .shura-trend-fixed-footer a,
    .shura-trend-fixed-footer img {
        transition: none;
    }
}

/* =========================================================
   SONTOTO — SHOGUN ANIME GAMING POPUP
   BLACK • CRIMSON • GOLD • EMBER
   ========================================================= */

.sontoto {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: transparent;
    color: #fff;
}

/* =========================================================
   OVERLAY
   ========================================================= */

.popup-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 38, 0, .20), transparent 32%),
        radial-gradient(circle at 22% 80%, rgba(255, 133, 0, .08), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(121, 0, 0, .13), transparent 28%),
        rgba(3, 3, 5, .86);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    animation: shogunOverlayIn .35s ease both;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.popup-container {
    position: relative;
    width: min(92vw, 430px);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    isolation: isolate;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 18px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .012) 0,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px,
            transparent 10px
        ),
        linear-gradient(
            180deg,
            rgba(39, 4, 5, .99) 0%,
            rgba(17, 6, 7, .99) 56%,
            rgba(6, 6, 8, 1) 100%
        );
    border: 1px solid rgba(255, 92, 30, .72);
    box-shadow:
        0 35px 90px rgba(0, 0, 0, .86),
        0 0 0 1px rgba(255, 190, 55, .08),
        0 0 24px rgba(255, 34, 0, .28),
        0 0 65px rgba(124, 0, 0, .24),
        inset 0 0 30px rgba(255, 0, 0, .035);
    animation:
        shogunPopupEntry .7s cubic-bezier(.16, 1, .3, 1) both,
        shogunPopupPulse 4s ease-in-out .8s infinite;
}

.popup-container::-webkit-scrollbar {
    display: none;
}

/* HUD grid */
.popup-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
    opacity: .5;
}

/* Moving light */
.popup-container::after {
    content: "";
    position: absolute;
    top: -130%;
    left: -60%;
    width: 34%;
    height: 340%;
    z-index: 18;
    pointer-events: none;
    transform: rotate(20deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .02),
        rgba(255, 202, 80, .18),
        rgba(255, 255, 255, .05),
        transparent
    );
    filter: blur(2px);
    animation: shogunSweep 7s ease-in-out infinite;
}

/* =========================================================
   BANNER
   ========================================================= */

.popup-image {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    z-index: 1;
    border-radius: 17px 17px 0 0;
    border-bottom: 1px solid rgba(255, 61, 19, .72);
    box-shadow:
        0 15px 34px rgba(0, 0, 0, .68),
        0 5px 22px rgba(255, 20, 0, .16);
    filter:
        saturate(1.08)
        contrast(1.045);
}

/* =========================================================
   SHOGUN FRAME
   ========================================================= */

.luxury-border {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    border-radius: 18px;
    border: 1px solid rgba(255, 76, 24, .32);
    box-shadow:
        inset 0 0 0 1px rgba(255, 189, 52, .035),
        inset 0 0 25px rgba(255, 0, 0, .05);
}

/* Corner kiri atas */
.luxury-border::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 88px;
    height: 88px;
    border-top: 3px solid #ff481c;
    border-left: 3px solid #ff481c;
    border-radius: 18px 0 0 0;
    filter:
        drop-shadow(0 0 5px rgba(255, 53, 0, .8))
        drop-shadow(0 0 12px rgba(255, 138, 0, .26));
}

/* Corner kanan bawah */
.luxury-border::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 88px;
    height: 88px;
    border-right: 3px solid #ff9d1c;
    border-bottom: 3px solid #ff9d1c;
    border-radius: 0 0 18px 0;
    filter:
        drop-shadow(0 0 5px rgba(255, 122, 0, .72))
        drop-shadow(0 0 12px rgba(255, 41, 0, .2));
}

/* =========================================================
   BUTTON AREA
   ========================================================= */

.popup-buttons {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 21px 18px 10px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 40, 0, .14), transparent 52%),
        linear-gradient(180deg, rgba(70, 3, 4, .5), rgba(7, 7, 9, .05));
}

.popup-buttons::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #ff3213,
        #ffb826,
        #fff1a4,
        #ffb826,
        #ff3213,
        transparent
    );
    box-shadow:
        0 0 7px rgba(255, 50, 0, .7),
        0 0 15px rgba(255, 147, 0, .25);
}

/* =========================================================
   LOGIN / DAFTAR — MECHA BUTTONS
   ========================================================= */

.popup-buttons a {
    position: relative;
    width: 100%;
    min-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 20px;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    color: #fff4e6;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    clip-path: polygon(
        13px 0,
        calc(100% - 13px) 0,
        100% 13px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 13px
    );
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 212, 100, .18), transparent 42%),
        linear-gradient(
            145deg,
            #ff3d17 0%,
            #d91702 35%,
            #8b0800 70%,
            #420403 100%
        );
    border: 1px solid rgba(255, 170, 59, .85);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 192, .48),
        inset 0 -6px 12px rgba(66, 0, 0, .48),
        0 5px 0 #500400,
        0 10px 20px rgba(0, 0, 0, .42),
        0 0 18px rgba(255, 38, 0, .25);
    text-shadow:
        0 2px 2px rgba(0, 0, 0, .9),
        0 0 8px rgba(255, 193, 76, .22);
    transition:
        transform .24s ease,
        filter .24s ease,
        box-shadow .24s ease;
}

/* HUD inner frame */
.popup-buttons a::after {
    content: "";
    position: absolute;
    inset: 4px;
    pointer-events: none;
    clip-path: polygon(
        9px 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 9px
    );
    border: 1px solid rgba(255, 235, 172, .16);
}

/* Sword shine */
.popup-buttons a::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -55%;
    width: 28%;
    height: 190%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .7),
        rgba(255, 219, 121, .45),
        transparent
    );
    transform: rotate(17deg);
    transition: left .7s ease;
}

.popup-buttons a:hover {
    transform: translateY(-3px);
    filter: brightness(1.13) saturate(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 210, .62),
        inset 0 -6px 12px rgba(66, 0, 0, .42),
        0 7px 0 #500400,
        0 15px 26px rgba(0, 0, 0, .46),
        0 0 28px rgba(255, 42, 0, .42),
        0 0 46px rgba(255, 125, 0, .13);
}

.popup-buttons a:hover::before {
    left: 135%;
}

/* DAFTAR GOLD / LEGENDARY */
.popup-buttons a:nth-child(2) {
    color: #2d1100;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 223, .5), transparent 39%),
        linear-gradient(
            145deg,
            #fff29d 0%,
            #ffc42e 28%,
            #e88a00 67%,
            #894000 100%
        );
    border-color: rgba(255, 245, 183, .98);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -6px 11px rgba(108, 48, 0, .35),
        0 5px 0 #6a3400,
        0 10px 20px rgba(0, 0, 0, .42),
        0 0 18px rgba(255, 166, 0, .3);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .44),
        0 0 5px rgba(255, 197, 62, .3);
    animation: legendaryButton 2.5s ease-in-out infinite;
}

.popup-buttons a:nth-child(2):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -6px 11px rgba(108, 48, 0, .3),
        0 7px 0 #6a3400,
        0 15px 28px rgba(0, 0, 0, .46),
        0 0 28px rgba(255, 187, 30, .58),
        0 0 50px rgba(255, 90, 0, .16);
}

.popup-buttons a:active {
    transform: translateY(4px) scale(.985);
}

/* =========================================================
   FOOTER TEXT
   ========================================================= */

.popup-footer {
    position: relative;
    z-index: 20;
    margin: 4px 18px 16px;
    padding: 13px 14px;
    color: rgba(255, 241, 226, .66);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .25px;
    clip-path: polygon(
        9px 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% calc(100% - 9px),
        calc(100% - 9px) 100%,
        9px 100%,
        0 calc(100% - 9px),
        0 9px
    );
    background:
        linear-gradient(
            145deg,
            rgba(27, 14, 15, .97),
            rgba(8, 8, 10, .99)
        );
    border: 1px solid rgba(255, 74, 24, .17);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 9px 20px rgba(0, 0, 0, .32);
}

.popup-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 54%;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        #ff3215,
        #ffc22b,
        #ff3215,
        transparent
    );
    box-shadow: 0 0 8px rgba(255, 49, 0, .45);
}

.popup-footer span {
    color: #ffbd2c !important;
    text-shadow:
        0 0 4px rgba(255, 183, 30, .6),
        0 0 9px rgba(255, 63, 0, .25) !important;
}

/* =========================================================
   CLOSE BUTTON — SHOGUN PLATE
   ========================================================= */

.close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    clip-path: polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 8px
    );
    background:
        linear-gradient(
            145deg,
            rgba(44, 10, 9, .97),
            rgba(7, 7, 9, .99)
        );
    border: 1px solid rgba(255, 154, 45, .9);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, .62),
        0 0 13px rgba(255, 47, 0, .32),
        inset 0 0 10px rgba(255, 126, 0, .06);
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.close-btn::before,
.close-btn::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    border-radius: 4px;
    background: linear-gradient(90deg, #fff, #ffd86a);
    box-shadow:
        0 0 5px #fff,
        0 0 9px rgba(255, 122, 0, .5);
}

.close-btn::before {
    transform: rotate(45deg);
}

.close-btn::after {
    transform: rotate(-45deg);
}

.close-btn:hover {
    transform: rotate(90deg) scale(1.08);
    background:
        linear-gradient(
            145deg,
            #ff421c,
            #820700
        );
    box-shadow:
        0 6px 17px rgba(0, 0, 0, .56),
        0 0 21px rgba(255, 48, 0, .58),
        0 0 38px rgba(255, 143, 0, .16);
}

/* =========================================================
   EMBER PARTICLES
   ========================================================= */

.gold-particle {
    position: absolute;
    z-index: 15;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50%;
    pointer-events: none;
    background: #ffc12e;
    box-shadow:
        0 0 5px #ff8d14,
        0 0 10px rgba(255, 41, 0, .8);
    animation: shogunEmber 6s ease-in-out infinite;
}

/* =========================================================
   SHURIKEN
   ========================================================= */

.popup-shuriken {
    position: absolute;
    top: 23%;
    left: -55px;
    width: 30px;
    height: 30px;
    z-index: 45;
    pointer-events: none;
    opacity: 0;
    animation: popupShurikenFly 7.5s linear infinite;
}

.popup-shuriken::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #fff5b3 0%,
        #ffc02e 18%,
        #a81708 45%,
        #1a0607 68%,
        #ff8314 100%
    );
    clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 24%,
        71% 50%,
        100% 76%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 76%,
        29% 50%,
        0% 24%,
        39% 35%
    );
    filter:
        drop-shadow(0 0 4px #ffc332)
        drop-shadow(0 0 10px rgba(255, 48, 0, .75));
}

.popup-shuriken::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #050507;
    border: 2px solid #ffbb22;
}

/* Second shuriken */
.popup-shuriken-2 {
    position: absolute;
    right: -55px;
    top: 60%;
    width: 21px;
    height: 21px;
    z-index: 44;
    pointer-events: none;
    opacity: 0;
    animation: popupShurikenReverse 9.5s linear infinite;
}

.popup-shuriken-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #ffe471,
        #ff8d17,
        #710700,
        #ffbd29
    );
    clip-path: polygon(
        50% 0%,
        61% 35%,
        100% 24%,
        71% 50%,
        100% 76%,
        61% 65%,
        50% 100%,
        39% 65%,
        0% 76%,
        29% 50%,
        0% 24%,
        39% 35%
    );
    filter: drop-shadow(0 0 6px rgba(255, 107, 0, .8));
}

/* =========================================================
   SAMURAI SLASH
   ========================================================= */

.popup-katana-slash {
    position: absolute;
    top: 10%;
    left: -75%;
    width: 65%;
    height: 250px;
    z-index: 48;
    pointer-events: none;
    opacity: 0;
    transform: rotate(-22deg) skewX(-15deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 61, 0, .05),
        rgba(255, 196, 62, .30),
        rgba(255, 255, 255, .96),
        #fff,
        rgba(255, 191, 46, .82),
        rgba(255, 44, 0, .38),
        transparent
    );
    filter:
        drop-shadow(0 0 5px #fff)
        drop-shadow(0 0 11px rgba(255, 183, 35, .9))
        drop-shadow(0 0 24px rgba(255, 38, 0, .62));
    animation: popupKatanaSlash 6.8s cubic-bezier(.2, .7, .3, 1) infinite;
}

.popup-katana-slash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        #fff2a6,
        #fff,
        #ffae18,
        transparent
    );
    box-shadow:
        0 0 5px white,
        0 0 10px #ffae1c,
        0 0 20px rgba(255, 42, 0, .8);
}

/* Slash reverse */
.popup-katana-slash-2 {
    position: absolute;
    top: 34%;
    right: -70%;
    width: 58%;
    height: 230px;
    z-index: 47;
    pointer-events: none;
    opacity: 0;
    transform: rotate(19deg) skewX(13deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 56, 0, .08),
        rgba(255, 183, 37, .36),
        rgba(255, 255, 255, .95),
        rgba(255, 188, 48, .45),
        transparent
    );
    filter:
        drop-shadow(0 0 5px #fff)
        drop-shadow(0 0 10px rgba(255, 173, 29, .85))
        drop-shadow(0 0 22px rgba(255, 36, 0, .52));
    animation: popupKatanaReverse 9s cubic-bezier(.2, .7, .3, 1) infinite;
}

/* =========================================================
   SLASH IMPACT
   ========================================================= */

.popup-slash-impact {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 220px;
    height: 55%;
    z-index: 42;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 222, .48),
        rgba(255, 187, 47, .22) 28%,
        rgba(255, 44, 0, .08) 52%,
        transparent 72%
    );
    animation: popupSlashImpact 6.8s ease-in-out infinite;
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes shogunOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes shogunPopupEntry {
    0% {
        opacity: 0;
        transform:
            translateY(35px)
            scale(.84);
        filter:
            blur(7px)
            brightness(.6);
    }

    60% {
        opacity: 1;
        transform:
            translateY(-5px)
            scale(1.015);
        filter:
            blur(0)
            brightness(1.08);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
        filter:
            blur(0)
            brightness(1);
    }
}

@keyframes shogunPopupPulse {
    0%,
    100% {
        box-shadow:
            0 35px 90px rgba(0, 0, 0, .86),
            0 0 0 1px rgba(255, 190, 55, .08),
            0 0 21px rgba(255, 34, 0, .23),
            0 0 55px rgba(124, 0, 0, .18);
    }

    50% {
        box-shadow:
            0 35px 90px rgba(0, 0, 0, .88),
            0 0 0 1px rgba(255, 190, 55, .13),
            0 0 34px rgba(255, 34, 0, .42),
            0 0 80px rgba(124, 0, 0, .28);
    }
}

@keyframes shogunSweep {
    0%,
    18% {
        left: -65%;
        opacity: 0;
    }

    28% {
        opacity: .65;
    }

    53% {
        left: 155%;
        opacity: .45;
    }

    54%,
    100% {
        left: 155%;
        opacity: 0;
    }
}

@keyframes legendaryButton {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter:
            brightness(1.08)
            saturate(1.08);
    }
}

@keyframes shogunEmber {
    0% {
        opacity: 0;
        transform:
            translateY(30px)
            translateX(0)
            scale(.4);
    }

    16% {
        opacity: .85;
    }

    55% {
        transform:
            translateY(-55px)
            translateX(10px)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translateY(-140px)
            translateX(-9px)
            scale(.25);
    }
}

@keyframes popupShurikenFly {
    0%,
    16% {
        left: -55px;
        top: 24%;
        opacity: 0;
        transform:
            rotate(0deg)
            scale(.7);
    }

    17% {
        opacity: 1;
    }

    33% {
        top: 18%;
    }

    50% {
        top: 34%;
    }

    68% {
        top: 23%;
    }

    78% {
        left: calc(100% + 55px);
        opacity: .95;
        transform:
            rotate(1800deg)
            scale(1);
    }

    79%,
    100% {
        opacity: 0;
        left: calc(100% + 55px);
    }
}

@keyframes popupShurikenReverse {
    0%,
    45% {
        right: -55px;
        top: 62%;
        opacity: 0;
        transform:
            rotate(0deg)
            scale(.7);
    }

    46% {
        opacity: .9;
    }

    61% {
        top: 53%;
    }

    75% {
        top: 70%;
    }

    89% {
        right: calc(100% + 55px);
        opacity: .8;
        transform:
            rotate(-1440deg)
            scale(1);
    }

    90%,
    100% {
        right: calc(100% + 55px);
        opacity: 0;
    }
}

@keyframes popupKatanaSlash {
    0%,
    65% {
        left: -75%;
        opacity: 0;
    }

    66% {
        opacity: 0;
    }

    67% {
        opacity: 1;
    }

    72% {
        left: 40%;
        opacity: 1;
    }

    77% {
        left: 120%;
        opacity: .55;
    }

    79%,
    100% {
        left: 130%;
        opacity: 0;
    }
}

@keyframes popupKatanaReverse {
    0%,
    82% {
        right: -70%;
        opacity: 0;
    }

    83% {
        opacity: .95;
    }

    88% {
        right: 40%;
        opacity: .9;
    }

    92% {
        right: 120%;
        opacity: .45;
    }

    94%,
    100% {
        right: 130%;
        opacity: 0;
    }
}

@keyframes popupSlashImpact {
    0%,
    67% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(.2);
    }

    71% {
        opacity: .7;
        transform:
            translateX(-50%)
            scale(.9);
    }

    75% {
        opacity: .22;
        transform:
            translateX(-50%)
            scale(1.6);
    }

    79%,
    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(2);
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .popup-overlay {
        padding: 9px;
    }

    .popup-container {
        width: min(95vw, 385px);
        max-height: 95vh;
        border-radius: 16px;
    }

    .popup-image {
        border-radius: 15px 15px 0 0;
    }

    .luxury-border {
        border-radius: 16px;
    }

    .popup-buttons {
        gap: 10px;
        padding: 17px 14px 8px;
    }

    .popup-buttons a {
        min-height: 48px;
        padding: 13px;
        font-size: 13px;
        letter-spacing: 1.2px;
    }

    .popup-footer {
        margin: 4px 14px 13px;
        padding: 11px;
        font-size: 9px;
    }

    .close-btn {
        top: 9px;
        right: 9px;
        width: 32px;
        height: 32px;
    }

    .close-btn::before,
    .close-btn::after {
        width: 14px;
    }

    .popup-katana-slash {
        width: 92%;
        height: 180px;
    }

    .popup-katana-slash-2 {
        width: 82%;
        height: 180px;
    }

    .popup-shuriken {
        width: 24px;
        height: 24px;
    }

    .popup-shuriken::after {
        inset: 7px;
    }
}

@media (max-width: 360px) {
    .popup-container {
        width: 96vw;
    }

    .popup-buttons {
        padding-left: 11px;
        padding-right: 11px;
    }

    .popup-buttons a {
        min-height: 45px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup-overlay,
    .popup-container,
    .popup-container::after,
    .popup-buttons a:nth-child(2),
    .gold-particle,
    .popup-shuriken,
    .popup-shuriken-2,
    .popup-katana-slash,
    .popup-katana-slash-2,
    .popup-slash-impact {
        animation: none !important;
    }

    .popup-shuriken,
    .popup-shuriken-2,
    .popup-katana-slash,
    .popup-katana-slash-2,
    .popup-slash-impact {
        display: none;
    }
}