:root {
    --bg-dark: #07111f;
    --panel: rgba(8, 18, 34, .62);
    --panel-strong: rgba(7, 15, 28, .82);
    --panel-border: rgba(255, 255, 255, .12);
    --primary: #24d6ff;
    --success: #33ff99;
    --danger: #ff4d6d;
    --gold: #ffd166;
    --text: #ffffff;
    --muted: rgba(255, 255, 255, .62);
    --radius: 14px;
    --shadow-soft: 0 12px 34px rgba(0, 0, 0, .5)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html,
body {
    height: 100%;
    touch-action: manipulation
}

body {
    font-family: Segoe UI, system-ui, -apple-system, Roboto, sans-serif;
    background: #04101e url(lib/a/f4961e91.webp) center / cover no-repeat fixed;
    color: var(--text);
    overflow: hidden;
    user-select: none
}

.game-frame {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    height: 100dvh;
    width: min(100vw, calc(100vh * 941 / 1672));
    overflow: hidden;
    background: #050d18;
    box-shadow: 0 0 70px #000000a6
}

.rotate-gate {
    display: none
}

@media (orientation: landscape) and (max-height: 560px) {
    .game-frame {
        visibility: hidden
    }
    .rotate-gate {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        text-align: center;
        background: radial-gradient(ellipse at 50% 38%, #0d2440, #04101e 78%);
        color: #eaf6ff
    }
    .rotate-gate p {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: .01em;
        max-width: 18ch
    }
    .rotate-gate .rotate-ico {
        color: #24d6ff;
        animation: rotateHint 2.4s ease-in-out infinite
    }
}

@keyframes rotateHint {
    0%,
    18% {
        transform: rotate(0)
    }
    50%,
    68% {
        transform: rotate(-90deg)
    }
    to {
        transform: rotate(0)
    }
}

button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer
}

button:disabled {
    cursor: not-allowed;
    opacity: .45
}

.hidden {
    display: none !important
}

.glass {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    box-shadow: var(--shadow-soft)
}

#preloader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    height: 100dvh;
    width: min(100vw, calc(100vh * 941 / 1672));
    container-type: inline-size;
    overflow: hidden;
    z-index: 100;
    background: url(lib/a/e2aab27a.avif) center / cover no-repeat, radial-gradient(ellipse at 50% 30%, #0d2440 0%, var(--bg-dark) 70%);
    background-color: var(--bg-dark);
    transition: opacity .6s ease, visibility .6s
}

#preloader.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.preloader-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 8, 16, .2) 0%, transparent 28%, transparent 50%, rgba(3, 8, 16, .92) 100%)
}

.preloader-ui {
    display: contents
}

.preloader-center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 90px;
    justify-content: center;
    padding: 0 22px
}

#preloaderLoading {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.preloader-bar {
    position: relative;
    width: min(460px, 88%);
    height: 30px;
    border-radius: 999px;
    background: #00000080;
    border: 1.5px solid rgba(255, 255, 255, .3);
    box-shadow: inset 0 1px 5px #000000b3, 0 2px 10px #00000080;
    overflow: hidden;
    padding: 3px
}

.preloader-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: repeating-linear-gradient(-45deg, #ffffff59 0 9px, #fff0 9px 18px), linear-gradient(90deg, var(--primary), var(--success) 60%, var(--gold));
    background-size: 26px 100%, 100% 100%;
    box-shadow: 0 0 12px #78f046b3;
    animation: bar-stripes .6s linear infinite
}

@keyframes bar-stripes {
    0% {
        background-position: 0 0, 0 0
    }
    to {
        background-position: 26px 0, 0 0
    }
}

.preloader-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: clamp(.95rem, 4.2vw, 1.12rem);
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .8);
    pointer-events: none;
    z-index: 2
}

.preloader-hint {
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .85)
}

.preloader-start {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    width: min(74%, 340px);
    line-height: 0;
    cursor: pointer;
    filter: drop-shadow(0 0 7px rgba(120, 200, 255, .45)) drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
    animation: start-zoom 1.5s ease-in-out infinite;
    transition: transform .14s
}

.preloader-start img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none
}

.preloader-start:hover {
    transform: scale(1.03)
}

.preloader-start:active {
    transform: scale(.96)
}

@keyframes start-zoom {
    0%,
    to {
        transform: scale(1)
    }
    50% {
        transform: scale(1.075)
    }
}

.preloader-tip {
    color: #ffffffeb;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    max-width: 94%;
    height: 1.2em;
    line-height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .85);
    animation: tip-fade .45s ease
}

@keyframes tip-fade {
    0% {
        opacity: 0;
        transform: translateY(4px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.preloader-legal {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: max(4vh, 14px);
    width: min(460px, 88%);
    font-family: Georgia, Times New Roman, "Noto Serif", serif;
    font-size: 1.85cqw;
    line-height: 1.55;
    font-style: italic;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    color: #c6d4e694;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85)
}

.pbadge--dead {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(180deg, #121c2ec7, #080e1ae0);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px #0006;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55)
}

.bicon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5))
}

.pbadge-strong {
    font-weight: 900;
    letter-spacing: .01em
}

.stage,
.scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #050d18
}

.scene canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: manipulation
}

.webgl-fallback {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 26px;
    background: var(--panel-strong);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    color: var(--muted);
    text-align: center;
    max-width: 320px
}

.stage:before,
.stage:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 4
}

.stage:before {
    top: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(3, 8, 16, .78), transparent)
}

.stage:after {
    bottom: 0;
    height: 240px;
    background: linear-gradient(0deg, rgba(3, 8, 16, .9) 12%, transparent)
}

.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 2.5vw, 16px);
    padding: 10px 14px;
    z-index: 20;
    pointer-events: none
}

.topbar>* {
    pointer-events: auto
}

.bonus-bar {
    position: relative;
    flex: 1;
    max-width: min(420px, 70vw);
    display: flex;
    align-items: center;
    container-type: inline-size
}

.bonus-art {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none
}

.bonus-letters {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 60%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none
}

.bonus-letter {
    position: relative;
    width: 8cqw;
    aspect-ratio: 1 / 1
}

.bonus-letter img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block
}

.bl-on {
    opacity: 0;
    transition: opacity .35s ease;
    filter: drop-shadow(0 0 6px rgba(40, 170, 255, .85))
}

.bonus-letter.on .bl-on {
    opacity: 1
}

.bonus-letter.on {
    animation: bonusPop .45s cubic-bezier(.2, 1.6, .4, 1)
}

@keyframes bonusPop {
    0% {
        transform: scale(1)
    }
    45% {
        transform: scale(1.25)
    }
    to {
        transform: scale(1)
    }
}

.bonus-bar.complete {
    animation: bonusGlow 1s ease-in-out infinite
}

.bonus-bar.complete .bonus-letter.on .bl-on {
    filter: drop-shadow(0 0 9px rgba(255, 205, 70, .95)) drop-shadow(0 0 3px rgba(255, 235, 150, .9))
}

@keyframes bonusGlow {
    0%,
    to {
        filter: drop-shadow(0 0 0 rgba(255, 200, 60, 0))
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(255, 200, 60, .55))
    }
}

.bonus-fly {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: block;
    transform-origin: center center;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 10px rgba(40, 170, 255, .9)) drop-shadow(0 0 4px rgba(180, 230, 255, .85))
}

.bonus-letter.arrive {
    animation: bonusArrive .6s cubic-bezier(.18, 1.7, .45, 1)
}

.bonus-letter.arrive .bl-on {
    animation: bonusArriveGlow .6s ease-out
}

@keyframes bonusArrive {
    0% {
        transform: scale(1.7)
    }
    55% {
        transform: scale(.92)
    }
    to {
        transform: scale(1)
    }
}

@keyframes bonusArriveGlow {
    0% {
        filter: drop-shadow(0 0 16px rgba(120, 215, 255, 1)) brightness(1.8)
    }
    to {
        filter: drop-shadow(0 0 6px rgba(40, 170, 255, .85)) brightness(1)
    }
}

.img-btn {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform .09s ease, filter .14s ease
}

.img-btn img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none
}

.user-btn,
.sound-btn {
    width: clamp(34px, 9vw, 46px)
}

.user-wrap,
.sound-btn {
    position: relative;
    top: clamp(4px, 1.2vw, 7.5px)
}

.img-btn:hover {
    filter: brightness(1.12) drop-shadow(0 0 8px rgba(36, 214, 255, .5))
}

.img-btn:active {
    transform: scale(.86)
}

.user-wrap {
    position: relative;
    flex-shrink: 0;
    line-height: 0
}

.user-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, .8vw, 5px);
    width: clamp(158px, 44vw, 210px);
    padding: clamp(7px, 1.9vw, 10px);
    border: 2px solid transparent;
    border-radius: clamp(13px, 3.2vw, 17px);
    background: linear-gradient(180deg, #081638fa, #030e2cfa 52%, #01091efa) padding-box, linear-gradient(150deg, #b3d8ff, #4a80b8 30%, #16304e 62%, #5e9bd4) border-box;
    box-shadow: 0 12px 30px #000000a8, 0 0 18px #24d6ff33, inset 0 1.5px #ffffff38, inset 0 -12px 22px #00000061;
    transform-origin: top left;
    animation: user-menu-in .16s ease
}

.user-menu:before {
    content: "";
    position: absolute;
    inset: clamp(4px, 1vw, 6px);
    border-radius: clamp(8px, 2.2vw, 12px);
    border: 1px solid rgba(130, 185, 240, .22);
    box-shadow: inset 0 0 12px #14325a80;
    pointer-events: none
}

.user-menu.hidden {
    display: none
}

@keyframes user-menu-in {
    0% {
        opacity: 0;
        transform: scale(.9) translateY(-6px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.user-mi {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(7px, 2vw, 11px);
    width: 100%;
    padding: clamp(8px, 2.2vw, 12px) clamp(10px, 2.8vw, 14px);
    border: 1px solid rgba(125, 180, 235, .16);
    border-radius: clamp(8px, 2vw, 11px);
    background: linear-gradient(180deg, #487cb43d, #1c3a602e);
    box-shadow: inset 0 1px #ffffff1a;
    color: #d7e8fb;
    font-weight: 800;
    font-size: clamp(13px, 3.6vw, 16px);
    text-align: left;
    line-height: 1;
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s, transform .08s;
    -webkit-tap-highlight-color: transparent
}

.user-mi:hover {
    background: linear-gradient(180deg, #609cd861, #2852864d);
    border-color: #96cdff66;
    color: #fff
}

.user-mi:active {
    transform: scale(.97)
}

.user-mi svg {
    width: clamp(17px, 4.6vw, 21px);
    height: clamp(17px, 4.6vw, 21px);
    flex-shrink: 0;
    color: #cdd8e4;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45))
}

.sound-btn {
    position: relative
}

.sound-btn.is-muted img {
    filter: grayscale(.9) brightness(.6)
}

.sound-btn.is-muted:after {
    content: "";
    position: absolute;
    inset: 16%;
    background: linear-gradient(135deg, transparent 43%, #ff5a5a 43%, #ff5a5a 57%, transparent 57%);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
    pointer-events: none
}

.chip {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--edge) 0 15deg, #f4f6f8 15deg 30deg);
    box-shadow: 0 6px 14px #0000008c;
    display: grid;
    place-items: center;
    cursor: pointer;
    margin-top: var(--arc, 0px);
    transition: transform .16s cubic-bezier(.2, .9, .3, 1.1), box-shadow .2s, filter .2s
}

.chip:before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #ffffff73, #fff0 58%), var(--face);
    box-shadow: inset 0 0 0 2px #ffffff80, inset 0 -3px 8px #00000059
}

.chip .chip-val {
    position: relative;
    z-index: 1;
    font-size: .72rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.02em;
    -webkit-text-stroke: .5px rgba(0, 0, 0, .5);
    paint-order: stroke fill;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55)
}

.chip.active .chip-val {
    color: #0e1626;
    -webkit-text-stroke-color: rgba(255, 255, 255, .3);
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35)
}

.chip:hover {
    transform: translateY(-3px)
}

.chip.active {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 0 0 3px #96ff6ef2, 0 0 24px 6px #78f04699, 0 8px 18px #00000080;
    z-index: 3
}

.chip-white {
    --edge: #cdd3db;
    --face: #e9edf2;
    --ink: #2a3340
}

.chip-red {
    --edge: #e8554b;
    --face: #c5302a;
    --ink: #fff
}

.chip-blue {
    --edge: #3a82de;
    --face: #2360ab;
    --ink: #fff
}

.chip-green {
    --edge: #74e36b;
    --face: #3fb84a;
    --ink: #06260a
}

.chip-gold {
    --edge: #eccb55;
    --face: #caa033;
    --ink: #2a1c02
}

.betui {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
    container-type: inline-size;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.45, 0, .25, 1)
}

.betui.betui-down {
    transform: translateY(115%)
}

.betui-art {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none
}

.betui>*:not(.betui-art) {
    position: absolute
}

.bo-chips {
    left: 10.5%;
    right: 10.5%;
    top: 5.5%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: auto
}

.bo-chips .chip {
    width: 12.5cqw;
    height: 12.5cqw
}

.bo-chips .chip:before {
    inset: 8%
}

.bo-chips .chip-val {
    font-size: 3.32cqw
}

.bo-bet {
    left: 34%;
    width: 32%;
    top: 32.5%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4cqw;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    cursor: pointer;
    transition: filter .12s ease
}

.bo-bet:hover {
    filter: brightness(1.12)
}

.bo-bet strong {
    font-size: 4.7cqw;
    font-weight: 900;
    color: #ffd166;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    font-variant-numeric: tabular-nums;
    pointer-events: none
}

.bo-bet-caret {
    width: 3.4cqw;
    height: 3.4cqw;
    color: #ffd166;
    flex-shrink: 0;
    pointer-events: none;
    transition: transform .18s ease
}

.bo-bet.open .bo-bet-caret {
    transform: rotate(180deg)
}

.bet-dropdown {
    left: 34%;
    width: 32%;
    bottom: 67.5%;
    z-index: 45;
    pointer-events: auto;
    overflow: hidden;
    background: linear-gradient(180deg, #0a1828fa, #060e1afa);
    border: .3cqw solid rgba(86, 170, 255, .35);
    border-radius: 3cqw;
    box-shadow: 0 -1.2cqw 5cqw #0009, inset 0 0 0 .3cqw #ffffff0a
}

.bet-dropdown.hidden {
    display: none
}

.bet-dd-scroll {
    display: flex;
    flex-direction: column;
    gap: .6cqw;
    max-height: 42cqw;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.4cqw;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 170, 255, .5) transparent
}

.bet-dd-scroll::-webkit-scrollbar {
    width: 1.4cqw
}

.bet-dd-scroll::-webkit-scrollbar-thumb {
    background: #56aaff73;
    border-radius: 1cqw
}

.bet-opt {
    flex: 0 0 auto;
    pointer-events: auto;
    background: #ffffff08;
    border: 0;
    cursor: pointer;
    padding: 2.2cqw 1cqw;
    border-radius: 2cqw;
    color: #cfe6ff;
    font-weight: 800;
    font-size: 3.7cqw;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: background .12s, color .12s, transform .08s;
    user-select: none
}

.bet-opt:hover {
    background: #56aaff2e;
    color: #fff
}

.bet-opt:active {
    transform: scale(.97)
}

.bet-opt.sel {
    background: linear-gradient(180deg, #ffd166, #e0a92e);
    color: #2a1c02
}

.bo-step {
    width: 9.5cqw;
    top: 30%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    line-height: 0;
    transition: transform .08s ease, filter .12s ease
}

.bo-step img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none
}

.bo-minus {
    left: 23%
}

.bo-plus {
    right: 23%
}

.bo-step:hover {
    filter: brightness(1.12) drop-shadow(0 0 7px rgba(80, 170, 255, .6))
}

.bo-step:active {
    transform: scale(.85)
}

.bo-step:disabled {
    filter: grayscale(.6) brightness(.55);
    cursor: not-allowed
}

.bo-main {
    left: 14.5%;
    width: 71%;
    top: 45%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    line-height: 0;
    isolation: isolate;
    transition: transform .08s ease, filter .12s ease
}

.bo-main-art {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    position: relative;
    z-index: 0;
    transition: filter .28s ease
}

.bo-main-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: #06260a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .35);
    pointer-events: none
}

.bo-main:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 41%, rgba(255, 255, 255, .42) 47%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .42) 53%, transparent 59%) no-repeat;
    background-size: 220% 100%;
    mix-blend-mode: screen;
    -webkit-mask: url(lib/a/f1590c5e.webp) center / 100% 100% no-repeat;
    mask: url(lib/a/f1590c5e.webp) center / 100% 100% no-repeat;
    animation: bo-shine 3.2s linear infinite
}

@keyframes bo-shine {
    0% {
        background-position: 130% 0;
        opacity: 0
    }
    5% {
        opacity: 1
    }
    35% {
        opacity: 1
    }
    40% {
        background-position: -30% 0;
        opacity: 0
    }
    to {
        background-position: -30% 0;
        opacity: 0
    }
}

.bo-main.recolher:before,
.bo-main:disabled:before {
    animation: none;
    opacity: 0
}

@media (prefers-reduced-motion: reduce) {
    .bo-main:before {
        animation: none;
        opacity: 0
    }
}

.bo-main-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 43%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 8cqw;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    animation: bo-label-pulse 3.2s linear infinite
}

@keyframes bo-label-pulse {
    0%,
    13% {
        transform: translateY(-50%) scale(1);
        animation-timing-function: ease-out
    }
    20% {
        transform: translateY(-50%) scale(1.075);
        animation-timing-function: ease-in
    }
    28% {
        transform: translateY(-50%) scale(1)
    }
    to {
        transform: translateY(-50%) scale(1)
    }
}

.bo-main.recolher .bo-main-label,
.bo-main:disabled .bo-main-label {
    animation: none
}

@media (prefers-reduced-motion: reduce) {
    .bo-main-label {
        animation: none
    }
}

.bo-main-val {
    position: absolute;
    left: 0;
    right: 0;
    top: 71%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 3.6cqw;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.bo-main:hover {
    filter: brightness(1.06)
}

.bo-main:active {
    transform: translateY(1.5%) scale(.985)
}

.bo-main:disabled {
    cursor: not-allowed
}

.bo-main:disabled .bo-main-art {
    filter: grayscale(.4) brightness(.78)
}

.bo-main.low {
    cursor: pointer
}

.bo-main.low:before {
    animation: none;
    opacity: 0
}

.bo-main.low .bo-main-label {
    animation: none
}

.bo-main.low .bo-main-art {
    filter: grayscale(.32) brightness(.84)
}

.bo-main.recolher .bo-main-art {
    filter: hue-rotate(-72deg) saturate(1.35) brightness(1.08)
}

.bo-main.recolher .bo-main-text {
    color: #2a1c02
}

.bo-main.recolher .bo-main-label {
    font-size: 4.5cqw;
    top: 32%
}

.bo-main.recolher .bo-main-val {
    font-size: 7cqw;
    top: 62%
}

.bo-info {
    top: 83.5%;
    text-align: left
}

.bo-info strong,
.bo-info span {
    display: block;
    white-space: nowrap;
    font-size: 3cqw;
    font-weight: 900;
    color: #5dffa0;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6)
}

.bo-saldo {
    left: 15.5%;
    width: 18.5%
}

.bo-aposta {
    left: 46%;
    width: 16.5%
}

.bo-ganho {
    left: 75.5%;
    width: 20.5%
}

.bo-saldo strong {
    color: #5dffa0
}

.bo-aposta span {
    color: #5aa9ff
}

.bo-ganho span {
    color: #5dffa0
}

.recharge-btn {
    left: 50%;
    transform: translate(-50%);
    top: 60%;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1.3cqw 4cqw;
    border-radius: 999px;
    font-size: 3.2cqw;
    font-weight: 800;
    color: #06260a;
    background: linear-gradient(180deg, #74e36b, #2fb43f);
    border: 1px solid rgba(150, 255, 110, .8);
    box-shadow: 0 4px 14px #28c84673;
    transition: transform .09s ease, filter .14s ease
}

.recharge-btn:active {
    transform: translate(-50%) scale(.94)
}

.recharge-btn.hidden {
    display: none
}

.flash {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0
}

.flash.flash-green {
    background: radial-gradient(circle, #33ff9952, #ffd1661f 70%);
    animation: flash-fade .7s ease-out
}

.flash.flash-red {
    background: radial-gradient(circle, rgba(255, 77, 109, .35), transparent 75%);
    animation: flash-fade .7s ease-out
}

@keyframes flash-fade {
    0% {
        opacity: 0
    }
    20% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.result-overlay {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 18;
    text-align: center;
    pointer-events: none;
    opacity: 0
}

.result-overlay.goal,
.result-overlay.save {
    top: 23%
}

.result-overlay.show {
    animation: result-pop 2.08s cubic-bezier(.2, .9, .3, 1.1) forwards
}

@keyframes result-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.4)
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12)
    }
    30% {
        transform: translate(-50%, -50%) scale(1)
    }
    80% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate(-50%, -56%) scale(1.02)
    }
}

.result-overlay.collect.show {
    animation: result-collect 4.6s cubic-bezier(.16, .72, .24, 1) forwards
}

.result-overlay.collect.slow2x.show {
    animation-duration: 9.2s
}

@keyframes result-collect {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + -0dvh)) scale(.4)
    }
    6% {
        opacity: 1;
        transform: translate(-50%, calc(-50% + -0dvh)) scale(1.16)
    }
    11% {
        transform: translate(-50%, calc(-50% - .4dvh)) scale(1)
    }
    82% {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 18dvh)) scale(1)
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 22dvh)) scale(1.06)
    }
}

.result-text {
    font-size: clamp(2.6rem, 9.5vw, 5rem);
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-stroke: 1.4px rgba(0, 0, 0, .5);
    paint-order: stroke fill
}

.result-overlay.goal .result-text {
    background: linear-gradient(180deg, #eafff3, #5dffa0 40%, #1ec96b 60%, #ffd166);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 #0b5e33, 0 2px 0 #0a5430, 0 3px 0 #094a2a, 0 4px 0 #073e23, 0 5px 0 #06341d, 0 6px 2px rgba(0, 0, 0, .4), 0 0 24px rgba(51, 255, 153, .55), 0 12px 26px rgba(0, 0, 0, .45)
}

.result-overlay.save .result-text {
    background: linear-gradient(180deg, #ffe1e7, #ff5d72, #d11f3a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 #7c1020, 0 2px 0 #720e1c, 0 3px 0 #650c19, 0 4px 0 #560a15, 0 5px 0 #480811, 0 6px 2px rgba(0, 0, 0, .4), 0 0 24px rgba(255, 77, 109, .5), 0 12px 26px rgba(0, 0, 0, .45)
}

.result-overlay.collect .result-text {
    background: linear-gradient(180deg, #fff6da, #ffe08a 36%, #ffc23c 62%, #ff9a2b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 #9a6a12, 0 2px 0 #8d6011, 0 3px 0 #7d540f, 0 4px 0 #6c480d, 0 5px 0 #5c3d0b, 0 6px 2px rgba(0, 0, 0, .4), 0 0 28px rgba(255, 198, 78, .6), 0 12px 26px rgba(0, 0, 0, .45)
}

.result-overlay.maxwin .result-text {
    font-size: clamp(1.35rem, 4.6vw, 2.3rem);
    letter-spacing: .14em;
    line-height: 1
}

.result-overlay.maxwin .result-amount {
    margin-top: .02em;
    font-size: clamp(2.7rem, 9.8vw, 5.2rem);
    line-height: 1
}

.result-amount {
    margin-top: .32em;
    font-size: clamp(1.35rem, 4.4vw, 2.15rem);
    font-weight: 900;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: #fff3cf;
    -webkit-text-stroke: .6px rgba(50, 26, 0, .45);
    paint-order: stroke fill;
    text-shadow: 0 1px 0 #7a5410, 0 2px 0 #63440c, 0 3px 2px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 209, 102, .7)
}

.result-overlay.save .result-amount {
    color: #ffdfe4;
    -webkit-text-stroke-color: rgba(60, 0, 8, .45);
    text-shadow: 0 1px 0 #6e1019, 0 2px 0 #560b13, 0 3px 2px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 77, 109, .6)
}

@media (prefers-reduced-motion: reduce) {
    .result-overlay.collect.show {
        animation: result-pop 3s ease forwards
    }
}

.golden-scrim {
    position: absolute;
    inset: 0;
    z-index: 30;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    background: #0308144d;
    -webkit-backdrop-filter: blur(8px) brightness(.72);
    backdrop-filter: blur(8px) brightness(.72)
}

.golden-scrim.hidden {
    display: none
}

.golden-scrim.show {
    opacity: 1
}

.golden-card {
    position: absolute;
    left: 50%;
    top: 7%;
    transform: translate(-50%);
    width: min(86%, 360px);
    z-index: 31;
    pointer-events: none;
    container-type: inline-size
}

.golden-card.hidden {
    display: none
}

.golden-card.center {
    top: 50%;
    transform: translate(-50%, -50%) scale(1.12);
    animation: golden-pop-in .5s cubic-bezier(.2, .9, .3, 1.3)
}

.golden-card.docking {
    transition: top .6s cubic-bezier(.45, .05, .25, 1), transform .6s cubic-bezier(.45, .05, .25, 1)
}

@keyframes golden-pop-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.6)
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12)
    }
}

.golden-card-art {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55))
}

@media (max-height: 730px) {
    .golden-card:not(.center) {
        top: 9.5%;
        transform: translate(-50%) scale(.6);
        transform-origin: top center
    }
}

.golden-mult {
    position: absolute;
    inset: 51% 3% 12% 69%;
    transform: translate(-18px, -9px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 8.4cqw;
    line-height: 1;
    color: #fff6da;
    font-variant-numeric: tabular-nums;
    letter-spacing: .005em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 209, 102, .75);
    -webkit-text-stroke: .4px rgba(60, 30, 0, .5);
    paint-order: stroke fill;
    transform-origin: center center;
    will-change: transform;
    animation: goldenMultPulse 1.5s ease-in-out infinite
}

@keyframes goldenMultPulse {
    0%,
    to {
        transform: translate(-18px, -9px) scale(1);
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 209, 102, .75)
    }
    50% {
        transform: translate(-18px, -9px) scale(1.045);
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 17px rgba(255, 224, 140, 1)
    }
}

@keyframes golden-in {
    0% {
        opacity: 0;
        transform: translate(-50%) scale(.7)
    }
    to {
        opacity: 1;
        transform: translate(-50%) scale(1)
    }
}

.aff-link-row {
    display: flex;
    gap: 8px;
    margin-top: 6px
}

.aff-link {
    flex: 1;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0e1622;
    color: #eaf2ff;
    font-size: .82rem;
    padding: 11px 12px;
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    letter-spacing: .01em;
    outline: none
}

.aff-copy {
    flex: 0 0 auto;
    border: none;
    border-radius: 12px;
    padding: 0 16px;
    font-weight: 800;
    font-size: .85rem;
    color: #04150e;
    background: linear-gradient(180deg, #4fe08a, #28b66a);
    cursor: pointer;
    box-shadow: 0 4px 14px #28b66a59;
    transition: filter .15s
}

.aff-copy:hover {
    filter: brightness(1.07)
}

.aff-rates {
    font-size: .8rem;
    color: #aeb9c9;
    margin-top: 10px
}

.aff-rates b {
    color: #5be584
}

.aff-total {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(91, 229, 132, .25);
    background: #5be58414
}

.aff-total-l {
    font-size: .82rem;
    color: #aeb9c9;
    margin-right: auto
}

.aff-total strong {
    font-size: 1.25rem;
    font-weight: 900;
    color: #5be584
}

.aff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px
}

.aff-stat {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: #ffffff09;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px
}

.aff-stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.aff-ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #5be5841f;
    border: 1px solid rgba(91, 229, 132, .22);
    color: #5be584
}

.aff-ic svg {
    width: 18px;
    height: 18px
}

.aff-ic-gold {
    color: #ffd76a;
    background: #ffd76a1f;
    border-color: #ffd76a47
}

.aff-stat-v {
    font-size: 1.15rem;
    font-weight: 900;
    color: #eaf2ff;
    line-height: 1.05
}

.aff-stat.money .aff-stat-v {
    color: #5be584
}

.aff-stat-l {
    font-size: .7rem;
    color: #9aa6b6;
    line-height: 1.2;
    white-space: nowrap
}

.aff-empty {
    text-align: center;
    color: #9aa6b6;
    padding: 18px 0;
    font-size: .86rem
}

.aff-wd-btn {
    width: 100%;
    margin-top: 12px
}

.aff-wd-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: .82rem;
    line-height: 1.35;
    color: #cdd6e4;
    border: 1px solid rgba(255, 215, 106, .22);
    background: #ffd76a12
}

.aff-wd-note b {
    color: #ffd76a
}

.aff-wd-note .aff-ic {
    flex-shrink: 0
}

.aff-wd-note-txt {
    min-width: 0
}

.pf-hist.hist-only {
    min-height: 250px
}

.aim-prompt {
    position: absolute;
    left: 50%;
    top: 19%;
    transform: translate(-50%);
    z-index: 17;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    animation: aim-pop .4s cubic-bezier(.2, .9, .3, 1.1)
}

.aim-prompt.hidden {
    display: none
}

.aim-prompt.golden-shift {
    top: 25.5%
}

.aim-prompt.golden-shift .aim-prompt-text {
    font-size: clamp(1rem, 4.6vw, 1.85rem)
}

.aim-prompt.golden-shift .aim-count {
    font-size: clamp(.82rem, 3.3vw, 1.35rem);
    margin-top: .12em
}

.aim-prompt-text {
    font-size: clamp(1.3rem, 6vw, 2.4rem);
    font-weight: 900;
    white-space: nowrap;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    background: linear-gradient(180deg, #eafff3, #5dffa0 45%, #1ec96b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(0, 0, 0, .45);
    paint-order: stroke fill;
    text-shadow: 0 1px 0 #0b5e33, 0 2px 0 #0a5430, 0 3px 0 #073e23, 0 0 18px rgba(51, 255, 153, .5);
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .5));
    animation: aim-bob 1.4s ease-in-out infinite
}

.aim-count {
    margin-top: .25em;
    font-size: clamp(1rem, 4.2vw, 1.7rem);
    font-weight: 900;
    color: #ffd166;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .7), 0 0 12px rgba(255, 209, 102, .6)
}

.aim-prompt.urgent .aim-count {
    color: #ff5d72;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .7), 0 0 14px rgba(255, 77, 109, .7);
    animation: aim-blink .7s steps(2, jump-none) infinite
}

@keyframes aim-pop {
    0% {
        opacity: 0;
        transform: translate(-50%) scale(.8)
    }
    to {
        opacity: 1;
        transform: translate(-50%) scale(1)
    }
}

@keyframes aim-bob {
    0%,
    to {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-4px)
    }
}

@keyframes aim-blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: .45
    }
    to {
        opacity: 1
    }
}

@media (prefers-reduced-motion: reduce) {
    .aim-prompt-text,
    .aim-prompt.urgent .aim-count {
        animation: none
    }
}

.demo-badge {
    position: absolute;
    left: 50%;
    top: 8.5%;
    transform: translate(-50%);
    width: min(52.5%, 225px);
    z-index: 16;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
    animation: demo-bob 2.4s ease-in-out infinite
}

.demo-badge.hidden {
    display: none
}

.demo-badge img {
    display: block;
    width: 100%;
    height: auto
}

@keyframes demo-bob {
    0%,
    to {
        transform: translate(-50%) translateY(0)
    }
    50% {
        transform: translate(-50%) translateY(-3px)
    }
}

.welcome-modal {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10dvh
}

.welcome-modal.hidden {
    display: none
}

.wm-scrim {
    position: absolute;
    inset: 0;
    background: #020812cc;
    backdrop-filter: blur(3px)
}

.wm-panel-img {
    position: relative;
    width: min(90%, 410px);
    container-type: inline-size;
    animation: wm-in .4s cubic-bezier(.2, .9, .3, 1.2)
}

.wm-art {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .4));
    pointer-events: none;
    user-select: none
}

.wm-hit {
    position: absolute;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 10px;
    transition: background .1s
}

.wm-hit:hover {
    background: #ffffff0f
}

.wm-hit:active {
    background: #ffffff1f
}

.wm-hit-login {
    left: 17.6%;
    right: 17.8%;
    top: 33%;
    height: 18%
}

.wm-hit-register {
    left: 17.6%;
    right: 17.8%;
    top: 58.5%;
    height: 18%
}

.wm-hit-close {
    top: 3.4%;
    right: 4.7%;
    width: 8.2%;
    height: 11%;
    border-radius: 0
}

.wm-hit-close:hover,
.wm-hit-close:active {
    background: transparent
}

@keyframes wm-in {
    0% {
        opacity: 0;
        transform: scale(.85) translateY(10px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.auth-modal {
    position: absolute;
    inset: 0;
    z-index: 51;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10dvh
}

.auth-modal.hidden {
    display: none
}

.auth-panel {
    position: relative;
    width: min(92%, 400px);
    container-type: inline-size;
    animation: wm-in .4s cubic-bezier(.2, .9, .3, 1.2)
}

.auth-art {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .4));
    pointer-events: none
}

.auth-input {
    position: absolute;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    outline: none;
    color: #eaf6ff;
    font-size: 4.2cqw;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 0 3% 0 12%
}

.auth-input::placeholder {
    color: #aac8eb80
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
    -webkit-text-fill-color: #eaf6ff;
    caret-color: #eaf6ff;
    transition: background-color 100000s ease-in-out 0s
}

.auth-user {
    left: 16%;
    right: 14%;
    top: 31%;
    height: 10.5%
}

.auth-pass {
    left: 16%;
    right: 14%;
    top: 48%;
    height: 10.5%
}

.auth-submit {
    position: absolute;
    left: 21%;
    right: 21%;
    top: 69.5%;
    height: 15%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #eaf6ff;
    font-size: 5.2cqw;
    font-weight: 900;
    letter-spacing: .04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55), 0 0 10px rgba(80, 170, 255, .5);
    transition: filter .12s, transform .08s
}

.auth-submit:hover {
    filter: brightness(1.12)
}

.auth-submit:active {
    transform: scale(.98)
}

.auth-close {
    position: absolute;
    top: 2.9%;
    right: 1.3%;
    width: 8.4%;
    height: 11%;
    background: transparent;
    border: 0;
    cursor: pointer
}

.auth-close:hover,
.auth-close:active {
    background: transparent
}

.auth-msg {
    position: absolute;
    left: 16%;
    right: 14%;
    top: 59.5%;
    text-align: center;
    color: #ffb3b9;
    font-size: 3.1cqw;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    pointer-events: none
}

.acct-modal {
    position: absolute;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4dvh 4vw
}

.acct-modal.hidden {
    display: none
}

.acct-scrim {
    position: absolute;
    inset: 0;
    background: #020812d1;
    backdrop-filter: blur(3px)
}

.acct-panel {
    position: relative;
    z-index: 1;
    width: min(94%, 430px);
    max-height: 92dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    border-radius: 20px;
    background: linear-gradient(180deg, #081638fc, #030e2cfc 52%, #01091efc) padding-box, linear-gradient(150deg, #b3d8ff, #4a80b8 30%, #16304e 62%, #5e9bd4) border-box;
    box-shadow: 0 18px 48px #000000b3, 0 0 24px #24d6ff2e, inset 0 1.5px #ffffff38, inset 0 -14px 26px #0006;
    animation: wm-in .34s cubic-bezier(.2, .9, .3, 1.2)
}

.acct-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(130, 185, 240, .18)
}

.acct-title {
    color: #eaf6ff;
    font-weight: 900;
    font-size: 19px;
    letter-spacing: .02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5)
}

.acct-x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid rgba(130, 185, 240, .22);
    border-radius: 9px;
    background: linear-gradient(180deg, #487cb438, #1c3a602e);
    color: #cdd8e4;
    cursor: pointer;
    transition: color .12s, border-color .12s
}

.acct-x:hover {
    color: #fff;
    border-color: #96cdff73
}

.acct-x svg {
    width: 17px;
    height: 17px
}

.acct-body {
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 13px
}

.acct-balance {
    color: #bcd6f2;
    font-size: 14px;
    font-weight: 700
}

.acct-balance strong {
    color: #eaf6ff;
    font-size: 17px;
    margin-left: 4px
}

.acct-balance-big {
    text-align: center;
    font-size: 15px;
    padding: 4px 0
}

.acct-balance-big strong {
    font-size: 22px;
    display: block;
    margin: 2px 0 0
}

.acct-field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.acct-label {
    color: #bcd6f2;
    font-size: 13px;
    font-weight: 700
}

.acct-opt {
    color: #aac8eb99;
    font-weight: 600
}

.acct-amounts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.acct-chip {
    flex: 1 1 0;
    min-width: 62px;
    padding: 10px 6px;
    border: 1px solid rgba(130, 185, 240, .22);
    border-radius: 11px;
    background: linear-gradient(180deg, #487cb438, #1c3a6029);
    color: #d7e8fb;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: .12s
}

.acct-chip:hover {
    border-color: #96cdff73;
    color: #fff
}

.acct-chip.sel {
    background: linear-gradient(180deg, #609cd880, #28528666);
    border-color: #6fb4ff;
    color: #fff;
    box-shadow: 0 0 12px #24d6ff4d
}

.acct-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
}

.acct-grid .acct-chip {
    min-width: 0;
    position: relative;
    overflow: visible;
    padding: 11px 4px;
    font-size: 13.5px
}

.acct-chip.is-hot {
    border-color: #ff8a3aa6;
    animation: hotChip 1.4s ease-in-out infinite
}

.acct-chip.is-hot.sel {
    border-color: #ffb15a
}

@keyframes hotChip {
    0%,
    to {
        box-shadow: 0 0 7px #ff6e2840;
        border-color: #ff8a3a99
    }
    50% {
        box-shadow: 0 0 14px #ff913799;
        border-color: #ffaf55e6
    }
}

.chip-hot {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    position: absolute;
    top: -7px;
    right: -6px;
    background: linear-gradient(180deg, #ffb13c, #ff6a2c 48%, #ef2d2d);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1.5px 5px 1.5px 3px;
    border-radius: 8px;
    box-shadow: 0 0 8px #ff5f1eb3, 0 2px 5px #0006;
    animation: hotGlow 1.1s ease-in-out infinite;
    pointer-events: none
}

.hot-flame {
    width: 9px;
    height: 9px;
    margin-right: 1px;
    transform-origin: center bottom;
    animation: hotFlicker .5s ease-in-out infinite alternate
}

@keyframes hotGlow {
    0%,
    to {
        box-shadow: 0 0 7px #ff5f1e99, 0 2px 5px #0006
    }
    50% {
        box-shadow: 0 0 14px #ff962df2, 0 2px 5px #0006
    }
}

@keyframes hotFlicker {
    0% {
        transform: scale(1) rotate(-5deg);
        opacity: .9
    }
    to {
        transform: scale(1.2) rotate(5deg);
        opacity: 1
    }
}

.acct-net-label {
    color: #bcd6f2;
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px
}

.pix-prov-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
}

.pix-prov {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 13px;
    cursor: pointer;
    transition: .12s;
    border: 1px solid rgba(130, 185, 240, .22);
    background: linear-gradient(180deg, #487cb433, #1c3a6024);
    color: #dceaf9;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .02em
}

.pix-prov:hover {
    border-color: #96cdff73
}

.pix-prov.sel {
    border-color: #32bcad;
    color: #fff;
    background: linear-gradient(180deg, #32bcad38, #1446422e);
    box-shadow: 0 0 12px #32bcad4d
}

.pix-logo {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0
}

.wd-key-wrap {
    position: relative;
    padding-left: 6px;
    gap: 8px
}

.wd-keytype {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(130, 185, 240, .28);
    background: #28528659;
    color: #9fc2e8;
    font-size: 12.5px;
    font-weight: 800;
    transition: .12s
}

.wd-keytype:hover {
    border-color: #96cdff80
}

.wd-keytype.set {
    color: #74e6d6;
    border-color: #32bcad8c;
    background: #14464266
}

.wd-keymenu {
    margin-top: 6px;
    padding: 5px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(180deg, #0e2138, #0a1a2e);
    border: 1px solid rgba(130, 185, 240, .3);
    box-shadow: 0 8px 20px #0006
}

.wd-keymenu.hidden {
    display: none
}

.wd-keyopt {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    color: #cfe4fb;
    font-size: 13.5px;
    font-weight: 700;
    transition: .1s
}

.wd-keyopt:hover {
    background: #56aaff2e;
    color: #fff
}

.wd-kt-ic {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0
}

.wd-kt-ic svg {
    width: 16px;
    height: 16px;
    display: block
}

.wd-keytype .wd-kt-ic svg {
    width: 14px;
    height: 14px
}

.acct-divider {
    height: 1px;
    margin: 2px 0;
    background: linear-gradient(90deg, transparent, rgba(130, 185, 240, .28), transparent)
}

.acct-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 48px;
    border: 1px solid rgba(130, 185, 240, .26);
    border-radius: 12px;
    background: linear-gradient(180deg, #08142699, #0a1a2e80);
    box-shadow: inset 0 2px 6px #0006
}

.acct-prefix {
    color: #9fc2e8;
    font-weight: 800;
    font-size: 15px
}

.acct-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #eaf6ff;
    font-size: 16px;
    font-weight: 700
}

.acct-input::placeholder {
    color: #aac8eb73;
    font-weight: 600
}

.acct-btn {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .02em;
    transition: filter .12s, transform .08s
}

.acct-btn:active {
    transform: scale(.985)
}

.acct-btn:disabled {
    opacity: .6;
    cursor: default
}

.acct-btn-primary {
    background: linear-gradient(180deg, #3aa0ff, #1e6fd8 55%, #1758b4);
    box-shadow: 0 6px 16px #145ab480, inset 0 1.5px #ffffff4d, inset 0 -8px 14px #00000047;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.acct-btn-primary:hover {
    filter: brightness(1.08)
}

.acct-btn-ghost {
    background: linear-gradient(180deg, #487cb447, #1c3a6033);
    border: 1px solid rgba(130, 185, 240, .28);
    color: #d7e8fb
}

.acct-btn-ghost:hover {
    border-color: #96cdff80;
    color: #fff
}

.acct-btn-danger {
    background: linear-gradient(180deg, #962c386b, #5a182257);
    border: 1px solid rgba(230, 120, 130, .34);
    color: #ffd9dd
}

.acct-btn-danger:hover {
    filter: brightness(1.1);
    color: #fff
}

.acct-actions {
    display: flex;
    gap: 10px
}

.acct-actions .acct-btn {
    font-size: 15px;
    padding: 12px
}

.acct-result {
    color: #ff9aa2;
    font-size: 13px;
    font-weight: 700;
    text-align: center
}

.acct-result:empty {
    display: none
}

.acct-note {
    color: #b4cdeba8;
    font-size: 12px;
    line-height: 1.45;
    text-align: center
}

.acct-note strong {
    color: #cfe4fb
}

.acct-pix {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center
}

.acct-pix-amount {
    color: #eaf6ff;
    font-size: 26px;
    font-weight: 900
}

.acct-pix-label {
    color: #9fc2e8;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em
}

.acct-pix-code {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px dashed rgba(130, 185, 240, .4);
    border-radius: 11px;
    background: #06102099;
    color: #cfe4fb;
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-all;
    max-height: 92px;
    overflow-y: auto;
    user-select: all;
    -webkit-user-select: all
}

.acct-pix-qr {
    background: #fff;
    padding: 9px;
    border-radius: 13px;
    line-height: 0;
    box-shadow: 0 5px 16px #00000061
}

.acct-pix-qr img {
    display: block;
    width: 176px;
    height: 176px;
    image-rendering: pixelated
}

.acct-note-1l {
    white-space: nowrap;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.rollover {
    margin-bottom: 14px
}

.rollover-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    font-weight: 800;
    color: #9fc2e8;
    margin-bottom: 6px
}

.rollover-pct {
    color: #cfe4fb
}

.rollover.done .rollover-top {
    color: #7dffb0
}

.rollover-bar {
    height: 10px;
    border-radius: 6px;
    background: #ffffff1a;
    overflow: hidden;
    box-shadow: inset 0 1px 3px #00000073
}

.rollover-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #1f9d5e, #36e08a);
    transition: width .4s ease
}

.rollover.done .rollover-fill {
    background: linear-gradient(90deg, #2bd07a, #7dffb0)
}

.rollover-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #b4cdebb3;
    margin-top: 5px
}

.rollover-legend b {
    color: #dcebff;
    font-weight: 800
}

.acct-pix-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bcd6f2;
    font-size: 13px;
    font-weight: 700
}

.acct-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(150, 200, 250, .3);
    border-top-color: #4aa6ff;
    animation: acct-spin .8s linear infinite
}

@keyframes acct-spin {
    to {
        transform: rotate(360deg)
    }
}

.acct-ok-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #46d27a;
    box-shadow: 0 0 10px #46d27ab3
}

button.is-busy {
    display: flex !important;
    align-items: center;
    justify-content: center
}

.btn-spinner {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    box-sizing: border-box;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: acct-spin .7s linear infinite
}

.auth-submit .btn-spinner {
    position: relative;
    top: .8cqw
}

.acct-profile {
    display: flex;
    align-items: center;
    gap: 13px
}

.acct-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(150deg, #4a80b8, #16304e);
    border: 2px solid rgba(150, 200, 250, .4);
    color: #eaf6ff;
    font-weight: 900;
    font-size: 24px
}

.acct-id {
    min-width: 0
}

.acct-name {
    color: #eaf6ff;
    font-weight: 800;
    font-size: 16px
}

.acct-email {
    color: #9fc2e8;
    font-size: 13px;
    word-break: break-all
}

.pf-card {
    background: linear-gradient(180deg, #487cb424, #1c3a601a);
    border: 1px solid rgba(130, 185, 240, .14);
    border-radius: 14px;
    padding: 12px 14px
}

.pf-card .rollover {
    margin-bottom: 0
}

.acct-profile.pf-card {
    padding: 11px 13px
}

.pf-balance {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px
}

.pf-balance-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.pf-balance-label {
    color: #9fc2e8;
    font-size: 12px;
    font-weight: 700
}

.pf-balance strong {
    color: #eaf6ff;
    font-size: 24px;
    font-weight: 900
}

.pf-ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #82b9f024;
    border: 1px solid rgba(130, 185, 240, .22);
    color: #9fc2e8
}

.pf-ic svg {
    width: 18px;
    height: 18px
}

.pf-ic-bal {
    width: 40px;
    height: 40px
}

.pf-ic-bal svg {
    width: 21px;
    height: 21px
}

.pf-ic-win {
    color: #7dffb0;
    background: #7dffb01f;
    border-color: #7dffb042
}

.pf-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.pf-stat {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 11px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #487cb429, #1c3a601f);
    border: 1px solid rgba(130, 185, 240, .16)
}

.pf-stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.pf-stat-label {
    color: #9fc2e8;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap
}

.pf-stat-val {
    color: #eaf6ff;
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums
}

.pf-stat-win {
    color: #7dffb0
}

.pf-tabs {
    display: flex;
    gap: 5px;
    background: #0a182c80;
    padding: 4px;
    border-radius: 11px
}

.pf-tab {
    flex: 1;
    padding: 8px 4px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: .12s;
    background: transparent;
    color: #9fc2e8;
    font-size: 12.5px;
    font-weight: 800
}

.pf-tab.on {
    background: linear-gradient(180deg, #609cd880, #28528666);
    color: #fff
}

.pf-tab:hover:not(.on) {
    color: #cfe4fb
}

.pf-hist-head {
    color: #bcd6f2;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em
}

.pf-hist {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.pf-hist-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.pf-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 2px
}

.pf-pg {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 900;
    border: 1px solid rgba(130, 185, 240, .25);
    background: #2852864d;
    color: #cfe4fb;
    transition: .12s
}

.pf-pg:disabled {
    opacity: .35;
    cursor: default
}

.pf-pg:not(:disabled):hover {
    border-color: #96cdff80;
    color: #fff
}

.pf-pg-info {
    color: #9fc2e8;
    font-size: 12.5px;
    font-weight: 800;
    min-width: 46px;
    text-align: center
}

.pf-hist-loading,
.pf-hist-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9fc2e8;
    font-size: 13px;
    padding: 14px 0;
    font-weight: 600
}

.pf-hist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    background: #0a182c80;
    border: 1px solid rgba(130, 185, 240, .1)
}

.pf-hist-ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.pf-hist-ic svg {
    width: 14px;
    height: 14px
}

.pf-hist-row.win .pf-hist-ic {
    background: #2dc8782e;
    color: #5dffa0
}

.pf-hist-row.loss .pf-hist-ic {
    background: #dc3c462e;
    color: #ff7a88
}

.pf-hist-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1
}

.pf-hist-main b {
    color: #eaf6ff;
    font-size: 13.5px;
    font-weight: 800
}

.pf-hist-sub {
    color: #9fc2e8;
    font-size: 11.5px
}

.pf-hist-amt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    font-weight: 900;
    font-size: 14px;
    font-variant-numeric: tabular-nums
}

.pf-hist-row.win .pf-hist-amt {
    color: #5dffa0
}

.pf-hist-row.loss .pf-hist-amt {
    color: #ff8a96
}

.pf-hist-date {
    color: #7fa0c4;
    font-size: 10.5px;
    font-weight: 600
}

.pf-hist-row.tx .pf-hist-amt {
    color: #eaf6ff
}

.pf-hist-row.tx.ok .pf-hist-ic {
    background: #2dc8782e;
    color: #5dffa0
}

.pf-hist-row.tx.pend .pf-hist-ic {
    background: #ffbe3c2e;
    color: #ffce6a
}

.pf-hist-row.tx.bad .pf-hist-ic {
    background: #dc3c462e;
    color: #ff7a88
}

.pf-badge {
    display: inline-block;
    width: fit-content;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800
}

.pf-badge.ok {
    background: #2dc8782e;
    color: #7dffb0
}

.pf-badge.pend {
    background: #ffbe3c2e;
    color: #ffce6a
}

.pf-badge.bad {
    background: #dc3c462e;
    color: #ff8a96
}

.acct-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 8px 0
}

.acct-done-ic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #46d27a47, #1e784633);
    border: 2px solid rgba(70, 210, 122, .5);
    color: #6ff0a0
}

.acct-done-ic svg {
    width: 28px;
    height: 28px
}

.acct-done-title {
    color: #eaf6ff;
    font-weight: 900;
    font-size: 19px
}

.acct-done-sub {
    color: #b4cdebcc;
    font-size: 13px;
    line-height: 1.45
}

.pp-toast-wrap {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    pointer-events: none;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 0
}

.pp-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(92vw, 440px);
    padding: 11px 18px;
    border-radius: 13px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, #0a1c3efa, #030d22fc) padding-box, linear-gradient(150deg, #9fc6f0, #345f8e 60%, #6ea7da) border-box;
    box-shadow: 0 14px 32px #0000009e, 0 0 16px #24d6ff2e;
    color: #eaf6ff;
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(-170%);
    transition: opacity .3s ease, transform .42s cubic-bezier(.18, .9, .3, 1.45)
}

.pp-toast.show {
    opacity: 1;
    transform: translateY(0)
}

.pp-toast.leaving {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .3s ease, transform .3s ease
}

.pp-toast-ic {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    line-height: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45))
}

.pp-toast-ic svg {
    width: 21px;
    height: 21px;
    display: block
}

.pp-toast-msg {
    flex: 1 1 auto;
    min-width: 0
}

.pp-toast-info .pp-toast-ic {
    color: #bfe0ff
}

.pp-toast-error {
    background: linear-gradient(180deg, #7c202cfa, #3e1018fc) padding-box, linear-gradient(150deg, #ffb3bb, #b3434f 60%, #e98a93) border-box;
    box-shadow: 0 14px 32px #0000009e, 0 0 16px #ff5a6e42;
    color: #ffe9eb
}

.pp-toast-error .pp-toast-ic {
    color: #ffccd2
}

.pp-toast-success {
    background: linear-gradient(180deg, #185c38fa, #0b2c1bfc) padding-box, linear-gradient(150deg, #a7f0c4, #2f9a63 60%, #6fd79c) border-box;
    box-shadow: 0 14px 32px #0000009e, 0 0 16px #46d27a42;
    color: #e8fff2
}

.pp-toast-success .pp-toast-ic {
    color: #c6f7d8
}

.pp-toast-warning {
    background: linear-gradient(180deg, #7a5810fa, #3a2806fc) padding-box, linear-gradient(150deg, #ffe08a, #b8902f 60%, #e8c46a) border-box;
    box-shadow: 0 14px 32px #0000009e, 0 0 16px #ffc83c42;
    color: #fff3d6
}

.pp-toast-warning .pp-toast-ic {
    color: #ffe6a8
}

.stage.shake {
    animation: stage-shake .45s ease
}

@keyframes stage-shake {
    0%,
    to {
        transform: translate(0)
    }
    20% {
        transform: translate(-7px, 3px)
    }
    40% {
        transform: translate(6px, -4px)
    }
    60% {
        transform: translate(-5px, 2px)
    }
    80% {
        transform: translate(3px, -2px)
    }
}

#fxLayer {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    overflow: hidden
}

@media (max-width: 720px) {
    .topbar {
        padding: 8px 10px;
        gap: 8px
    }
}

@media (max-width: 420px) {
    .result-text {
        font-size: 2.5rem
    }
}

@media (min-aspect-ratio: 941 / 1672) {
    .wm-panel-img {
        width: min(90%, 533px)
    }
    .auth-panel {
        width: min(92%, 520px)
    }
    .demo-badge {
        top: 11%
    }
    .aim-prompt {
        top: 16%
    }
    .aim-prompt.golden-shift {
        top: 19%
    }
}

@media (max-height: 730px) {
    .aim-prompt.golden-shift {
        top: 38%
    }
}