@font-face {
    font-family: "Lilita One Local";
    src: url("../jogar/assets/font/lilita-one.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

.power-button {
    --power-top: #35baf7;
    --power-middle: #198fe9;
    --power-bottom: #2365db;
    --power-lip: #1749a9;
    --power-outline: #14263d;
    --power-edge-width: 1px;
    --power-base: var(--power-outline);
    --power-text-outline: #25354a;
    --power-highlight: rgba(255, 255, 255, 0.18);
    --power-highlight-fade: rgba(255, 255, 255, 0.04);
    --power-inset-top: rgba(255, 255, 255, 0.14);
    --power-inset-bottom: rgba(8, 28, 48, 0.1);
    --power-height: 54px;
    --power-padding-x: 28px;
    --power-padding-top: 9px;
    --power-padding-bottom: 11px;
    --power-radius: 13px;
    --power-border: 0px;
    --power-font-size: 25px;
    --power-lip-offset: 5px;
    --power-base-offset: 7px;
    --power-shadow-blur: 12px;
    position: relative;
    display: inline-grid;
    min-width: 0;
    min-height: var(--power-height);
    place-items: center;
    padding: var(--power-padding-top) var(--power-padding-x) var(--power-padding-bottom);
    border: var(--power-border) solid var(--power-outline);
    border-radius: var(--power-radius);
    background:
        linear-gradient(180deg, var(--power-highlight) 0%, var(--power-highlight-fade) 25%, rgba(255, 255, 255, 0) 43%),
        linear-gradient(180deg, var(--power-top) 0%, var(--power-middle) 53%, var(--power-bottom) 100%);
    color: #fff;
    font-family: "Lilita One Local", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    font-size: var(--power-font-size);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.015em;
    text-align: center;
    text-transform: uppercase;
    text-shadow:
        -1px -1px 0 var(--power-text-outline),
        1px -1px 0 var(--power-text-outline),
        -1px 1px 0 var(--power-text-outline),
        1px 1px 0 var(--power-text-outline),
        0 2px 0 var(--power-text-outline);
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 3px) var(--power-shadow-blur) rgba(4, 12, 28, 0.28);
    cursor: pointer;
    transform: translateY(0);
    transition: filter 140ms ease, transform 100ms ease, box-shadow 100ms ease;
    -webkit-tap-highlight-color: transparent;
}

.power-button:hover:not(:disabled) {
    filter: brightness(1.035) saturate(1.02);
}

.power-button:active:not(:disabled),
.power-button.is-pressed:not(:disabled) {
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 1px 0 var(--power-lip),
        0 2px 0 var(--power-base),
        0 4px 7px rgba(4, 12, 28, 0.2);
    transform: translateY(calc(var(--power-base-offset) - 2px));
}

.power-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 4px;
}

.power-button:disabled,
.power-button[aria-disabled="true"] {
    cursor: default;
    filter: grayscale(0.5) brightness(0.74);
    opacity: 0.72;
}

.power-button--yellow {
    --power-top: #ffda43;
    --power-middle: #ffc735;
    --power-bottom: #ffb124;
    --power-lip: #d97016;
    --power-outline: rgba(28, 37, 54, 0.78);
    --power-base: #172135;
    --power-text-outline: #202737;
    --power-highlight: rgba(255, 255, 255, 0.035);
    --power-highlight-fade: rgba(255, 255, 255, 0.01);
    --power-inset-top: transparent;
    --power-inset-bottom: transparent;
}

.power-button--green {
    --power-top: #9bed31;
    --power-middle: #5fd51a;
    --power-bottom: #2daf0b;
    --power-lip: #197918;
}

.power-button--blue {
    --power-top: #35baf7;
    --power-middle: #198fe9;
    --power-bottom: #2365db;
    --power-lip: #1749a9;
}

/* Power Clean keeps the component's depth and pressed feedback while reducing
   the outline, text relief and external shadow for conversion forms. */
.power-button--clean {
    --power-edge-width: 0.5px;
    --power-lip-offset: 3px;
    --power-base-offset: 4px;
    --power-shadow-blur: 8px;
    --power-highlight: rgba(255, 255, 255, 0.11);
    --power-highlight-fade: rgba(255, 255, 255, 0.025);
    --power-inset-top: rgba(255, 255, 255, 0.13);
    --power-inset-bottom: rgba(8, 48, 20, 0.08);
    text-shadow:
        0 1px 0 rgba(15, 68, 27, 0.68),
        0 2px 2px rgba(8, 45, 18, 0.2);
}

.modal-card--register .power-button--register-clean {
    --power-top: #50bf44;
    --power-middle: #49b83f;
    --power-bottom: #43ad39;
    --power-lip: #318f30;
    --power-outline: rgba(31, 91, 36, 0.48);
    --power-base: #287829;
    --power-text-outline: rgba(15, 68, 27, 0.68);
    --power-height: 52px;
    --power-padding-x: 24px;
    --power-padding-top: 8px;
    --power-padding-bottom: 9px;
    --power-radius: 8px;
    --power-font-size: 18px;
    width: 100%;
    border: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 3px) var(--power-shadow-blur) rgba(7, 47, 19, 0.17);
}

.modal-card--register .power-button--register-clean:hover:not(:active):not(.is-pressed):not(:disabled) {
    transform: translateY(0);
}

.modal-shell[data-modal="deposit"] .power-button--deposit-clean {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.54);
    --power-base: #0d6f2b;
    --power-text-outline: rgba(16, 72, 34, 0.64);
    --power-height: 54px;
    --power-padding-x: 24px;
    --power-padding-top: 8px;
    --power-padding-bottom: 9px;
    --power-radius: 10px;
    --power-font-size: 19px;
    width: 100%;
    border: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 3px) var(--power-shadow-blur) rgba(4, 36, 17, 0.2);
}

.modal-card--demo .power-button--demo-clean {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.5);
    --power-base: #0d6f2b;
    --power-text-outline: rgba(16, 72, 34, 0.64);
    --power-height: 56px;
    --power-padding-x: 26px;
    --power-padding-top: 8px;
    --power-padding-bottom: 10px;
    --power-radius: 14px;
    --power-font-size: 27px;
    width: min(100%, 286px);
    margin: 6px auto 0;
    border: 0;
    letter-spacing: 0.035em;
}

.modal-card--affiliate-demo .power-button--affiliate-demo-clean {
    --power-top: #ff2d2d;
    --power-middle: #f82929;
    --power-bottom: #f02424;
    --power-lip: #c51d1d;
    --power-outline: rgba(123, 12, 12, 0.38);
    --power-base: #8f1515;
    --power-text-outline: rgba(96, 11, 11, 0.62);
    --power-height: 60px;
    --power-padding-x: 28px;
    --power-padding-top: 8px;
    --power-padding-bottom: 10px;
    --power-radius: 9px;
    --power-font-size: clamp(25px, 2.8vw, 36px);
    width: min(100%, 326px);
    border: 0;
    text-shadow:
        0 1px 0 rgba(96, 11, 11, 0.62),
        0 2px 2px rgba(70, 7, 7, 0.2);
}

.modal-shell[data-modal="deposit"] .power-button--deposit-clean:hover:not(:active):not(.is-pressed):not(:disabled) {
    transform: translateY(0);
}

.modal-shell[data-modal="affiliate"] .power-button--affiliate-primary,
.modal-shell[data-modal="affiliate"] .power-button--affiliate-secondary {
    --power-height: 48px;
    --power-padding-x: 14px;
    --power-padding-top: 8px;
    --power-padding-bottom: 9px;
    --power-radius: 10px;
    --power-font-size: 15px;
    width: 100%;
    border: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.modal-shell[data-modal="affiliate"] .power-button--affiliate-primary {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.54);
    --power-base: #0d6f2b;
    --power-text-outline: rgba(16, 72, 34, 0.64);
}

.modal-shell[data-modal="affiliate"] .power-button--affiliate-secondary {
    --power-top: #3aa9ef;
    --power-middle: #238bd3;
    --power-bottom: #176db6;
    --power-lip: #10558f;
    --power-outline: rgba(9, 63, 105, 0.58);
    --power-base: #0b416f;
    --power-text-outline: rgba(7, 46, 79, 0.7);
}

.modal-shell[data-modal="affiliate"] .power-button--affiliate-primary:hover:not(:active):not(.is-pressed):not(:disabled),
.modal-shell[data-modal="affiliate"] .power-button--affiliate-secondary:hover:not(:active):not(.is-pressed):not(:disabled) {
    transform: translateY(0);
}

.modal-card--qr .power-button--qr-copy {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.54);
    --power-base: #0d6f2b;
    --power-text-outline: rgba(16, 72, 34, 0.64);
    --power-height: 48px;
    --power-padding-x: 20px;
    --power-padding-top: 8px;
    --power-padding-bottom: 9px;
    --power-radius: 10px;
    --power-font-size: 16px;
    width: 100%;
    border: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.modal-card--qr .power-button--qr-copy.is-copied {
    --power-top: #4fb8f6;
    --power-middle: #2b98df;
    --power-bottom: #1b75bf;
    --power-lip: #125990;
    --power-outline: rgba(8, 66, 110, 0.58);
    --power-base: #0b426f;
    --power-text-outline: rgba(7, 49, 82, 0.7);
}

.modal-card--qr .power-button--qr-copy:hover:not(:active):not(.is-pressed):not(:disabled) {
    transform: translateY(0);
}

.modal-card--qr .power-button--qr-success {
    --power-top: #3aa9ef;
    --power-middle: #238bd3;
    --power-bottom: #176db6;
    --power-lip: #10558f;
    --power-outline: rgba(9, 63, 105, 0.58);
    --power-base: #0b416f;
    --power-text-outline: rgba(7, 46, 79, 0.7);
    --power-height: 50px;
    --power-padding-x: 20px;
    --power-padding-top: 8px;
    --power-padding-bottom: 9px;
    --power-radius: 10px;
    --power-font-size: 17px;
    width: 100%;
    border: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.modal-card--qr .power-button--qr-success:hover:not(:active):not(.is-pressed):not(:disabled) {
    transform: translateY(0);
}

.top-strip .power-button--top-strip {
    --power-top: #ffffff;
    --power-middle: #fbfcfb;
    --power-bottom: #eef2ef;
    --power-lip: #d5ddd8;
    --power-outline: rgba(22, 55, 74, 0.2);
    --power-base: #bdc9c2;
    --power-height: 31px;
    --power-padding-x: 13px;
    --power-padding-top: 8px;
    --power-padding-bottom: 8px;
    --power-radius: 999px;
    --power-font-size: 12px;
    --power-lip-offset: 2px;
    --power-base-offset: 3px;
    --power-shadow-blur: 6px;
    --power-highlight: rgba(255, 255, 255, 0.22);
    --power-highlight-fade: rgba(255, 255, 255, 0.04);
    --power-inset-top: rgba(255, 255, 255, 0.5);
    --power-inset-bottom: rgba(23, 59, 78, 0.045);
    border: 0;
    background:
        linear-gradient(180deg, var(--power-highlight) 0%, var(--power-highlight-fade) 25%, rgba(255, 255, 255, 0) 43%),
        linear-gradient(180deg, var(--power-top) 0%, var(--power-middle) 53%, var(--power-bottom) 100%);
    font-family: inherit;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.78),
        0 1px 2px rgba(5, 34, 47, 0.1);
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 2px) var(--power-shadow-blur) var(--power-top-strip-shadow, rgba(7, 42, 57, 0.14));
}

@media (min-width: 992px) {
    .top-strip .power-button--top-strip {
        --power-height: 40px;
        --power-padding-x: 18px;
        --power-padding-top: 11px;
        --power-padding-bottom: 11px;
        --power-font-size: 15px;
    }
}

@media (max-width: 420px) {
    .top-strip .power-button--top-strip {
        --power-height: 28px;
        --power-padding-x: 12px;
        --power-padding-top: 7px;
        --power-padding-bottom: 7px;
        --power-font-size: 11px;
    }

    .app-header .header-register-trigger.power-button--header-register {
        --power-padding-x: 8px;
        --power-font-size: 12px;
    }

    .app-header .header-login-trigger.power-button--header-login {
        --power-padding-x: 8px;
        --power-font-size: 11px;
    }
}

.app-header .header-register-trigger.power-button--header-register {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.72);
    --power-base: #0d5f27;
    --power-text-outline: rgba(16, 72, 34, 0.72);
    --power-highlight: rgba(255, 255, 255, 0.12);
    --power-highlight-fade: rgba(255, 255, 255, 0.025);
    --power-inset-top: rgba(255, 255, 255, 0.15);
    --power-inset-bottom: rgba(8, 78, 28, 0.08);
    --power-height: 32px;
    --power-padding-x: 13px;
    --power-padding-top: 5px;
    --power-padding-bottom: 6px;
    --power-radius: 10px;
    --power-edge-width: 0.5px;
    --power-font-size: clamp(14px, 3.6vw, 16px);
    --power-lip-offset: 3px;
    --power-base-offset: 4px;
    --power-shadow-blur: 8px;
    border: 0;
    background:
        linear-gradient(180deg, var(--power-highlight) 0%, var(--power-highlight-fade) 25%, rgba(255, 255, 255, 0) 43%),
        linear-gradient(180deg, var(--power-top) 0%, var(--power-middle) 53%, var(--power-bottom) 100%);
    text-shadow:
        0 1px 0 rgba(5, 56, 20, 0.72),
        0 2px 2px rgba(5, 48, 18, 0.34);
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 3px) var(--power-shadow-blur) rgba(4, 36, 17, 0.22);
}

.app-header .header-login-trigger.power-button--header-login {
    --power-top: #243d57;
    --power-middle: #1b344f;
    --power-bottom: #132b46;
    --power-lip: #0b2037;
    --power-outline: rgba(78, 111, 143, 0.38);
    --power-base: #071a2e;
    --power-highlight: rgba(255, 255, 255, 0.055);
    --power-highlight-fade: rgba(255, 255, 255, 0.012);
    --power-inset-top: rgba(255, 255, 255, 0.08);
    --power-inset-bottom: rgba(3, 16, 30, 0.1);
    --power-height: 36px;
    --power-padding-x: 13px;
    --power-padding-top: 7px;
    --power-padding-bottom: 8px;
    --power-radius: 11px;
    --power-edge-width: 0.5px;
    --power-font-size: clamp(12px, 3.1vw, 13px);
    --power-lip-offset: 3px;
    --power-base-offset: 4px;
    --power-shadow-blur: 8px;
    border: 0;
    background:
        linear-gradient(180deg, var(--power-highlight) 0%, var(--power-highlight-fade) 25%, rgba(255, 255, 255, 0) 43%),
        linear-gradient(180deg, var(--power-top) 0%, var(--power-middle) 53%, var(--power-bottom) 100%);
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 1px rgba(2, 13, 25, 0.52);
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 3px) var(--power-shadow-blur) rgba(2, 12, 24, 0.2);
}

/* Mantem as proporcoes originais do CTA logado, trazendo apenas a profundidade
   mais contida do Power Clean para o botao de deposito do cabecalho. */
.app-header .header-deposit-trigger.power-button--header-deposit {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.48);
    --power-base: #0d6f2b;
    --power-text-outline: rgba(16, 72, 34, 0.64);
    --power-height: 36px;
    --power-padding-x: 8px;
    --power-padding-top: 8px;
    --power-padding-bottom: 8px;
    --power-radius: 11px;
    --power-font-size: 13px;
    border: 0;
    background:
        linear-gradient(180deg, var(--power-highlight) 0%, var(--power-highlight-fade) 25%, rgba(255, 255, 255, 0) 43%),
        linear-gradient(180deg, var(--power-top) 0%, var(--power-middle) 53%, var(--power-bottom) 100%);
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 3px) var(--power-shadow-blur) rgba(4, 36, 17, 0.18);
}

.app-header .header-menu-group .header-menu-toggle.power-button--header-menu {
    --power-top: #185583;
    --power-middle: #104570;
    --power-bottom: #0b365e;
    --power-lip: #082947;
    --power-outline: rgba(60, 129, 181, 0.34);
    --power-base: #061e36;
    --power-text-outline: rgba(3, 20, 36, 0.64);
    --power-height: 36px;
    --power-padding-x: 0px;
    --power-padding-top: 0px;
    --power-padding-bottom: 3px;
    --power-radius: 11px;
    --power-font-size: 18px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border: 0;
    background:
        linear-gradient(180deg, var(--power-highlight) 0%, var(--power-highlight-fade) 25%, rgba(255, 255, 255, 0) 43%),
        linear-gradient(180deg, var(--power-top) 0%, var(--power-middle) 53%, var(--power-bottom) 100%);
    color: #f5fbff;
    text-shadow: 0 1px 1px rgba(2, 15, 28, 0.56);
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 var(--power-inset-top),
        inset 0 -1px 0 var(--power-inset-bottom),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 calc(var(--power-base-offset) + 3px) var(--power-shadow-blur) rgba(2, 18, 34, 0.2);
}

.app-header .header-menu-group .header-menu-toggle.power-button--header-menu.is-open {
    --power-top: #216a9d;
    --power-middle: #175685;
    --power-bottom: #10446f;
    transform: rotate(180deg);
}

.app-header .header-menu-group .header-menu-toggle.power-button--header-menu.is-open:active:not(:disabled),
.app-header .header-menu-group .header-menu-toggle.power-button--header-menu.is-open.is-pressed:not(:disabled) {
    transform: translateY(2px) rotate(180deg);
}

.modal-card--account .power-button--account-action {
    --power-height: 42px;
    --power-padding-x: 10px;
    --power-padding-top: 7px;
    --power-padding-bottom: 8px;
    --power-radius: 10px;
    --power-font-size: 13px;
    width: 100%;
    min-height: 42px;
    border: 0;
    letter-spacing: 0.015em;
}

.modal-card--account .power-button--account-action-primary {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.48);
    --power-base: #0d6f2b;
    --power-text-outline: rgba(16, 72, 34, 0.64);
}

.modal-card--account .power-button--account-action-secondary {
    --power-top: #36a8ed;
    --power-middle: #2388d6;
    --power-bottom: #1a68b9;
    --power-lip: #124c91;
    --power-outline: rgba(15, 65, 112, 0.58);
    --power-base: #0c386e;
    --power-text-outline: rgba(9, 45, 83, 0.68);
}

.modal-shell[data-modal="withdraw"] .power-button--withdraw-clean {
    --power-top: #55dd63;
    --power-middle: #32c94f;
    --power-bottom: #1bab3c;
    --power-lip: #138b31;
    --power-outline: rgba(13, 95, 39, 0.5);
    --power-base: #0d6f2b;
    --power-text-outline: rgba(16, 72, 34, 0.62);
    --power-height: 50px;
    --power-padding-x: 16px;
    --power-padding-top: 8px;
    --power-padding-bottom: 9px;
    --power-radius: 10px;
    --power-font-size: clamp(15px, 4.4vw, 18px);
    width: 100%;
    min-height: 50px;
    border: 0;
    letter-spacing: 0.015em;
}

.modal-shell[data-modal="withdraw"] .power-button--withdraw-sale {
    --power-top: #71e657;
    --power-middle: #42cf3c;
    --power-bottom: #25b72c;
    --power-lip: #168c2b;
    --power-outline: rgba(13, 91, 35, 0.58);
    --power-base: #0c6b28;
    --power-lip-offset: 4px;
    --power-base-offset: 6px;
    --power-shadow-blur: 12px;
    overflow: hidden;
    box-shadow:
        inset var(--power-edge-width) 0 0 var(--power-outline),
        inset calc(var(--power-edge-width) * -1) 0 0 var(--power-outline),
        inset 0 var(--power-edge-width) 0 var(--power-outline),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 var(--power-lip-offset) 0 var(--power-lip),
        0 var(--power-base-offset) 0 var(--power-base),
        0 11px 17px rgba(5, 66, 26, 0.27);
}

.modal-shell[data-modal="withdraw"] .power-button--withdraw-sale::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -30%;
    width: 20%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
    transform: skewX(-18deg);
    animation: withdrawSaleButtonSweep 4.4s ease-in-out infinite;
}

@keyframes withdrawSaleButtonSweep {
    0%, 68% {
        left: -30%;
        opacity: 0;
    }
    72% {
        opacity: 1;
    }
    88% {
        left: 112%;
        opacity: 0.85;
    }
    100% {
        left: 112%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-shell[data-modal="withdraw"] .power-button--withdraw-sale::after {
        animation: none;
    }
}

@media (min-width: 992px) {
    .app-header .header-register-trigger.power-button--header-register {
        --power-height: 40px;
        --power-padding-x: 20px;
        --power-padding-top: 7px;
        --power-padding-bottom: 8px;
        --power-radius: 13px;
        --power-font-size: 16px;
    }

    .app-header .header-login-trigger.power-button--header-login {
        --power-height: 44px;
        --power-padding-x: 20px;
        --power-padding-top: 9px;
        --power-padding-bottom: 10px;
        --power-radius: 14px;
        --power-font-size: 14px;
    }

    .app-header .header-deposit-trigger.power-button--header-deposit {
        --power-height: 44px;
        --power-padding-x: 15px;
        --power-padding-top: 10px;
        --power-padding-bottom: 10px;
        --power-radius: 14px;
        --power-font-size: 15px;
    }

    .app-header .header-menu-group .header-menu-toggle.power-button--header-menu {
        --power-height: 44px;
        --power-radius: 14px;
        --power-font-size: 20px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
}

.power-button--sm {
    --power-height: 32px;
    --power-padding-x: 12px;
    --power-padding-top: 5px;
    --power-padding-bottom: 6px;
    --power-radius: 6px;
    --power-border: 0px;
    --power-edge-width: 0.6px;
    --power-font-size: 13px;
    --power-lip-offset: 3px;
    --power-base-offset: 4px;
    --power-shadow-blur: 7px;
}

.power-button--md {
    --power-height: 54px;
    --power-padding-x: 28px;
    --power-padding-top: 9px;
    --power-padding-bottom: 11px;
    --power-radius: 10px;
    --power-edge-width: 0.8px;
    --power-font-size: 25px;
    --power-lip-offset: 5px;
    --power-base-offset: 7px;
    --power-shadow-blur: 12px;
}

.power-button--lg {
    --power-height: 72px;
    --power-padding-x: 38px;
    --power-padding-top: 12px;
    --power-padding-bottom: 15px;
    --power-radius: 13px;
    --power-border: 0px;
    --power-edge-width: 1px;
    --power-font-size: 34px;
    --power-lip-offset: 7px;
    --power-base-offset: 10px;
    --power-shadow-blur: 16px;
}

.power-button--carousel-arrow {
    --power-height: 42px;
    --power-padding-x: 0px;
    --power-padding-top: 0px;
    --power-padding-bottom: 4px;
    --power-radius: 10px;
    --power-edge-width: 0.7px;
    --power-font-size: 31px;
    --power-lip-offset: 3px;
    --power-base-offset: 5px;
    --power-shadow-blur: 9px;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
}

.games-carousel-control.power-button {
    position: absolute;
    transform: translateY(-50%);
}

.games-carousel-control.power-button:active:not(:disabled),
.games-carousel-control.power-button.is-pressed:not(:disabled) {
    transform: translateY(-50%);
}

.premium-games-unlock--carousel.power-button {
    position: absolute;
    --power-height: 42px;
    --power-radius: 10px;
    --power-font-size: 17px;
    --power-lip-offset: 3px;
    --power-base-offset: 5px;
    --power-shadow-blur: 9px;
}

.games-carousel-control.power-button:disabled {
    opacity: 0;
    visibility: hidden;
    filter: none;
}

.games-carousel-control--next.power-button.is-at-end {
    opacity: 0;
    pointer-events: none;
    filter: none;
    transform: translateY(-50%) translateX(7px) scale(0.92);
}

@media (min-width: 720px) {
    .power-button--carousel-arrow {
        --power-height: 48px;
        --power-radius: 11px;
        --power-font-size: 36px;
        --power-lip-offset: 4px;
        --power-base-offset: 6px;
        width: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .premium-games-unlock--carousel.power-button {
        --power-height: 48px;
        --power-radius: 11px;
        --power-font-size: 19px;
        --power-lip-offset: 4px;
        --power-base-offset: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .power-button {
        transition: none;
    }

    .games-carousel-control,
    .premium-games-unlock--carousel {
        animation: none;
    }
}