:root {
    --bg: #0b0f14;
    --card: #121923;
    --text: #eef2f6;
    --muted: #9fb0c3;
    --accent: #7dd3fc;
    --ok: #34d399;
    --warn: #fbbf24;
    --line: #1d2736;
    --app-max-width: 896px;
    --app-height: 100dvh;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --content-width: min(100vw, var(--app-max-width));
    --main-art-width: min(100vw, var(--app-max-width));
    --nav-height: clamp(72px, calc((var(--content-width) - 8px) * 0.205), 156px);
    --button-text-panel-bg: rgba(255, 226, 154, 0.74);
    --button-text-panel-border: rgba(91, 36, 48, 0.36);
    --button-text-panel-glow: rgba(74, 25, 41, 0.24);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    height: var(--app-height, 100dvh);
    min-height: 100svh;
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    position: fixed;
    inset: 0;
    margin: 0;
    background: #344760;
    color: var(--text);
    font-family: "Inter", system-ui, Arial, sans-serif;
    height: var(--app-height, 100dvh);
    min-height: 100svh;
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    overflow: hidden;
    letter-spacing: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

img,
button,
.btn-icon,
.bmp-glyph,
.balance-digit,
.energy-digit,
.upgrades-skin,
.withdraw-skin,
.referral-skin,
.tasks-skin,
.upg-slot,
.wth-slot,
.ref-slot,
.task-btn {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

body:not(.app-loaded) {
    overflow: hidden;
}

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: #000;
    min-height: 100svh;
    min-height: var(--app-height, 100dvh);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    pointer-events: auto;
    overflow: hidden;
}

.loading-gif {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    image-rendering: auto;
}

body.app-loaded .loading-screen {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app {
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.app-loaded .app {
    opacity: 1;
}

.app {
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    height: var(--app-height, 100dvh);
    min-height: 100svh;
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    padding: 0 0 calc(var(--nav-height) + var(--app-safe-bottom) + 10px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: transparent;
}

@media (min-width: 521px) {
    .app {
        padding-bottom: calc(var(--nav-height) + var(--app-safe-bottom) + 10px);
    }
}

.top {
    width: 100%;
    position: relative;
    z-index: 10;
    padding: calc(max(var(--app-safe-top), 0px) + clamp(4px, 1dvh, 10px)) 0 0;
    border-top: 0;
    background: transparent;
    backdrop-filter: none;
    filter: none;
}

.top::after {
    display: none;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    min-height: 8px;
    border-bottom: 1px solid var(--line);
    background: rgba(8, 12, 18, .9);
    backdrop-filter: blur(6px);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.bottom-bar {
    padding: 0;
    margin-top: 0;
    height: 8px;
    min-height: 8px;
    border-top: none;
    border-bottom: 1px solid var(--line);
}

.balance-pill {
    background-image: url('/images/balance_frame.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 800;
    font-size: 22px;
    image-rendering: pixelated;
    width: 100%;
    height: calc((var(--content-width) / 4) * 0.8);
    max-height: calc((var(--app-max-width) / 4) * 0.8);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.balance-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin-top: -2px;
}

#balance {
    display: inline-flex;
    align-items: center;
    gap: 0px;
}

.balance-digit {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    flex-shrink: 0;
    vertical-align: middle;
    transition: opacity 0.35s ease-out, transform 0.35s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
    margin: 0;
}

.balance-digit.digit-bump,
.energy-digit.digit-bump,
.balance-digit.digit-change,
.energy-digit.digit-change {
    animation: digitBump 0.24s ease-out;
}

.balance-digit.digit-enter,
.energy-digit.digit-enter {
    animation: digitBump 0.24s ease-out;
}

.balance-digit.digit-leave,
.energy-digit.digit-leave {
    animation: digitLeave 0.2s ease-out forwards;
}

@keyframes digitBump {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-3px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes digitEnter {
    0% { opacity: 0; transform: translateY(4px) scale(.86); }
    65% { opacity: 1; transform: translateY(-2px) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes digitLeave {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(3px) scale(.86); }
}


.balance-digit[data-digit="0"] { background-image: url('/digits/balance_0.png'); }
.balance-digit[data-digit="1"] { background-image: url('/digits/balance_1.png'); }
.balance-digit[data-digit="2"] { background-image: url('/digits/balance_2.png'); }
.balance-digit[data-digit="3"] { background-image: url('/digits/balance_3.png'); }
.balance-digit[data-digit="4"] { background-image: url('/digits/balance_4.png'); }
.balance-digit[data-digit="5"] { background-image: url('/digits/balance_5.png'); }
.balance-digit[data-digit="6"] { background-image: url('/digits/balance_6.png'); }
.balance-digit[data-digit="7"] { background-image: url('/digits/balance_7.png'); }
.balance-digit[data-digit="8"] { background-image: url('/digits/balance_8.png'); }
.balance-digit[data-digit="9"] { background-image: url('/digits/balance_9.png'); }
.balance-digit[data-digit="."] { 
    width: 16px;
    height: 40px;
    background-image: url('/digits/balance_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    vertical-align: bottom;
}

.balance-pill .muted {
    font-weight: 600;
    color: var(--muted);
    font-size: 14px
}

.center {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}

.center::before {
    content: "";
    position: absolute;
    left: 50%;
    top: clamp(4px, 1dvh, 14px);
    width: min(100vw, var(--app-max-width));
    height: min(100vw, var(--app-max-width));
    transform: translateX(-50%);
    background: url('/images/background.png') center / 100% 100% no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    z-index: 0;
}

.coin-wrap {
    position: relative;
    z-index: 1;
    margin-top: clamp(10px, 2dvh, 20px);
}

.coin {
    width: clamp(238px, 58vw, 390px);
    height: clamp(238px, 58vw, 390px);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: manipulation;
    transition: transform .28s cubic-bezier(.18, .88, .22, 1);
    padding: 0;
    cursor: pointer;
    -webkit-touch-callout: none;
    position: relative;
    transform-origin: center center;
    will-change: transform;
}

.coin::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 34%, rgba(255, 255, 255, 0) 35%),
        radial-gradient(circle, rgba(255, 216, 90, 0.35) 0 48%, rgba(255, 216, 90, 0) 64%);
    opacity: 0;
    transform: scale(0.55);
    transform-origin: center;
    pointer-events: none;
    z-index: 0;
}

.coin:hover {
    transform: none;
}

.coin-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
    filter: none;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.coin:active {
    transform: scale(1.01);
}

.coin.tapped {
    animation: coinTap 0.42s cubic-bezier(.18, .92, .22, 1.08) both;
}

.coin.tapped::before {
    animation: coinBubble 0.48s cubic-bezier(.15, .78, .22, 1) both;
}




@keyframes coinBubble {
    0% { opacity: 0; transform: scale(0.55); filter: blur(0); }
    16% { opacity: 0.72; transform: scale(0.82); filter: blur(0); }
    58% { opacity: 0.28; transform: scale(1.22); filter: blur(1px); }
    100% { opacity: 0; transform: scale(1.46); filter: blur(2px); }
}

.coin:active .coin-image {
    transform: translateZ(0) scale(1);
    -webkit-transform: translateZ(0) scale(1);
    filter: none;
}

.float,
.tap-float {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 1000;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8));
    will-change: transform, opacity;
}

.tap-float {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    z-index: 2147483000;
    min-width: max-content;
    transform: translate(-50%, -50%);
    animation: tapFloatUp 1.08s cubic-bezier(.12, .78, .22, 1) forwards;
}

.tap-float-glyph {
    width: clamp(24px, 6.5vw, 36px);
    height: clamp(24px, 6.5vw, 36px);
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.tap-float-plus {
    width: clamp(22px, 6vw, 34px);
    height: clamp(22px, 6vw, 34px);
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    margin-right: 2px;
}

.tap-float-text {
    color: #111;
    font: 900 clamp(24px, 6.5vw, 36px) / 1 monospace;
    letter-spacing: 1px;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}

@keyframes tapFloatUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%) scale(.76);
    }
    18% {
        opacity: 1;
        transform: translate(calc(-50% + var(--float-x, 0px) * .16), -72%) scale(1.08);
    }
    58% {
        opacity: .86;
        transform: translate(calc(-50% + var(--float-x, 0px) * .64), -108px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--float-x, 0px)), -154px) scale(.88);
    }
}

.energy-wrapper {
    margin: clamp(-76px, -9dvh, -44px) auto clamp(6px, 1.6dvh, 14px);
    width: 100%;
    max-width: min(100vw, var(--app-max-width));
    position: relative;
    pointer-events: auto;
}

.energy {
    width: 100%;
    background-image: url('/images/energy_frame.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0;
    padding: 4px 8px 5px;
    image-rendering: pixelated;
    height: calc((var(--content-width) / 4) * 0.62);
    max-height: calc((var(--app-max-width) / 4) * 0.62);
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.energy-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, 0.9vw, 6px);
    width: 100%;
    position: relative;
    z-index: 2;
    height: 100%;
    justify-content: center;
}

.energy-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    margin-top: 0;
    min-height: clamp(36px, 8vw, 48px);
    min-width: clamp(118px, 38vw, 230px);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

#energyCount,
#energyMax {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.energy-bar-container {
    width: 84%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    margin-top: 0;
    height: clamp(18px, 4.8vw, 25px);
    min-height: 18px;
    flex-shrink: 0;
    overflow: visible;
}

.energy-bar {
    width: 100%;
    height: 100%;
    min-height: 18px;
    display: block;
    object-fit: fill;
    object-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 21;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .72));
    transition: opacity .12s ease-out, transform .12s ease-out;
}

.energy-bar[src] {
    opacity: 1;
}

#energyCount {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

#energyMax {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.energy-slash {
    display: inline-block;
    width: 16px;
    height: 28px;
    background-image: url('/digits/energy_slash.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    flex-shrink: 0;
    vertical-align: middle;
}

.energy-digit {
    display: inline-block;
    width: 20px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    flex-shrink: 0;
    vertical-align: middle;
    transition: opacity 0.35s ease-out, transform 0.35s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
}

.energy-digit[data-digit="0"] { background-image: url('/digits/energy_digit_0.png'); }
.energy-digit[data-digit="1"] { background-image: url('/digits/energy_digit_1.png'); }
.energy-digit[data-digit="2"] { background-image: url('/digits/energy_digit_2.png'); }
.energy-digit[data-digit="3"] { background-image: url('/digits/energy_digit_3.png'); }
.energy-digit[data-digit="4"] { background-image: url('/digits/energy_digit_4.png'); }
.energy-digit[data-digit="5"] { background-image: url('/digits/energy_digit_5.png'); }
.energy-digit[data-digit="6"] { background-image: url('/digits/energy_digit_6.png'); }
.energy-digit[data-digit="7"] { background-image: url('/digits/energy_digit_7.png'); }
.energy-digit[data-digit="8"] { background-image: url('/digits/energy_digit_8.png'); }
.energy-digit[data-digit="9"] { background-image: url('/digits/energy_digit_9.png'); }
.energy-digit[data-digit="."] { 
    width: 12px;
    height: 28px;
    background-image: url('/digits/energy_dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    vertical-align: bottom;
}

.bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding-bottom: var(--app-safe-bottom);
    pointer-events: auto;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

body.modal-open .bottom {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}

.bottom .wrap {
    display: flex;
    width: 100%;
    max-width: var(--app-max-width);
    height: var(--nav-height);
    gap: 0;
    padding: 0 4px;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
}

.bottom::before {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 8px;
    min-height: 8px;
    border-bottom: 1px solid var(--line);
    background: rgba(8, 12, 18, .9);
    backdrop-filter: blur(6px);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--card);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    -ms-touch-action: manipulation;
    
    -khtml-user-select: none;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}


.btn:not(.bottom .wrap .btn):not(.bottom .wrap .nav-btn) > * {
    pointer-events: none !important;
}


.bottom .wrap .nav-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    max-height: none;
    aspect-ratio: 266 / 208;
    padding: 0;
    margin: 0;

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

    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    z-index: auto;
    will-change: auto;
    backface-visibility: visible;
    transform: none;

    cursor: pointer;
    pointer-events: auto !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    position: relative;
    overflow: visible;
    transform-origin: center bottom;
    transition: transform .12s ease-out;
}


.bottom .wrap .nav-btn .btn-icon {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    image-rendering: pixelated;
    transform: none;
}

.bottom .wrap .nav-btn .nav-label {
    display: none;
}


.bottom .wrap .nav-btn:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.bottom .wrap .nav-btn:active {
    transform: scale(0.97);
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
}


.btn:hover:not(:disabled):not(.bottom .wrap .nav-btn) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.btn:active:not(:disabled):not(.bottom .wrap .nav-btn) {
    transform: scale(.96) translateY(1px) translateZ(0);
    -webkit-transform: scale(.96) translateY(1px) translateZ(0);
    opacity: .9;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.ok {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.1));
    border-color: rgba(52, 211, 153, 0.4);
    color: var(--ok);
}

.btn.ok:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.3), rgba(52, 211, 153, 0.2));
    border-color: rgba(52, 211, 153, 0.6);
}

.btn.warn {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
    border-color: rgba(251, 191, 36, 0.4);
    color: var(--warn);
}

.btn.warn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.2));
    border-color: rgba(251, 191, 36, 0.6);
}

input.btn,
select.btn {
    text-align: left;
    cursor: text;
    width: 100%;
    min-height: 44px;
    font-family: inherit;
}

input.btn:focus,
select.btn:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(125, 211, 252, 0.05);
}

select.btn {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239fb0c3' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.btn-icon {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
    margin: 0;
    padding: 0;
    pointer-events: none !important;
    user-select: none;
    position: relative;
    z-index: 1;
}


.btn.bounce {
    animation: bounceIn .22s ease-out;
}

@keyframes bounceIn {
    0% {
        transform: scale(.85) translateY(3px);
    }
    60% {
        transform: scale(1.12) translateY(-2px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}
.muted {
    color: var(--muted);
    font-size: 13px
}
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(32, 103, 75, .24);
    backdrop-filter: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease-out;
}

.sheet {
    width: 100%;
    max-width: var(--app-max-width);
    background: #0e1621;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    padding: 16px;
    position: relative;
    z-index: 41;
    pointer-events: auto;
}


#upgradesModal .sheet,
#tasksModal .sheet,
#withdrawModal .sheet,
#friendsModal .sheet {
    width: 100vw;
    max-width: none;
    height: 100svh;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
}

#tasksModal .sheet {
    background: transparent;
}

/* ===== Tasks background (background_tasks.png) ===== */
.tasks-skin {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: var(--app-height, 100dvh);
    background: url("/images/background_tasks.png") center / 100% 100% no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}

.task-close {
    position: absolute;
    top: 3.2%;
    right: 4.4%;
    width: clamp(28px, 7.2%, 44px);
    aspect-ratio: 56 / 64;
    padding: 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 8;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.task-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

/* ===== Upgrades background (background_upgrades.png) ===== */
.upgrades-skin {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: var(--app-height, 100dvh);
    background: url("/images/background_upgrades.png") center / 100% 100% no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}


.upg-close {
    position: absolute;
    top: 3.2%;
    right: 4.4%;
    width: clamp(28px, 7.2%, 44px);
    aspect-ratio: 56 / 63;
    padding: 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 8;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.upg-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}


.upg-slot {
    position: absolute;
    left: 5.6%;
    width: 88.8%;
    aspect-ratio: 868 / 245;
    min-height: 0;
    border: 0;
    padding: 0;
    background: url("/images/upgrade_button.png") center / 100% 100% no-repeat;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}


.upg-1 { top: 14.8%; }
.upg-2 { top: 33.7%; }
.upg-3 { top: 52.6%; }
.upg-4 { top: 71.5%; }


.upg-text {
    position: absolute;
    left: 7.2%;
    top: 15%;
    right: 7.2%;
    bottom: 14%;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.34dvh, 5px);
    pointer-events: none;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
    padding: clamp(4px, 0.9vw, 8px) clamp(7px, 1.6vw, 13px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 0;
    max-height: 100%;
}


.upg-line2 {
    margin-left: 0;
    text-align: left;
}

.upg-line3 {
    margin-left: 0;
    text-align: left;
}

/* ===== Withdraw background (background_withdraw.png) ===== */
.withdraw-skin {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: var(--app-height, 100dvh);
    background: url("/images/background_withdraw.png") center / 100% 100% no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}


.wth-close {
    position: absolute;
    top: 3.2%;
    right: 4.4%;
    width: clamp(28px, 7.2%, 44px);
    aspect-ratio: 56 / 63;
    padding: 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 8;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.wth-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}


.wth-slot {
    position: absolute;
    left: 6.6%;
    width: 86.8%;
    aspect-ratio: 868 / 196;
    min-height: 0;
    border: 0;
    padding: 0;
    background: url("/images/withdraw_button.png") center / 100% 100% no-repeat;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}

.wth-1 { top: 13.7%; }
.wth-2 { top: 27.4%; }
.wth-3 { top: 41.1%; }
.wth-4 { top: 54.8%; }
.wth-5 { top: 68.5%; }
.wth-6 { top: 82.2%; }


.wth-text {
    position: absolute;
    left: 6.5%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.wth-label {
    position: absolute;
    left: 8.4%;
    top: 18%;
    right: 8.4%;
    pointer-events: none;
    max-width: 100%;
    overflow: hidden;
    min-height: clamp(25px, 5.6vw, 38px);
    padding: clamp(3px, 0.7vw, 6px) clamp(7px, 1.5vw, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 0;
    max-height: 42%;
}

.wth-value {
    position: absolute;
    left: 8.4%;
    top: 57%;
    right: 8.4%;
    pointer-events: none;
    cursor: default;
    min-height: clamp(25px, 5.6vw, 38px);
    outline: none;
    padding: clamp(3px, 0.7vw, 6px) clamp(7px, 1.5vw, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 0;
    max-height: 42%;
}

.wth-slot.wallet-connected .wth-label {
    background: transparent;
    border-color: transparent;
}

.ref-text .bmp-line,
.ref-label .bmp-line {
    justify-content: center;
    align-self: center;
}

.wth-label .bmp-line,
.wth-value .bmp-line {
    justify-content: center;
    align-self: center;
}

.wth-1 .wth-label {
    inset: 0 8.4%;
    min-height: 100%;
    justify-content: center;
}

.wth-6 .wth-label {
    top: 20%;
}

.wth-6 .wth-value {
    top: 55%;
}

.task-text .bmp-line {
    justify-content: flex-start;
    align-self: flex-start;
}

.upg-text .bmp-line {
    justify-content: flex-start;
    align-self: flex-start;
}

.ton-connect-root {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ===== Referral background (background_referrals.png) ===== */
.referral-skin {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: var(--app-height, 100dvh);
    background: url("/images/background_referrals.png") center / 100% 100% no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}


.ref-close {
    position: absolute;
    top: 3.2%;
    right: 4.4%;
    width: clamp(28px, 7.2%, 44px);
    aspect-ratio: 56 / 63;
    padding: 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 8;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ref-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}


.ref-slot {
    position: absolute;
    left: 5.8%;
    width: 88.4%;
    aspect-ratio: 868 / 174;
    min-height: 0;
    border: 0;
    padding: 0;
    background: url("/images/referral_button.png") center / 100% 100% no-repeat;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}

.ref-1 {
    top: 14.7%;
}

.ref-2 {
    top: 31.6%;
    cursor: pointer;
}

.ref-3 {
    top: 48.5%;
    cursor: pointer;
}

.ref-4 {
    top: 65.4%;
}


.ref-text {
    position: absolute;
    left: 7%;
    top: 12%;
    right: 7%;
    bottom: 11%;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.24dvh, 4px);
    pointer-events: none;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: clamp(4px, 0.9vw, 8px) clamp(7px, 1.6vw, 13px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 0;
    max-height: 100%;
}

.ref-label {
    position: absolute;
    left: 9%;
    top: 50%;
    right: 9%;
    transform: translateY(-50%);
    pointer-events: none;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    min-height: clamp(34px, 7vw, 52px);
    padding: clamp(4px, 0.9vw, 8px) clamp(8px, 1.8vw, 14px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 0;
    max-height: 100%;
}

.ref-plain-line {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(15px, 3.8vw, 20px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    color: #111111;
    text-align: center;
    text-transform: uppercase;
}

.ref-text .ref-plain-line {
    font-size: clamp(13px, 3.35vw, 18px);
}

.ref-text .bmp-glyph,
.ref-label .bmp-glyph {
    width: var(--gW, 13px) !important;
    height: var(--gH, 13px) !important;
    max-width: var(--gW, 13px) !important;
}

.ref-value {
    position: absolute;
    right: 6.5%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

.sheet-full {
    height: 100svh;
    height: var(--app-height, 100dvh);
    border-radius: 0;
    transform: translateY(100%);
    transition: transform .25s ease-out;
    display: block;
    overflow: hidden;
}

.overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.overlay.open .sheet {
    pointer-events: auto;
}

.overlay.open .sheet * {
    pointer-events: none;
}

.overlay.open .upg-slot {
    pointer-events: auto !important;
}

.overlay.open .wth-slot,
.overlay.open .ref-slot,
.overlay.open .task-btn,
.overlay.open .upg-close,
.overlay.open .wth-close,
.overlay.open .ref-close,
.overlay.open .task-close {
    pointer-events: auto !important;
}

.overlay.open .sheet-full {
    transform: translateY(0);
}

.tasks-list {
    position: absolute;
    left: 8.5%;
    right: 8.5%;
    top: 11.2%;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.8dvh, 24px);
    z-index: 3;
}

.task-btn {
    width: 100%;
    aspect-ratio: 868 / 174;
    min-height: 0;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.upg-slot.text-needs-room {
    min-height: 0;
}

.wth-slot.text-needs-room {
    min-height: 0;
}

.ref-slot.text-needs-room {
    min-height: 0;
}

.task-btn.text-needs-room {
    min-height: 0;
}

.task-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/images/tasks_button.png") center / 100% 100% no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.task-btn .task-text {
    position: absolute;
    left: 7%;
    top: 17%;
    right: 7%;
    bottom: 16%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2px, 0.34dvh, 5px);
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    padding: clamp(4px, 0.9vw, 8px) clamp(7px, 1.6vw, 13px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 0;
    max-height: 100%;
}


.bmp-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    width: max-content;
    max-width: none;
    min-height: var(--gH, 16px);
    overflow: visible;
    row-gap: 4px;
    flex: 0 1 auto;
}


.bmp-glyph {
    width: var(--gW, 22px);
    height: var(--gH, 22px);
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    user-select: none;
    pointer-events: none;
}

.bmp-glyph-uniform {
    width: var(--gW, 22px) !important;
    min-width: var(--gW, 22px) !important;
    max-width: var(--gW, 22px) !important;
    height: var(--gH, 22px) !important;
    flex: 0 0 var(--gW, 22px);
    object-fit: fill;
}

.bmp-glyph-symbol {
    object-fit: contain;
}

.bmp-glyph-fallback {
    width: var(--gW, 22px);
    min-width: var(--gW, 22px);
    max-width: var(--gW, 22px);
    height: var(--gH, 22px);
    flex: 0 0 var(--gW, 22px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-family: "Courier New", "Lucida Console", monospace;
    font-size: calc(var(--gH, 22px) * 0.92);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    overflow: hidden;
    -webkit-font-smoothing: none;
    text-rendering: geometricPrecision;
}

.bmp-glyph-fallback[data-fallback-char="!"],
.bmp-glyph-fallback[data-fallback-char="'"] {
    width: calc(var(--gW, 22px) * 0.55);
    min-width: calc(var(--gW, 22px) * 0.55);
    max-width: calc(var(--gW, 22px) * 0.55);
    flex-basis: calc(var(--gW, 22px) * 0.55);
}

.bmp-glyph-fallback[data-fallback-char="/"] {
    width: calc(var(--gW, 22px) * 0.72);
    min-width: calc(var(--gW, 22px) * 0.72);
    max-width: calc(var(--gW, 22px) * 0.72);
    flex-basis: calc(var(--gW, 22px) * 0.72);
}

.bmp-glyph-fallback[data-fallback-char="_"] {
    align-items: flex-end;
    padding-bottom: calc(var(--gH, 22px) * 0.08);
}


.bmp-space {
    width: var(--spaceW, 10px);
    height: 1px;
    display: inline-block;
}

.upgrades-skin,
.tasks-skin,
.withdraw-skin,
.referral-skin {
    width: min(100vw, var(--app-max-width));
    max-width: var(--app-max-width);
    margin: 0 auto;
}

.upg-close,
.wth-close,
.ref-close,
.task-close {
    top: 3.2%;
    right: 4.4%;
    width: clamp(42px, 10vw, 58px);
    height: auto;
    aspect-ratio: 56 / 63;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
}

.task-close {
    aspect-ratio: 56 / 64;
}

.upg-close img,
.wth-close img,
.ref-close img,
.task-close img {
    width: 74%;
    height: 74%;
    filter: none;
}

.upg-close:active,
.wth-close:active,
.ref-close:active,
.task-close:active,
.upg-slot:active,
.wth-slot:active,
.ref-slot:active,
.task-btn:active {
    transform: translateY(1px) scale(0.985);
}

.upg-slot,
.wth-slot,
.ref-slot,
.task-btn {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.26));
}

.tasks-list {
    top: 11.2%;
    gap: clamp(12px, 1.8dvh, 24px);
}

.task-btn {
    min-height: clamp(72px, 19vw, 116px);
}

@media (pointer: fine) {
    button,
    .coin,
    .nav-btn,
    .upg-slot,
    .wth-slot,
    .ref-slot,
    .task-btn,
    .upg-close,
    .wth-close,
    .ref-close,
    .task-close {
        cursor: pointer;
    }
}

strong {
    font-weight: 700;
    color: var(--text);
    font-size: 16px;
}

#friendsModal button.btn,
#tasksModal button.btn {
    min-height: 44px;
    font-weight: 600;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 10;
}

button:disabled,
input:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.api-test-panel {
    position: fixed;
    top: calc(var(--app-safe-top) + 8px);
    right: 8px;
    width: min(360px, calc(100vw - 16px));
    z-index: 1500;
    border: 1px solid rgba(122, 209, 255, 0.35);
    border-radius: 14px;
    background: rgba(8, 14, 24, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.api-test-panel.collapsed .api-test-body {
    display: none;
}

.api-test-toggle {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(122, 209, 255, 0.2);
    background: linear-gradient(180deg, rgba(34, 52, 84, 0.96), rgba(15, 25, 43, 0.96));
    color: #d9edff;
    font-size: 12px;
    letter-spacing: 0.12em;
    font-weight: 800;
    padding: 10px 12px;
    text-align: left;
}

.api-test-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(52vh, 390px);
}

.api-test-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.api-test-btn {
    border: 1px solid rgba(125, 211, 252, 0.45);
    border-radius: 10px;
    background: rgba(26, 42, 68, 0.88);
    color: #eef7ff;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 8px;
    text-align: center;
}

.api-test-btn:active {
    transform: translateY(1px) scale(0.99);
}

.api-test-output {
    margin: 0;
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 10px;
    background: rgba(7, 14, 24, 0.96);
    color: #d9f0ff;
    font-size: 11px;
    line-height: 1.35;
    padding: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    min-height: 84px;
    max-height: 220px;
}

@media (max-width: 520px) {
    .api-test-panel {
        top: calc(var(--app-safe-top) + 4px);
        right: 4px;
        width: calc(100vw - 8px);
    }
}

/* ===================== DAILY BONUS TASK STYLE ===================== */

.burros-daily-task-btn.is-loading {
    opacity: 0.68;
    filter: saturate(0.8);
}

.burros-daily-task-btn.is-claimed {
    opacity: 0.72;
    cursor: default;
}

/* ===================== GAME SCREEN POLISH ===================== */

html,
body,
.app,
.app *,
.overlay,
.overlay *,
.loading-screen,
.loading-screen * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

button:focus,
button:focus-visible {
    outline: none;
}

.app img,
.overlay img,
.loading-screen img {
    pointer-events: none;
    -webkit-user-drag: none !important;
}

.app {
    position: relative;
    isolation: isolate;
}

.app::before {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: var(--app-height, 100dvh);
    background: url('/images/background.png') center / cover no-repeat;
    image-rendering: auto;
    pointer-events: none;
    z-index: 0;
}

.top,
.center,
.energy-wrapper {
    position: relative;
    z-index: 1;
}

.center::before {
    display: none;
}

.center {
    align-items: center;
    justify-content: center;
}

.coin-wrap {
    margin-top: 0;
    transform: translate3d(0, 0, 0);
}

.coin {
    width: clamp(236px, min(64vw, 43dvh), 382px);
    height: clamp(236px, min(64vw, 43dvh), 382px);
    transition: transform 0.1s ease-out;
}

.coin-image {
    image-rendering: auto;
}

.coin:active {
    transform: scale(0.94);
}

.coin.tapped {
    animation: coinTap 0.36s cubic-bezier(.2, .86, .2, 1.18) both;
}




.energy-wrapper {
    width: min(calc(100vw - 4px), var(--app-max-width));
    margin: clamp(-70px, -7.8dvh, -40px) auto clamp(8px, 1.3dvh, 16px);
}

.energy {
    aspect-ratio: 8 / 1;
    height: auto;
    min-height: 50px;
    max-height: 96px;
    padding: 0;
    display: block;
    overflow: visible;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.42));
    box-shadow: none;
}

.energy-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.energy-numbers {
    position: absolute;
    left: clamp(24px, 5.2vw, 52px);
    right: clamp(24px, 5.2vw, 52px);
    top: 11%;
    min-width: 0;
    min-height: clamp(18px, 4.7vw, 34px);
    justify-content: flex-start;
    gap: clamp(1px, 0.45vw, 3px);
}

#energyCount,
#energyMax {
    gap: clamp(1px, 0.35vw, 2px);
}

.energy-slash {
    width: clamp(10px, 2.7vw, 18px);
    height: clamp(18px, 4.7vw, 34px);
}

.energy-digit {
    width: clamp(13px, 3.3vw, 22px);
    height: clamp(18px, 4.7vw, 34px);
}

.energy-digit[data-digit="."] {
    width: clamp(8px, 2vw, 13px);
    height: clamp(18px, 4.7vw, 34px);
}

.energy-bar-container {
    position: absolute;
    left: clamp(22px, 4.2vw, 42px);
    right: clamp(22px, 4.2vw, 42px);
    bottom: clamp(7px, 1.65vw, 16px);
    width: auto;
    height: clamp(9px, 2.3vw, 18px);
    min-height: 0;
    display: block;
    overflow: visible;
}

.energy-bar {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: fill;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Final mobile fit: existing PNG skins/glyphs only. */
.balance-pill {
    height: clamp(78px, 20.5vw, 122px);
    padding: 0 clamp(8px, 2vw, 18px);
    gap: clamp(4px, 1.2vw, 10px);
    overflow: hidden;
}

#balance {
    max-width: calc(100% - clamp(42px, 12vw, 66px));
    justify-content: center;
    overflow: hidden;
}

.balance-digit {
    width: clamp(29px, 7.9vw, 42px);
    height: clamp(38px, 10.3vw, 56px);
    background-size: 100% 100%;
}

.balance-digit[data-digit="."] {
    width: clamp(10px, 2.8vw, 16px);
    height: clamp(38px, 10.3vw, 56px);
    background-size: contain;
}

.balance-icon {
    width: clamp(42px, 12vw, 66px);
    height: clamp(42px, 12vw, 66px);
    margin-top: clamp(-8px, -1.2vw, -3px);
}

.coin-wrap {
    transform: translate3d(0, clamp(-24px, -2.8dvh, -8px), 0);
}

.energy-wrapper {
    width: min(100vw, var(--app-max-width));
    margin: clamp(-88px, -9.6dvh, -52px) auto clamp(6px, 1.1dvh, 12px);
}

.energy {
    min-height: 58px;
    max-height: 108px;
}

.energy-numbers {
    top: 8%;
    left: clamp(28px, 6vw, 58px);
    right: clamp(24px, 5vw, 50px);
}

.energy-bar-container {
    left: clamp(24px, 4.8vw, 46px);
    right: clamp(24px, 4.8vw, 46px);
    bottom: clamp(8px, 1.8vw, 18px);
    height: clamp(11px, 2.7vw, 20px);
}

.energy-digit,
.energy-slash {
    background-size: 100% 100%;
}

.energy-digit[data-digit="."] {
    background-size: contain;
}

.nav-glyph-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(6px, 1.7vw, 13px);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.nav-glyph-line {
    justify-content: center;
    align-self: center;
    filter: none;
}

.nav-glyph-line .bmp-glyph {
    width: var(--gW, 8px) !important;
    min-width: var(--gW, 8px) !important;
    max-width: var(--gW, 8px) !important;
    height: var(--gH, 8px) !important;
    object-fit: fill;
}

.bmp-glyph-uniform {
    object-fit: fill;
    object-position: center;
}

.ref-plain-line {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ref-plain-line .bmp-line {
    justify-content: center;
    align-self: center;
}

.upg-close,
.wth-close,
.ref-close,
.task-close {
    top: max(5.2%, calc(var(--app-safe-top) + 12px));
    right: clamp(12px, 5vw, 30px);
    width: clamp(58px, 14.6vw, 82px);
    min-width: 54px;
    min-height: 54px;
    z-index: 30;
}

.upg-close img,
.wth-close img,
.ref-close img,
.task-close img {
    width: 66%;
    height: 66%;
}

/* Restore the old clean game look from the reference screens. */
:root {
    --nav-height: clamp(72px, calc(var(--content-width) * 0.197), 94px);
}

.nav-glyph-wrap {
    display: none !important;
}

.balance-pill {
    height: clamp(66px, 18.2vw, 86px);
    gap: clamp(3px, 1vw, 8px);
}

#balance {
    max-width: calc(100% - clamp(38px, 11vw, 56px));
}

.balance-digit {
    width: clamp(28px, 8.6vw, 42px);
    height: clamp(36px, 10.2vw, 50px);
}

.balance-digit[data-digit="."] {
    width: clamp(10px, 3vw, 15px);
    height: clamp(36px, 10.2vw, 50px);
}

.balance-icon {
    width: clamp(38px, 11vw, 56px);
    height: clamp(38px, 11vw, 56px);
    margin-top: clamp(-7px, -1vw, -2px);
}

.coin-wrap {
    transform: translate3d(0, clamp(-82px, -9.8dvh, -48px), 0);
}

.coin {
    width: clamp(238px, min(67vw, 42dvh), 318px);
    height: clamp(238px, min(67vw, 42dvh), 318px);
}

.energy-wrapper {
    width: min(100vw, var(--app-max-width));
    margin: clamp(-144px, -15.4dvh, -86px) auto clamp(5px, 1dvh, 10px);
    transform: translate3d(0, clamp(-40px, -4.8dvh, -22px), 0);
}

.energy {
    min-height: clamp(62px, 16.4vw, 82px);
    max-height: 98px;
}

.energy-numbers {
    top: 10%;
    left: clamp(30px, 7vw, 58px);
    right: clamp(26px, 6vw, 52px);
}

.energy-bar-container {
    left: clamp(24px, 5.2vw, 46px);
    right: clamp(24px, 5.2vw, 46px);
    bottom: clamp(8px, 2vw, 16px);
    height: clamp(10px, 2.6vw, 18px);
}

.bottom .wrap .nav-btn .btn-icon {
    width: 100%;
    height: 100%;
}

.upg-close,
.wth-close,
.ref-close,
.task-close {
    top: max(2.6%, calc(var(--app-safe-top) + 8px));
    right: clamp(10px, 4.2vw, 26px);
    width: clamp(58px, 13.5vw, 72px);
    min-width: 54px;
    min-height: 54px;
}

.upg-close img,
.wth-close img,
.ref-close img,
.task-close img {
    width: 58%;
    height: 58%;
}

.upg-1 { top: 14.8%; }
.upg-2 { top: 33.7%; }
.upg-3 { top: 52.6%; }
.upg-4 { top: 71.5%; }

.tasks-list {
    top: 7.1%;
    gap: clamp(12px, 2.6dvh, 22px);
}

.task-btn {
    min-height: clamp(72px, 20.5vw, 98px);
}

.wth-1 { top: 10.0%; }
.wth-2 { top: 25.2%; }
.wth-3 { top: 40.4%; }
.wth-4 { top: 55.6%; }
.wth-5 { top: 70.8%; }
.wth-6 { top: 86.0%; }

.ref-1 { top: 14.7%; }
.ref-2 { top: 33.9%; }
.ref-3 { top: 53.1%; }
.ref-4 { top: 72.3%; }




























/* ===== BURROS FINAL MAIN SCREEN FIX ===== */
html, body {
  width: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* главный экран */
.main-screen,
.game-screen,
.home-screen,
#app,
#root,
.app,
.app-shell,
.screen-home {
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* фон на весь экран */
.main-screen::before,
.game-screen::before,
.home-screen::before,
.screen-home::before {
  background-size: cover !important;
  background-position: center center !important;
}

/* верхняя плашка баланса */
.balance-bar,
.balance-panel,
.top-balance,
.top-score,
.header-balance,
.score-bar {
  position: relative !important;
  margin-top: 72px !important;
  top: 0 !important;
  z-index: 8 !important;
}

/* монетка выше */
.coin-wrap,
.coin-area,
.main-coin-wrap,
.coin-container,
.tap-coin-wrap,
.tap-zone {
  position: relative !important;
  margin-top: 12px !important;
  transform: translateY(-8px) !important;
  z-index: 5 !important;
}

/* фоновой круг и центр монеты */
.coin-bg,
.coin-ring,
.coin-halo,
.coin-aura {
  background-position: center center !important;
  background-size: contain !important;
}

.main-coin,
.coin,
.tap-coin,
#coin {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* плашка энергии чуть выше и с зазором */
.energy-wrap,
.energy-panel,
.energy-bar-wrap,
.energy-box,
.bottom-energy {
  position: relative !important;
  margin-top: 18px !important;
  margin-bottom: 14px !important;
  transform: translateY(-2px) !important;
  z-index: 6 !important;
}

/* сама энергия */
.energy-bar,
.energy-fill,
.energy-progress,
.energy-track {
  height: auto !important;
}

/* нижнее меню не трогаем слишком сильно, только фиксируем */
.bottom-nav,
.navbar,
.bottom-menu,
.footer-nav,
.menu-bottom {
  position: relative !important;
  margin-top: 0 !important;
  gap: 0 !important;
  z-index: 7 !important;
}

/* 4 кнопки должны соприкасаться */
.bottom-nav > *,
.navbar > *,
.bottom-menu > *,
.footer-nav > *,
.menu-bottom > * {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* внутренние экраны: крестик ниже и удобнее */
.modal-close,
.close-btn,
.close-button,
.screen-close,
.popup-close {
  top: 20px !important;
  right: 18px !important;
  z-index: 30 !important;
}

/* УТ  - Friends */
.friends-screen .btn,
.friends-screen button,
.referrals-screen .btn,
.referrals-screen button,
.friends-modal .btn,
.friends-modal button {
  min-height: 92px !important;
  padding: 14px 18px !important;
  font-size: 30px !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* УТ  - Upgrades */
.upgrades-screen .btn,
.upgrades-screen button,
.upgrade-screen .btn,
.upgrade-screen button,
.upgrades-modal .btn,
.upgrades-modal button {
  min-height: 102px !important;
  padding: 14px 18px !important;
  font-size: 28px !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* УТ  - Tasks */
.tasks-screen .btn,
.tasks-screen button,
.task-screen .btn,
.task-screen button,
.tasks-modal .btn,
.tasks-modal button {
  min-height: 88px !important;
  padding: 14px 18px !important;
  font-size: 28px !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* нормализуем знаки и пробелы в текстах кнопок */
button,
.btn,
.pixel-btn,
.menu-btn,
.task-btn,
.upgrade-btn,
.friend-btn {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  font-kerning: none !important;
}

/* чтобы текст не прилипал к краям */
button span,
.btn span {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* запас снизу чтобы на айфоне всё влезало */
.safe-bottom,
.ios-safe,
.bottom-safe-space {
  padding-bottom: 10px !important;
}







@media (max-width: 900px) {
  :root {
    --nav-height: clamp(68px, 16vw, 80px) !important;
    --app-safe-top: env(safe-area-inset-top, 0px) !important;
    --app-safe-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: #344760 !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
  }

  .app {
    width: 100% !important;
    max-width: var(--app-max-width) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 auto !important;
    padding: 0 0 calc(var(--nav-height) + var(--app-safe-bottom) + 6px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #9ddf61 !important;
    isolation: isolate !important;
  }

  /* сновной фон на весь экран */
  .app::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: url('/images/background.png') center center / cover no-repeat !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Тёмно-синий низ, как на рефе */
  .app::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 34% !important;
    background: #344760 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .top {
    width: 100% !important;
    position: relative !important;
    z-index: 25 !important;
    padding: calc(var(--app-safe-top) + 4px) 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* ерхний баланс как на скрине */
  .balance-pill {
    width: 100% !important;
    height: clamp(58px, 15vw, 72px) !important;
    margin: 0 !important;
    padding: 0 clamp(8px, 2vw, 14px) !important;
    gap: 4px !important;
    overflow: hidden !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: translateY(0px) !important;
  }

  #balance {
    max-width: calc(100% - clamp(38px, 9vw, 54px)) !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  .balance-digit {
    width: clamp(25px, 6.9vw, 36px) !important;
    height: clamp(34px, 8.8vw, 46px) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }

  .balance-digit[data-digit="."] {
    width: clamp(8px, 2.1vw, 12px) !important;
    height: clamp(34px, 8.8vw, 46px) !important;
    background-size: contain !important;
    background-position: center !important;
  }

  .balance-digit[data-digit="1"] {
    width: clamp(18px, 4.8vw, 24px) !important;
    min-width: clamp(18px, 4.8vw, 24px) !important;
    max-width: clamp(18px, 4.8vw, 24px) !important;
    height: clamp(34px, 8.8vw, 46px) !important;
    transform: scaleX(0.94) !important;
    transform-origin: center center !important;
    margin-left: -1px !important;
    margin-right: -1px !important;
  }

  .balance-icon {
    width: clamp(36px, 9vw, 50px) !important;
    height: clamp(36px, 9vw, 50px) !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
  }

  .center {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 5 !important;
    padding-bottom: 150px !important;
  }

  /* руговой фон монетки */
  .center::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 51% !important;
    width: min(92vw, var(--app-max-width)) !important;
    height: min(92vw, var(--app-max-width)) !important;
    transform: translate(-50%, -50%) !important;
    background: url('/images/background.png') center center / 100% 100% no-repeat !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* онетка по центру и как на рефе */
  .coin-wrap {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    transform: translate3d(0, -4px, 0) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .coin {
    width: clamp(220px, min(56vw, 35dvh), 280px) !important;
    height: clamp(220px, min(56vw, 35dvh), 280px) !important;
    transform: none !important;
  }

  .coin-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* лашка энергии — под монеткой, как на рефе, но с полоской */
  .energy-wrapper {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(var(--nav-height) + var(--app-safe-bottom) + 14px) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 8px), var(--app-max-width)) !important;
    margin: 0 !important;
    z-index: 35 !important;
  }

  .energy {
    min-height: clamp(56px, 13.6vw, 68px) !important;
    aspect-ratio: 8 / 1 !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .energy-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .energy-numbers {
    position: absolute !important;
    left: clamp(20px, 4.4vw, 34px) !important;
    right: clamp(20px, 4.4vw, 34px) !important;
    top: 8% !important;
    min-width: 0 !important;
    min-height: clamp(20px, 5vw, 28px) !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  #energyCount,
  #energyMax {
    gap: 0 !important;
  }

  .energy-digit,
  .energy-slash {
    width: clamp(13px, 3.4vw, 19px) !important;
    height: clamp(20px, 5vw, 28px) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }

  .energy-digit[data-digit="."] {
    width: clamp(6px, 1.6vw, 9px) !important;
    height: clamp(20px, 5vw, 28px) !important;
    background-size: contain !important;
    background-position: center !important;
  }

  .energy-bar-container {
    position: absolute !important;
    left: clamp(18px, 4vw, 30px) !important;
    right: clamp(18px, 4vw, 30px) !important;
    bottom: clamp(8px, 1.8vw, 12px) !important;
    width: auto !important;
    height: clamp(9px, 2.1vw, 12px) !important;
    min-height: 0 !important;
    display: block !important;
  }

  .energy-bar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: fill !important;
    display: block !important;
  }

  .bottom {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--app-safe-bottom) !important;
    z-index: 40 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  /* 4 нижние кнопки — компактно и как на скрине */
  .bottom .wrap {
    width: 100% !important;
    max-width: var(--app-max-width) !important;
    height: clamp(66px, 15.5vw, 76px) !important;
    margin: 0 auto !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .bottom .wrap .nav-btn {
    flex: 1 1 25% !important;
    width: 25% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }

  .bottom .wrap .nav-btn + .nav-btn {
    margin-left: 0 !important;
  }

  .bottom .wrap .nav-btn .btn-icon {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: fill !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
  }

  .bottom .wrap .nav-btn .nav-label,
  .bottom .wrap .nav-btn .nav-glyph-wrap,
  .nav-glyph-wrap,
  .nav-glyph-line {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (max-width: 430px) {
  .app::after {
    height: 35% !important;
  }

  .center {
    padding-bottom: 146px !important;
  }

  .coin-wrap {
    transform: translate3d(0, -2px, 0) !important;
  }

  .energy-wrapper {
    bottom: calc(var(--nav-height) + var(--app-safe-bottom) + 12px) !important;
  }
}

/* === /BURROS_MAIN_SCREEN_FINAL_REF_V1 === */


/* === BURROS_MAIN_REBALANCE_V27 === */

@media (max-width: 900px) {
  :root {
    --burros-safe-top: env(safe-area-inset-top, 0px);
    --burros-safe-bottom: env(safe-area-inset-bottom, 0px);

    --burros-dark-strip: #3d5370;

    --burros-balance-h: clamp(64px, 7.2dvh, 72px);
    --burros-energy-h: clamp(62px, 7dvh, 68px);
    --burros-nav-h: clamp(78px, 8.8dvh, 86px);

    --burros-top-gap: 6px;
    --burros-mid-gap: 10px;
    --burros-bottom-gap: 18px;
  }

  html,
  body {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--burros-dark-strip) !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
  }

  .app {
    position: relative !important;
    width: 100% !important;
    max-width: var(--app-max-width, 430px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;

    /* фон делаем аккуратнее */
    background-image: url("/images/background.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
  }

  .app::before,
  .app::after,
  .center::before,
  .center::after {
    display: none !important;
    content: none !important;
  }

  /* ---------------- TOP ---------------- */

  .top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: calc(var(--burros-safe-top) + var(--burros-top-gap)) !important;
    background: transparent !important;
  }

  /* темная полоса сверху */
  .top::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: calc(var(--burros-safe-top) + 16px) !important;
    background: var(--burros-dark-strip) !important;
    z-index: -1 !important;
  }

  .balance-pill {
    position: relative !important;
    width: calc(100% + 8px) !important;
    max-width: calc(100% + 8px) !important;
    height: var(--burros-balance-h) !important;
    min-height: var(--burros-balance-h) !important;
    max-height: var(--burros-balance-h) !important;
    margin: 0 -4px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transform: translateY(-2px) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  #balance {
    max-width: calc(100% - 40px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .balance-digit {
    width: clamp(26px, 6.6vw, 34px) !important;
    height: clamp(38px, 8.8vw, 46px) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    transform: none !important;
  }

  /* единицу делаем чуть тоньше */
  .balance-digit[data-digit="1"] {
    width: clamp(17px, 4.3vw, 20px) !important;
    min-width: clamp(17px, 4.3vw, 20px) !important;
    max-width: clamp(17px, 4.3vw, 20px) !important;
    height: clamp(38px, 8.8vw, 46px) !important;
    transform: scaleX(0.84) !important;
    transform-origin: center center !important;
    margin-left: -1px !important;
    margin-right: -1px !important;
  }

  .balance-digit[data-digit="."] {
    width: clamp(6px, 1.4vw, 8px) !important;
    height: clamp(38px, 8.8vw, 46px) !important;
    background-size: contain !important;
    background-position: center 88% !important;
    transform: translateY(1px) !important;
  }

  .balance-icon {
    width: clamp(34px, 8.3vw, 42px) !important;
    height: clamp(34px, 8.3vw, 42px) !important;
    margin-left: 3px !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
  }

  /* ---------------- CENTER ---------------- */

  .center {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--burros-safe-top) + var(--burros-balance-h) + 8px) !important;
    bottom: calc(var(--burros-safe-bottom) + var(--burros-nav-h) + var(--burros-energy-h) + 28px) !important;
    z-index: 20 !important;

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

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .coin-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(0px) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .coin {
    width: clamp(210px, 50vw, 235px) !important;
    height: clamp(210px, 50vw, 235px) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .coin-image,
  .coin img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* ---------------- ENERGY ---------------- */

  .energy-wrapper {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(var(--burros-safe-bottom) + var(--burros-nav-h) + var(--burros-bottom-gap)) !important;
    transform: translateX(-50%) !important;
    width: calc(100% + 8px) !important;
    max-width: calc(var(--app-max-width, 430px) + 8px) !important;
    z-index: 90 !important;
    margin: 0 !important;
  }

  .energy {
    position: relative !important;
    width: 100% !important;
    height: var(--burros-energy-h) !important;
    min-height: var(--burros-energy-h) !important;
    max-height: var(--burros-energy-h) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .energy-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .energy-numbers {
    position: absolute !important;
    top: 8px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 22px !important;
  }

  #energyCount,
  #energyMax {
    gap: 0 !important;
  }

  .energy-digit,
  .energy-slash {
    width: clamp(13px, 3.2vw, 17px) !important;
    height: clamp(19px, 4.5vw, 23px) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    transform: none !important;
  }

  .energy-digit[data-digit="1"] {
    width: clamp(9px, 2.2vw, 11px) !important;
    min-width: clamp(9px, 2.2vw, 11px) !important;
    max-width: clamp(9px, 2.2vw, 11px) !important;
    transform: scaleX(0.88) !important;
  }

  /* точки опускаем на нормальное место */
  .energy-digit[data-digit="."] {
    width: clamp(5px, 1vw, 6px) !important;
    height: clamp(19px, 4.5vw, 23px) !important;
    background-size: contain !important;
    background-position: center 92% !important;
    transform: translateY(2px) !important;
  }

  .energy-bar-container {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 8px !important;
    width: auto !important;
    height: clamp(10px, 2.1vw, 11px) !important;
    display: block !important;
  }

  .energy-bar {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: fill !important;
  }

  /* ---------------- BOTTOM ---------------- */

  .bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--burros-safe-bottom) !important;
    z-index: 95 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .bottom::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--burros-nav-h) + var(--burros-safe-bottom) + 10px) !important;
    background: var(--burros-dark-strip) !important;
    z-index: -1 !important;
  }

  .bottom .wrap {
    width: calc(100% + 8px) !important;
    max-width: calc(var(--app-max-width, 430px) + 8px) !important;
    height: var(--burros-nav-h) !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  .bottom .wrap .nav-btn {
    flex: 1 1 25% !important;
    width: 25% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .bottom .wrap .nav-btn .btn-icon {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    display: block !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
  }

  .bottom .wrap .nav-btn .nav-label,
  .bottom .wrap .nav-btn .nav-glyph-wrap,
  .nav-glyph-wrap,
  .nav-glyph-line {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (max-width: 430px) {
  :root {
    --burros-balance-h: 66px;
    --burros-energy-h: 64px;
    --burros-nav-h: 80px;
  }

  .coin {
    width: 220px !important;
    height: 220px !important;
  }
}

/* === /BURROS_MAIN_REBALANCE_V27 === */


/* === BURROS_MAIN_REBALANCE_V28 === */

@media (max-width: 900px) {
  :root {
    --burros-safe-top: env(safe-area-inset-top, 0px);
    --burros-safe-bottom: env(safe-area-inset-bottom, 0px);
    --burros-dark-strip: #3d5370;

    --burros-balance-h: 70px;
    --burros-energy-h: 56px;
    --burros-nav-h: 82px;
  }

  html,
  body {
    background: var(--burros-dark-strip) !important;
  }

  .app {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* ---------------- TOP / BALANCE ---------------- */

  .top {
    padding-top: calc(var(--burros-safe-top) + 4px) !important;
  }

  .top::before {
    height: calc(var(--burros-safe-top) + 18px) !important;
    background: var(--burros-dark-strip) !important;
  }

  .balance-pill {
    height: var(--burros-balance-h) !important;
    min-height: var(--burros-balance-h) !important;
    max-height: var(--burros-balance-h) !important;
    transform: translateY(-5px) !important;
    box-shadow:
      0 2px 0 rgba(0,0,0,.22),
      0 6px 12px rgba(0,0,0,.10) !important;
  }

  #balance {
    max-width: calc(100% - 34px) !important;
  }

  .balance-digit {
    width: clamp(28px, 6.9vw, 35px) !important;
    height: clamp(40px, 9vw, 48px) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  .balance-digit[data-digit="1"] {
    width: clamp(18px, 4.4vw, 21px) !important;
    min-width: clamp(18px, 4.4vw, 21px) !important;
    max-width: clamp(18px, 4.4vw, 21px) !important;
    transform: scaleX(.82) !important;
    transform-origin: center center !important;
    margin-left: -1px !important;
    margin-right: -1px !important;
  }

  .balance-digit[data-digit="."] {
    width: clamp(6px, 1.4vw, 8px) !important;
    background-size: contain !important;
    background-position: center 86% !important;
  }

  .balance-icon {
    width: clamp(35px, 8.5vw, 43px) !important;
    height: clamp(35px, 8.5vw, 43px) !important;
    margin-left: 4px !important;
  }

  /* ---------------- CENTER / COIN ---------------- */

  .center {
    top: calc(var(--burros-safe-top) + var(--burros-balance-h) + 6px) !important;
    bottom: calc(var(--burros-safe-bottom) + var(--burros-nav-h) + var(--burros-energy-h) + 22px) !important;
  }

  .coin-wrap {
    transform: translateY(0px) !important;
  }

  .coin {
    width: clamp(228px, 53vw, 250px) !important;
    height: clamp(228px, 53vw, 250px) !important;
    margin: 0 auto !important;
    filter:
      drop-shadow(0 2px 0 rgba(0,0,0,.18))
      drop-shadow(0 8px 10px rgba(0,0,0,.10)) !important;
  }

  .coin img,
  .coin-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ---------------- ENERGY ---------------- */

  .energy-wrapper {
    bottom: calc(var(--burros-safe-bottom) + var(--burros-nav-h) + 18px) !important;
    width: calc(100% + 2px) !important;
    max-width: calc(var(--app-max-width, 430px) + 2px) !important;
  }

  .energy {
    height: var(--burros-energy-h) !important;
    min-height: var(--burros-energy-h) !important;
    max-height: var(--burros-energy-h) !important;
    box-shadow: 0 2px 0 rgba(0,0,0,.16) !important;
  }

  .energy-numbers {
    top: 6px !important;
    left: 12px !important;
    right: 12px !important;
  }

  .energy-digit,
  .energy-slash {
    width: clamp(12px, 3vw, 16px) !important;
    height: clamp(18px, 4.2vw, 22px) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  .energy-digit[data-digit="1"] {
    width: clamp(8px, 2vw, 10px) !important;
    min-width: clamp(8px, 2vw, 10px) !important;
    max-width: clamp(8px, 2vw, 10px) !important;
    transform: scaleX(.90) !important;
  }

  .energy-digit[data-digit="."] {
    width: clamp(5px, 1vw, 6px) !important;
    background-size: contain !important;
    background-position: center 96% !important;
    transform: translateY(3px) !important;
  }

  .energy-bar-container {
    left: 12px !important;
    right: 12px !important;
    bottom: 7px !important;
    height: clamp(9px, 1.9vw, 10px) !important;
  }

  /* ---------------- BOTTOM NAV ---------------- */

  .bottom::before {
    background: var(--burros-dark-strip) !important;
    height: calc(var(--burros-nav-h) + var(--burros-safe-bottom) + 12px) !important;
    box-shadow: 0 -2px 0 rgba(0,0,0,.16) !important;
  }

  .bottom .wrap {
    height: var(--burros-nav-h) !important;
    box-shadow: 0 -2px 0 rgba(0,0,0,.14) !important;
  }

  .bottom .wrap .nav-btn {
    height: 100% !important;
  }

  .bottom .wrap .nav-btn .btn-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
  }
}

@media (max-width: 430px) {
  :root {
    --burros-balance-h: 70px;
    --burros-energy-h: 56px;
    --burros-nav-h: 82px;
  }

  .coin {
    width: 236px !important;
    height: 236px !important;
  }
}

/* === /BURROS_MAIN_REBALANCE_V28 === */


/* === BURROS_MAIN_REBALANCE_V29 === */

@media (max-width: 900px) {
  :root {
    --burros-safe-top: env(safe-area-inset-top, 0px);
    --burros-safe-bottom: env(safe-area-inset-bottom, 0px);
    --burros-dark-strip: #3e5676;

    --burros-balance-h: 72px;
    --burros-energy-h: 58px;
    --burros-nav-h: 82px;
  }

  html,
  body {
    background: var(--burros-dark-strip) !important;
  }

  .app {
    background-color: var(--burros-dark-strip) !important;
    background-repeat: no-repeat !important;
    background-size: auto 112% !important;
    background-position: center 49% !important;
  }

  /* ---------------- TOP STRIP / BALANCE ---------------- */

  .top {
    padding-top: calc(var(--burros-safe-top) + 2px) !important;
  }

  .top::before {
    height: calc(var(--burros-safe-top) + 18px) !important;
    background: var(--burros-dark-strip) !important;
  }

  .balance-pill {
    height: var(--burros-balance-h) !important;
    min-height: var(--burros-balance-h) !important;
    max-height: var(--burros-balance-h) !important;
    transform: translateY(-7px) !important;
    box-shadow:
      0 2px 0 rgba(0,0,0,.16),
      0 5px 10px rgba(0,0,0,.08) !important;
  }

  #balance {
    max-width: calc(100% - 30px) !important;
  }

  .balance-digit {
    width: clamp(29px, 7vw, 36px) !important;
    height: clamp(42px, 9.2vw, 49px) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  .balance-digit[data-digit="1"] {
    width: clamp(18px, 4.1vw, 21px) !important;
    min-width: clamp(18px, 4.1vw, 21px) !important;
    max-width: clamp(18px, 4.1vw, 21px) !important;
    transform: scaleX(.84) !important;
    transform-origin: center center !important;
    margin-left: -1px !important;
    margin-right: -1px !important;
  }

  .balance-digit[data-digit="."] {
    width: clamp(6px, 1.4vw, 8px) !important;
    background-size: contain !important;
    background-position: center 88% !important;
  }

  .balance-icon {
    width: clamp(39px, 9vw, 45px) !important;
    height: clamp(39px, 9vw, 45px) !important;
    margin-left: 5px !important;
  }

  /* ---------------- CENTER / COIN ---------------- */

  .center {
    top: calc(var(--burros-safe-top) + var(--burros-balance-h) + 8px) !important;
    bottom: calc(var(--burros-safe-bottom) + var(--burros-nav-h) + var(--burros-energy-h) + 26px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .coin-wrap {
    transform: translateY(-2px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .coin {
    width: clamp(238px, 55vw, 258px) !important;
    height: clamp(238px, 55vw, 258px) !important;
    margin: 0 auto !important;
    filter:
      drop-shadow(0 2px 0 rgba(0,0,0,.16))
      drop-shadow(0 6px 10px rgba(0,0,0,.08)) !important;
  }

  .coin img,
  .coin-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ---------------- ENERGY ---------------- */

  .energy-wrapper {
    bottom: calc(var(--burros-safe-bottom) + var(--burros-nav-h) + 22px) !important;
    width: calc(100% - 8px) !important;
    max-width: calc(var(--app-max-width, 430px) - 8px) !important;
  }

  .energy {
    height: var(--burros-energy-h) !important;
    min-height: var(--burros-energy-h) !important;
    max-height: var(--burros-energy-h) !important;
    box-shadow:
      0 2px 0 rgba(0,0,0,.14),
      0 4px 8px rgba(0,0,0,.06) !important;
  }

  .energy-numbers {
    top: 6px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .energy-digit,
  .energy-slash {
    width: clamp(13px, 3.1vw, 16px) !important;
    height: clamp(19px, 4.4vw, 23px) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  .energy-digit[data-digit="1"] {
    width: clamp(8px, 1.9vw, 10px) !important;
    min-width: clamp(8px, 1.9vw, 10px) !important;
    max-width: clamp(8px, 1.9vw, 10px) !important;
    transform: scaleX(.88) !important;
  }

  .energy-digit[data-digit="."] {
    width: clamp(5px, 1vw, 6px) !important;
    height: clamp(5px, 1vw, 6px) !important;
    background-size: contain !important;
    background-position: center 100% !important;
    transform: translateY(4px) !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

  .energy-slash {
    width: clamp(10px, 2.1vw, 12px) !important;
  }

  .energy-bar-container {
    left: 12px !important;
    right: 12px !important;
    bottom: 7px !important;
    height: clamp(9px, 2vw, 10px) !important;
  }

  /* ---------------- BOTTOM NAV ---------------- */

  .bottom::before {
    background: var(--burros-dark-strip) !important;
    height: calc(var(--burros-nav-h) + var(--burros-safe-bottom) + 12px) !important;
    box-shadow: 0 -2px 0 rgba(0,0,0,.10) !important;
  }

  .bottom .wrap {
    height: var(--burros-nav-h) !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  .bottom .wrap .nav-btn {
    height: 100% !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  .bottom .wrap .nav-btn:not(:last-child) {
    box-shadow: inset -2px 0 0 #000 !important;
  }

  .bottom .wrap .nav-btn .btn-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
  }
}

@media (max-width: 430px) {
  :root {
    --burros-balance-h: 72px;
    --burros-energy-h: 58px;
    --burros-nav-h: 82px;
  }

  .coin {
    width: 244px !important;
    height: 244px !important;
  }
}

/* === /BURROS_MAIN_REBALANCE_V29 === */


/* === BURROS_MAIN_POLISH_V34 === */

@media (max-width: 900px) {
  :root {
    --burros-dark-strip-v34: #3c5474;
  }

  /* Ф: центр светлого круга под центр монетки */
  .app {
    background-color: var(--burros-dark-strip-v34) !important;
    background-image: url("/images/background.png") !important;
    background-repeat: no-repeat !important;
    background-size: auto 101% !important;
    background-position: center 52.4% !important;
  }

  .center::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(104vw, var(--app-max-width, 896px)) !important;
    height: min(104vw, var(--app-max-width, 896px)) !important;
    transform: translate(-50%, -50%) !important;
    background: url("/images/background.png") center center / contain no-repeat !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* С: почти убрать тень */
  .balance-pill {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06)) !important;
    box-shadow: none !important;
  }

  #balance {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  /* Цифры баланса больше */
  .balance-digit {
    width: clamp(32px, 7.4vw, 44px) !important;
    height: clamp(42px, 9.4vw, 52px) !important;
    min-width: clamp(32px, 7.4vw, 44px) !important;
    max-width: clamp(32px, 7.4vw, 44px) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Цифра 1 в балансе: не маленькая, но гармоничная */
  .balance-digit[data-digit="1"] {
    width: clamp(24px, 5.4vw, 32px) !important;
    min-width: clamp(24px, 5.4vw, 32px) !important;
    max-width: clamp(24px, 5.4vw, 32px) !important;
    height: clamp(42px, 9.4vw, 52px) !important;
    background-size: auto 100% !important;
    background-position: center bottom !important;
    transform: scaleX(0.88) !important;
    transform-origin: center bottom !important;
    margin-left: -1px !important;
    margin-right: -1px !important;
  }

  /* Точки в балансе: внизу, как в энергии */
  .balance-digit[data-digit="."] {
    width: clamp(7px, 1.5vw, 9px) !important;
    min-width: clamp(7px, 1.5vw, 9px) !important;
    max-width: clamp(7px, 1.5vw, 9px) !important;
    height: clamp(42px, 9.4vw, 52px) !important;
    background-size: clamp(6px, 1.3vw, 8px) auto !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% - 3px) !important;
    transform: none !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

  /* Т чуть больше и по центру круга */
  .coin {
    width: clamp(304px, 69vw, 328px) !important;
    height: clamp(304px, 69vw, 328px) !important;
  }

  .coin-wrap {
    z-index: 2 !important;
  }

  /* : цифры 1 нормального размера */
  .energy-numbers {
    top: 9px !important;
    align-items: flex-end !important;
    transform: none !important;
  }

  .energy-digit,
  .energy-slash {
    width: clamp(18px, 4vw, 22px) !important;
    height: clamp(25px, 5.4vw, 29px) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    transform: none !important;
  }

  .energy-digit[data-digit="1"] {
    width: clamp(16px, 3.5vw, 19px) !important;
    min-width: clamp(16px, 3.5vw, 19px) !important;
    max-width: clamp(16px, 3.5vw, 19px) !important;
    height: clamp(25px, 5.4vw, 29px) !important;
    background-size: auto 100% !important;
    background-position: center bottom !important;
    transform: scaleX(0.92) !important;
    transform-origin: center bottom !important;
  }

  .energy-digit[data-digit="."] {
    width: clamp(7px, 1.5vw, 9px) !important;
    min-width: clamp(7px, 1.5vw, 9px) !important;
    max-width: clamp(7px, 1.5vw, 9px) !important;
    height: clamp(25px, 5.4vw, 29px) !important;
    background-size: clamp(6px, 1.3vw, 8px) auto !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% - 2px) !important;
    transform: none !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

  .energy-bar-container {
    bottom: 10px !important;
  }

  /* од нижними кнопками темно-синий фон */
  .bottom {
    background: var(--burros-dark-strip-v34) !important;
  }

  .bottom::before {
    background: var(--burros-dark-strip-v34) !important;
  }

  .bottom .wrap {
    background: var(--burros-dark-strip-v34) !important;
    gap: 0 !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  /* ерегородки между кнопками чуть уже */
  .bottom .wrap .nav-btn {
    margin: 0 !important;
  }

  .bottom .wrap .nav-btn:not(:last-child) {
    box-shadow: inset -1px 0 0 #000 !important;
  }
}

@media (max-width: 430px) {
  .app {
    background-size: auto 101% !important;
    background-position: center 52.6% !important;
  }

  .coin {
    width: 314px !important;
    height: 314px !important;
  }

  .balance-digit {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 48px !important;
  }

  .balance-digit[data-digit="1"] {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 48px !important;
    transform: scaleX(0.88) !important;
  }

  .balance-digit[data-digit="."] {
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 48px !important;
    background-size: 7px auto !important;
    background-position: center calc(100% - 3px) !important;
  }
}

/* === /BURROS_MAIN_POLISH_V34 === */


/* === BURROS_MAIN_POLISH_V35 === */

@media (max-width: 900px) {
  /* озвращаем фон к нормальному виду: на весь экран, без поломанного масштаба */
  .app {
    background-color: #3c5474 !important;
    background-image: url("/images/background.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Убираем дополнительный круг из V34, чтобы фон снова был как раньше */
  .center::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  /* Цифры баланса чуть меньше, чтобы полностью помещались */
  .balance-digit {
    width: clamp(29px, 6.8vw, 40px) !important;
    min-width: clamp(29px, 6.8vw, 40px) !important;
    max-width: clamp(29px, 6.8vw, 40px) !important;
    height: clamp(39px, 8.8vw, 48px) !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }

  .balance-digit[data-digit="1"] {
    width: clamp(21px, 4.8vw, 29px) !important;
    min-width: clamp(21px, 4.8vw, 29px) !important;
    max-width: clamp(21px, 4.8vw, 29px) !important;
    height: clamp(39px, 8.8vw, 48px) !important;
    background-size: auto 100% !important;
    background-position: center bottom !important;
    transform: scaleX(0.88) !important;
  }

  .balance-digit[data-digit="."] {
    width: clamp(7px, 1.4vw, 8px) !important;
    min-width: clamp(7px, 1.4vw, 8px) !important;
    max-width: clamp(7px, 1.4vw, 8px) !important;
    height: clamp(39px, 8.8vw, 48px) !important;
    background-size: clamp(6px, 1.2vw, 7px) auto !important;
    background-position: center calc(100% - 3px) !important;
  }

  #balance {
    max-width: calc(100% - 48px) !important;
    overflow: hidden !important;
  }

  .balance-icon {
    width: clamp(38px, 8.8vw, 48px) !important;
    height: clamp(38px, 8.8vw, 48px) !important;
    margin-left: 2px !important;
  }
}

@media (max-width: 430px) {
  .app {
    background-size: cover !important;
    background-position: center center !important;
  }

  .balance-digit {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 44px !important;
  }

  .balance-digit[data-digit="1"] {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 44px !important;
  }

  .balance-digit[data-digit="."] {
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    height: 44px !important;
  }
}

/* === /BURROS_MAIN_POLISH_V35 === */


/* === BURROS_BG_FINAL_FIX_V1 === */

@media (max-width: 900px) {
  /* ормальный фон: весь экран, без ломания композиции */
  .app {
    background-color: #3f5676 !important;
    background-image: url("/images/background.png") !important;
    background-repeat: no-repeat !important;
    background-size: auto 112% !important;
    background-position: center 52% !important;
    min-height: 100svh !important;
  }

  /* Центр фона ближе к монетке */
  .center {
    position: relative !important;
    z-index: 2 !important;
  }

  /* аланс: чуть компактнее, чтобы цифры полностью влезали */
  .balance-digit {
    width: clamp(28px, 6.3vw, 36px) !important;
    min-width: clamp(28px, 6.3vw, 36px) !important;
    max-width: clamp(28px, 6.3vw, 36px) !important;
    height: clamp(40px, 8.7vw, 46px) !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }

  .balance-digit[data-digit="1"] {
    width: clamp(21px, 4.7vw, 27px) !important;
    min-width: clamp(21px, 4.7vw, 27px) !important;
    max-width: clamp(21px, 4.7vw, 27px) !important;
    height: clamp(40px, 8.7vw, 46px) !important;
    background-size: auto 100% !important;
    background-position: center bottom !important;
    transform: scaleX(0.92) !important;
  }

  .balance-digit[data-digit="."] {
    width: clamp(6px, 1.3vw, 8px) !important;
    min-width: clamp(6px, 1.3vw, 8px) !important;
    max-width: clamp(6px, 1.3vw, 8px) !important;
    height: clamp(40px, 8.7vw, 46px) !important;
    background-size: clamp(5px, 1.1vw, 6px) auto !important;
    background-position: center calc(100% - 2px) !important;
  }

  #balance {
    max-width: calc(100% - 42px) !important;
    overflow: hidden !important;
  }

  .balance-icon {
    width: clamp(34px, 7.7vw, 42px) !important;
    height: clamp(34px, 7.7vw, 42px) !important;
    margin-left: 2px !important;
  }
}

@media (max-width: 430px) {
  .app {
    background-size: auto 110% !important;
    background-position: center 51.5% !important;
  }

  .balance-digit {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 43px !important;
  }

  .balance-digit[data-digit="1"] {
    width: 23px !important;
    min-width: 23px !important;
    max-width: 23px !important;
    height: 43px !important;
  }

  .balance-digit[data-digit="."] {
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    height: 43px !important;
    background-position: center calc(100% - 2px) !important;
  }
}

/* === /BURROS_BG_FINAL_FIX_V1 === */


/* === BURROS_BG_COIN_ALIGN_V2 === */

@media (max-width: 900px) {
  /* фон чуть ниже, но на весь экран */
  .app {
    background-repeat: no-repeat !important;
    background-size: auto 108% !important;
    background-position: center 58.5% !important;
    min-height: 100svh !important;
  }

  /* центрируем композицию */
  .center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* монетка строго по центру */
  .coin,
  .main-coin,
  #coin,
  .coin-wrap,
  .coin-container,
  .center .coin,
  .center .main-coin,
  .center #coin,
  .center .coin-wrap,
  .center .coin-container {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .app {
    background-size: auto 107% !important;
    background-position: center 60% !important;
  }
}

/* === /BURROS_BG_COIN_ALIGN_V2 === */


/* === BURROS_COIN_REAL_CENTER_V37 === */

@media (max-width: 900px) {
  /* Ф: опускаем немного ниже, но не ломаем масштаб */
  .app {
    background-image: url("/images/background.png") !important;
    background-repeat: no-repeat !important;
    background-size: auto 108% !important;
    background-position: center 58.5% !important;
    background-color: #3c5474 !important;
  }

  /*
    ЦТ :
    задаем ей нормальное место между балансом и энергией.
    онетка будет центрироваться УТ этой зоны, а не улетать вниз.
  */
  .center {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(env(safe-area-inset-top, 0px) + 94px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 190px) !important;

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

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 10 !important;
  }

  /*
    Т:
    убираем все left/top/absolute, которые ломали ее.
    Центрирование только через flex у .center.
  */
  .coin-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

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

    transform: none !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  .coin {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: clamp(304px, 69vw, 328px) !important;
    height: clamp(304px, 69vw, 328px) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: block !important;

    transform: none !important;
    transform-origin: center center !important;
    max-width: none !important;
    max-height: none !important;
  }

  .coin-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  /*
    ри тапе монетка не должна улетать вправо.
    азрешаем только scale-анимации вокруг центра.
  */
  .coin:active,
  .coin-wrap:active,
  .coin-image:active {
    transform-origin: center center !important;
  }
}

@media (max-width: 430px) {
  .app {
    background-size: auto 108% !important;
    background-position: center 59.5% !important;
  }

  .center {
    top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 188px) !important;
  }

  .coin {
    width: 314px !important;
    height: 314px !important;
  }
}

/* === /BURROS_COIN_REAL_CENTER_V37 === */


/* === BURROS_DOTS_MICROFIX_V1 === */

@media (max-width: 900px) {
  /* точки в энергии — чуть ниже */
  .energy-value .dot,
  .energy-text .dot,
  .energy-display .dot,
  .energy-counter .dot,
  .energy-label .dot,
  .energy-bar-text .dot,
  .energy-readout .dot,
  .energy-number .dot,
  .energy .dot {
    position: relative !important;
    top: 2px !important;
    transform: scale(1) !important;
  }

  /* точки в балансе — чуть больше */
  .balance-value .dot,
  .balance-text .dot,
  .balance-display .dot,
  .balance-counter .dot,
  .top-balance .dot,
  .header-balance .dot,
  .score-value .dot,
  .money-value .dot,
  .coins-value .dot,
  .balance .dot {
    position: relative !important;
    top: 0px !important;
    transform: scale(1.08) !important;
    transform-origin: center bottom !important;
  }
}

/* === /BURROS_DOTS_MICROFIX_V1 === */


/* === BURROS_BG_AND_DOTS_FIX_V1 === */

@media (max-width: 900px) {

  /* 1) Точки в энергии — опустить чуть ниже и выровнять с цифрами */
  .energy-digit[data-digit="."] {
    width: clamp(9px, 2.4vw, 13px) !important;
    height: clamp(18px, 4.7vw, 34px) !important;
    background-size: 88% auto !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% - 1px) !important;
    transform: translateY(2px) !important;
  }

  /* 2) Точки в балансе — сделать больше и заметнее */
  .balance-digit[data-digit="."] {
    width: clamp(12px, 3.4vw, 18px) !important;
    height: clamp(36px, 10.2vw, 50px) !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% - 1px) !important;
    transform: translateY(0px) !important;
  }

  /* 3) Фон — опустить немного ниже, монетку не трогаем */
  .app::before {
    background-position: center calc(50% + 30px) !important;
    background-size: cover !important;
  }
}

/* === /BURROS_BG_AND_DOTS_FIX_V1 === */


/* === BURROS_ENERGY_ONE_BG_DOWN_V1 === */

@media (max-width: 900px) {
  /* Фон ещё ниже */
  .app::before {
    background-position: center calc(50% + 42px) !important;
    background-size: cover !important;
  }

  /* Цифра 1 в энергии: на 1px меньше сверху / чуть ниже */
  .energy-digit[data-digit="1"] {
    transform: translateY(1px) !important;
    background-position: center calc(100% + 1px) !important;
    height: calc(clamp(18px, 4.7vw, 34px) - 1px) !important;
    margin-top: 1px !important;
  }
}

/* === /BURROS_ENERGY_ONE_BG_DOWN_V1 === */


/* === BURROS_ENERGY_ONE_BG_DOWN_V2 === */

@media (max-width: 900px) {
  /* Ф : меняем и .app, и .app::before, потому что фон мог быть в любом из них */
  .app {
    background-image: url("/images/background.png") !important;
    background-repeat: no-repeat !important;
    background-size: auto 108% !important;
    background-position: center calc(50% + 64px) !important;
  }

  .app::before {
    background-image: url("/images/background.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center calc(50% + 64px) !important;
  }

  /* Цифра 1 в энергии — вернуть нормальный размер как у других цифр */
  .energy-digit[data-digit="1"] {
    width: clamp(13px, 3.3vw, 22px) !important;
    min-width: clamp(13px, 3.3vw, 22px) !important;
    max-width: clamp(13px, 3.3vw, 22px) !important;
    height: clamp(18px, 4.7vw, 34px) !important;
    min-height: clamp(18px, 4.7vw, 34px) !important;
    max-height: clamp(18px, 4.7vw, 34px) !important;
    margin-top: 0 !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .app {
    background-size: auto 108% !important;
    background-position: center calc(50% + 70px) !important;
  }

  .app::before {
    background-position: center calc(50% + 70px) !important;
  }
}

/* === /BURROS_ENERGY_ONE_BG_DOWN_V2 === */


/* === BURROS_ENERGY_EQUALIZE_V1 === */

@media (max-width: 900px) {

  /* 1) Ф — чуть выше */
  .app {
    background-position: center calc(50% + 52px) !important;
  }

  .app::before {
    background-position: center calc(50% + 52px) !important;
  }

  /* 2) ся строка энергии — одинаковое выравнивание */
  .energy-numbers,
  #energyCount,
  #energyMax {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
  }

  /* 3) се цифры в энергии делаем одинаковыми */
  .energy-digit,
  #energyCount .energy-digit,
  #energyMax .energy-digit {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* 4) Цифра 1 — такого же размера, не должна выделяться */
  .energy-digit[data-digit="1"],
  #energyCount .energy-digit[data-digit="1"],
  #energyMax .energy-digit[data-digit="1"] {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* 5) Слэш между числами */
  .energy-slash {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    transform: none !important;
    margin: 0 1px !important;
  }

  /* 6) Точки в энергии оставляем ровными по линии цифр */
  .energy-digit[data-digit="."] {
    width: 9px !important;
    min-width: 9px !important;
    max-width: 9px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    background-size: 7px auto !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% - 1px) !important;
    transform: none !important;
    margin: 0 1px !important;
  }
}

@media (max-width: 430px) {
  .app {
    background-position: center calc(50% + 56px) !important;
  }

  .app::before {
    background-position: center calc(50% + 56px) !important;
  }

  .energy-digit,
  #energyCount .energy-digit,
  #energyMax .energy-digit,
  .energy-digit[data-digit="1"],
  #energyCount .energy-digit[data-digit="1"],
  #energyMax .energy-digit[data-digit="1"] {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
  }
}

/* === /BURROS_ENERGY_EQUALIZE_V1 === */


/* === BURROS_SAFE_DOTS_BOTTOM_FIX_V1 === */

/* 1) Т  С — сделать больше */
.balance-digit[data-digit="."],
#balance .balance-digit[data-digit="."] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  background-image: url('/digits/balance_dot.png') !important;
  background-size: 9px 9px !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 2px) !important;

  margin-left: 1px !important;
  margin-right: 1px !important;
  transform: none !important;
  flex: 0 0 18px !important;
}

/* 2) Т   — меньше и ровно внизу по линии цифр */
.energy-digit[data-digit="."],
#energyCount .energy-digit[data-digit="."],
#energyMax .energy-digit[data-digit="."] {
  width: 6px !important;
  min-width: 6px !important;
  max-width: 6px !important;

  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;

  background-image: url('/digits/energy_dot.png') !important;
  background-size: 4px 4px !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 2px) !important;

  margin-left: 1px !important;
  margin-right: 1px !important;
  transform: none !important;
  vertical-align: bottom !important;
  flex: 0 0 6px !important;
}

.energy-numbers,
#energyCount,
#energyMax {
  align-items: flex-end !important;
}

/* 3)  4   — темно-синий фон, как над балансом */
.bottom {
  background: #344760 !important;
}

.bottom::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background: #344760 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.bottom .wrap {
  background: #344760 !important;
}

/* 4) УТ  4 Х  — сделать менее толстыми */
.bottom .wrap {
  gap: 0 !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  overflow: hidden !important;
}

.bottom .wrap .nav-btn {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* небольшой нахлёст соседних PNG, чтобы внутренние чёрные перегородки стали тоньше */
.bottom .wrap .nav-btn + .nav-btn {
  margin-left: -2px !important;
}

.bottom .wrap .nav-btn .btn-icon {
  width: calc(100% + 2px) !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

.bottom .wrap .nav-btn:last-child .btn-icon {
  width: 100% !important;
}

/* === /BURROS_SAFE_DOTS_BOTTOM_FIX_V1 === */


/* === BURROS_ENERGY_DOTS_SHADOW_SEPARATORS_V1 === */

/* 1) Т  Ш  — Ш */
.energy-digit[data-digit="."],
#energyCount .energy-digit[data-digit="."],
#energyMax .energy-digit[data-digit="."] {
  width: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;

  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;

  background-image: url('/digits/energy_dot.png') !important;
  background-size: 8px 8px !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 2px) !important;

  margin-left: 1px !important;
  margin-right: 1px !important;

  flex: 0 0 10px !important;
  transform: none !important;
  vertical-align: bottom !important;
}

.energy-numbers,
#energyCount,
#energyMax {
  align-items: flex-end !important;
}

/* 2) Ш Т  С */
.balance-pill {
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.22)) !important;
}

/* 3) УТ  4 Х  — Ш */
.bottom .wrap .nav-btn:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: -1px !important;
  width: 1px !important;
  height: 100% !important;
  background: #000 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.bottom .wrap .nav-btn:last-child::after {
  display: none !important;
}

/* если перегородки сделаны нахлестом — уменьшаем нахлест */
.bottom .wrap .nav-btn + .nav-btn {
  margin-left: -1px !important;
}

.bottom .wrap .nav-btn .btn-icon {
  width: calc(100% + 1px) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: fill !important;
}

/* === /BURROS_ENERGY_DOTS_SHADOW_SEPARATORS_V1 === */


/* === BURROS_FRIENDS_FINAL_REPAIR_AND_LAYOUT_V9 === */

/*
  кран "рузья".
  справляет открытие и оформление.
  лавный экран, монетку, баланс, энергию  трогает.
*/

/* нопка рузья всегда должна нажиматься */
#btnFriends,
button#btnFriends,
.nav-btn#btnFriends {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1002 !important;
}

/* акрытая модалка рузей не перекрывает главный экран */
#friendsModal:not(.open) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#friendsModal:not(.open) * {
  pointer-events: none !important;
}

/* ткрытая модалка рузей */
#friendsModal.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

#friendsModal.open .sheet,
#friendsModal.open .sheet-full {
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

#friendsModal.open .referral-skin {
  position: relative !important;
  display: block !important;

  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;

  overflow: hidden !important;
  pointer-events: auto !important;

  background-image: url("/images/background_referrals.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;

  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* СТ: используем твой close_referral.png */
#friendsModal.open .ref-close,
#friendsModal.open #closeFriends {
  position: absolute !important;

  top: max(82px, calc(env(safe-area-inset-top, 0px) + 62px)) !important;
  right: clamp(18px, 5vw, 28px) !important;

  width: clamp(52px, 12.5vw, 66px) !important;
  height: clamp(52px, 12.5vw, 66px) !important;

  padding: 6px !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  z-index: 50 !important;
  overflow: visible !important;
  cursor: pointer !important;
}

#friendsModal.open .ref-close::before,
#friendsModal.open .ref-close::after,
#friendsModal.open #closeFriends::before,
#friendsModal.open #closeFriends::after {
  display: none !important;
  content: none !important;
}

/* оказываем именно картинку твоего крестика */
#friendsModal.open .ref-close img,
#friendsModal.open #closeFriends img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;

  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  pointer-events: none !important;
}

/* се 4 желтые кнопки больше и ниже */
#friendsModal.open .ref-slot {
  position: absolute !important;

  left: 50% !important;
  width: min(91vw, 398px) !important;
  height: clamp(94px, 12.6dvh, 116px) !important;
  min-height: clamp(94px, 12.6dvh, 116px) !important;
  max-height: clamp(94px, 12.6dvh, 116px) !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  box-shadow: none !important;

  background-image: url("/images/referral_button.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;

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

  overflow: hidden !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  z-index: 5 !important;

  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* нопки ниже, чтобы был нормальный зазор от крестика */
#friendsModal.open .ref-1 {
  top: max(158px, 19.5dvh) !important;
}

#friendsModal.open .ref-2 {
  top: max(328px, 40.7dvh) !important;
}

#friendsModal.open .ref-3 {
  top: max(498px, 61.9dvh) !important;
}

#friendsModal.open .ref-4 {
  top: max(668px, 83.1dvh) !important;
}

/* Текст внутри первой кнопки строго внутри и по центру */
#friendsModal.open .ref-text {
  position: absolute !important;

  left: 8% !important;
  right: 8% !important;
  top: 50% !important;
  bottom: auto !important;

  width: auto !important;
  height: auto !important;

  transform: translateY(-50%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 1px !important;
  line-height: 0.84 !important;
  text-align: center !important;

  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* Текст остальных кнопок строго по центру */
#friendsModal.open .ref-label {
  position: absolute !important;

  left: 8% !important;
  right: 8% !important;
  top: 50% !important;
  bottom: auto !important;

  width: auto !important;
  height: auto !important;

  transform: translateY(-50%) !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 0.92 !important;
  text-align: center !important;
  white-space: nowrap !important;

  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* Центрируем строки пиксельного текста */
#friendsModal.open .ref-plain-line,
#friendsModal.open .bmp-line,
#friendsModal.open .ref-text .bmp-line,
#friendsModal.open .ref-label .bmp-line {
  display: flex !important;

  width: 100% !important;
  max-width: 100% !important;

  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
  transform: none !important;
}

/* лифы текста не вылезают за кнопку */
#friendsModal.open .bmp-glyph,
#friendsModal.open .bmp-glyph-uniform,
#friendsModal.open img.bmp-glyph {
  vertical-align: middle !important;
  align-self: center !important;
  object-fit: contain !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
}

/* Узкие телефоны / Android */
@media (max-width: 430px) {
  #friendsModal.open .ref-close,
  #friendsModal.open #closeFriends {
    top: max(88px, calc(env(safe-area-inset-top, 0px) + 68px)) !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }

  #friendsModal.open .ref-slot {
    width: 91vw !important;
    height: clamp(94px, 12.2dvh, 108px) !important;
    min-height: clamp(94px, 12.2dvh, 108px) !important;
    max-height: clamp(94px, 12.2dvh, 108px) !important;
  }

  #friendsModal.open .ref-1 {
    top: max(164px, 20.0dvh) !important;
  }

  #friendsModal.open .ref-2 {
    top: max(334px, 41.2dvh) !important;
  }

  #friendsModal.open .ref-3 {
    top: max(504px, 62.4dvh) !important;
  }

  #friendsModal.open .ref-4 {
    top: max(674px, 83.6dvh) !important;
  }
}

/* === /BURROS_FRIENDS_FINAL_REPAIR_AND_LAYOUT_V9 === */


/* === BURROS_FRIENDS_TEXT_SPACING_V10 === */

/* 1) рестик чуть-чуть выше */
#friendsModal.open .ref-close,
#friendsModal.open #closeFriends {
  top: max(76px, calc(env(safe-area-inset-top, 0px) + 56px)) !important;
}

@media (max-width: 430px) {
  #friendsModal.open .ref-close,
  #friendsModal.open #closeFriends {
    top: max(82px, calc(env(safe-area-inset-top, 0px) + 62px)) !important;
  }
}

/* 2) Текст в кнопках — по центру, но с нормальными расстояниями */
#friendsModal.open .ref-text {
  gap: 5px !important;
  line-height: 1 !important;
}

#friendsModal.open .ref-label {
  line-height: 1 !important;
}

/* 3) Строки текста — увеличить расстояние между строками */
#friendsModal.open .ref-text .bmp-line,
#friendsModal.open .ref-text .ref-plain-line {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* 4) уквы/глифы — чтобы не слипались друг с другом */
#friendsModal.open .ref-slot .bmp-line,
#friendsModal.open .ref-slot .ref-plain-line,
#friendsModal.open .ref-text .bmp-line,
#friendsModal.open .ref-label .bmp-line {
  gap: 2px !important;
  column-gap: 2px !important;
}

/* 5) сли отдельные буквы — картинки, добавляем маленький отступ */
#friendsModal.open .ref-slot .bmp-glyph,
#friendsModal.open .ref-slot .bmp-glyph-uniform,
#friendsModal.open .ref-slot img.bmp-glyph {
  margin-left: 1px !important;
  margin-right: 1px !important;
}

/* 6) тобы текст не вылезал за кнопку после увеличения пробелов */
#friendsModal.open .ref-text,
#friendsModal.open .ref-label {
  left: 6% !important;
  right: 6% !important;
  overflow: hidden !important;
}

/* === /BURROS_FRIENDS_TEXT_SPACING_V10 === */


/* === BURROS_ALL_MODAL_LAYOUT_V11 === */

/*
  бщий фикс всех внутренних экранов:
  рузья / Улучшения / адания / ывод.
  лавный экран  трогаем.
*/

/* ---------- 1) СТ  СХ Х ---------- */

#friendsModal.open .ref-close,
#friendsModal.open #closeFriends,
#upgradesModal.open .upg-close,
#upgradesModal.open #closeUpgrades,
#tasksModal.open .task-close,
#tasksModal.open #closeTasks,
#withdrawModal.open .wth-close,
#withdrawModal.open #closeWithdraw {
  position: absolute !important;

  /* чуть выше, чем было */
  top: max(72px, calc(env(safe-area-inset-top, 0px) + 52px)) !important;
  right: clamp(18px, 5vw, 28px) !important;

  width: clamp(52px, 12.5vw, 66px) !important;
  height: clamp(52px, 12.5vw, 66px) !important;

  padding: 6px !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  z-index: 80 !important;
  overflow: visible !important;
  cursor: pointer !important;
}

/* используем Т дизайн крестиков-картинок */
#friendsModal.open .ref-close img,
#friendsModal.open #closeFriends img,
#upgradesModal.open .upg-close img,
#upgradesModal.open #closeUpgrades img,
#tasksModal.open .task-close img,
#tasksModal.open #closeTasks img,
#withdrawModal.open .wth-close img,
#withdrawModal.open #closeWithdraw img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* убираем CSS-крестики, если они остались от старых фиксов */
#friendsModal.open .ref-close::before,
#friendsModal.open .ref-close::after,
#upgradesModal.open .upg-close::before,
#upgradesModal.open .upg-close::after,
#tasksModal.open .task-close::before,
#tasksModal.open .task-close::after,
#withdrawModal.open .wth-close::before,
#withdrawModal.open .wth-close::after {
  display: none !important;
  content: none !important;
}


/* ---------- 2) У ---------- */

#friendsModal.open .ref-slot {
  width: min(91vw, 398px) !important;
  height: clamp(94px, 12.6dvh, 116px) !important;
  min-height: clamp(94px, 12.6dvh, 116px) !important;
  max-height: clamp(94px, 12.6dvh, 116px) !important;
}

#friendsModal.open .ref-1 {
  top: max(158px, 19.5dvh) !important;
}

#friendsModal.open .ref-2 {
  top: max(328px, 40.7dvh) !important;
}

#friendsModal.open .ref-3 {
  top: max(498px, 61.9dvh) !important;
}

#friendsModal.open .ref-4 {
  top: max(668px, 83.1dvh) !important;
}


/* ---------- 3) УУШ ---------- */

#upgradesModal.open .upg-slot {
  position: absolute !important;

  left: 50% !important;
  width: min(91vw, 398px) !important;
  height: clamp(94px, 12.6dvh, 116px) !important;
  min-height: clamp(94px, 12.6dvh, 116px) !important;
  max-height: clamp(94px, 12.6dvh, 116px) !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

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

  overflow: hidden !important;
  z-index: 5 !important;
}

#upgradesModal.open .upg-1 {
  top: max(158px, 19.5dvh) !important;
}

#upgradesModal.open .upg-2 {
  top: max(328px, 40.7dvh) !important;
}

#upgradesModal.open .upg-3 {
  top: max(498px, 61.9dvh) !important;
}

#upgradesModal.open .upg-4 {
  top: max(668px, 83.1dvh) !important;
}

#upgradesModal.open .upg-text {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 50% !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  line-height: 0.9 !important;
  gap: 4px !important;

  overflow: hidden !important;
  pointer-events: none !important;
}


/* ---------- 4)  ---------- */

#tasksModal.open .tasks-list {
  position: absolute !important;
  left: 50% !important;
  top: max(150px, 18.6dvh) !important;

  width: min(91vw, 398px) !important;
  max-height: calc(100dvh - max(150px, 18.6dvh) - 28px) !important;

  transform: translateX(-50%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  gap: clamp(18px, 2.8dvh, 28px) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 0 0 24px !important;
  box-sizing: border-box !important;
}

#tasksModal.open .task-btn,
#tasksModal.open .task-card,
#tasksModal.open .task-item,
#tasksModal.open .task-row,
#tasksModal.open .tasks-list > * {
  width: min(91vw, 398px) !important;
  min-height: clamp(88px, 11.8dvh, 108px) !important;

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

  text-align: center !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}


/* ---------- 5) Ы ---------- */

#withdrawModal.open .wth-slot {
  position: absolute !important;

  left: 50% !important;
  width: min(91vw, 398px) !important;
  height: clamp(82px, 10.8dvh, 102px) !important;
  min-height: clamp(82px, 10.8dvh, 102px) !important;
  max-height: clamp(82px, 10.8dvh, 102px) !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

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

  overflow: hidden !important;
  z-index: 5 !important;
}

/* 6 плашек вывода ниже и ровнее */
#withdrawModal.open .wth-1 {
  top: max(136px, 16.8dvh) !important;
}

#withdrawModal.open .wth-2 {
  top: max(248px, 30.8dvh) !important;
}

#withdrawModal.open .wth-3 {
  top: max(360px, 44.8dvh) !important;
}

#withdrawModal.open .wth-4 {
  top: max(472px, 58.8dvh) !important;
}

#withdrawModal.open .wth-5 {
  top: max(584px, 72.8dvh) !important;
}

#withdrawModal.open .wth-6 {
  top: max(696px, 86.8dvh) !important;
}

#withdrawModal.open .wth-label,
#withdrawModal.open .wth-value {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
}


/* ---------- 6) Щ ТСТ  СХ Х ---------- */

/* текстовые контейнеры строго по центру */
#friendsModal.open .ref-text,
#friendsModal.open .ref-label,
#upgradesModal.open .upg-text,
#tasksModal.open .task-text,
#tasksModal.open .task-label,
#tasksModal.open .task-title,
#withdrawModal.open .wth-label,
#withdrawModal.open .wth-value {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

/* строки пиксельного текста */
#friendsModal.open .bmp-line,
#friendsModal.open .ref-plain-line,
#upgradesModal.open .bmp-line,
#upgradesModal.open .ref-plain-line,
#tasksModal.open .bmp-line,
#tasksModal.open .ref-plain-line,
#withdrawModal.open .bmp-line,
#withdrawModal.open .ref-plain-line {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;

  width: 100% !important;
  max-width: 100% !important;

  text-align: center !important;

  gap: 2px !important;
  column-gap: 2px !important;

  margin-top: 2px !important;
  margin-bottom: 2px !important;

  transform: none !important;
}

/* глифы не слипаются */
#friendsModal.open .bmp-glyph,
#friendsModal.open .bmp-glyph-uniform,
#upgradesModal.open .bmp-glyph,
#upgradesModal.open .bmp-glyph-uniform,
#tasksModal.open .bmp-glyph,
#tasksModal.open .bmp-glyph-uniform,
#withdrawModal.open .bmp-glyph,
#withdrawModal.open .bmp-glyph-uniform {
  margin-left: 1px !important;
  margin-right: 1px !important;

  vertical-align: middle !important;
  align-self: center !important;

  object-fit: contain !important;
  transform: none !important;

  pointer-events: none !important;
}


/* ---------- 7) У Ы / ANDROID ---------- */

@media (max-width: 430px) {
  #friendsModal.open .ref-close,
  #friendsModal.open #closeFriends,
  #upgradesModal.open .upg-close,
  #upgradesModal.open #closeUpgrades,
  #tasksModal.open .task-close,
  #tasksModal.open #closeTasks,
  #withdrawModal.open .wth-close,
  #withdrawModal.open #closeWithdraw {
    top: max(78px, calc(env(safe-area-inset-top, 0px) + 58px)) !important;
    right: 18px !important;

    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }

  #friendsModal.open .ref-slot,
  #upgradesModal.open .upg-slot {
    width: 91vw !important;
    height: clamp(94px, 12.2dvh, 108px) !important;
    min-height: clamp(94px, 12.2dvh, 108px) !important;
    max-height: clamp(94px, 12.2dvh, 108px) !important;
  }

  #friendsModal.open .ref-1,
  #upgradesModal.open .upg-1 {
    top: max(164px, 20.0dvh) !important;
  }

  #friendsModal.open .ref-2,
  #upgradesModal.open .upg-2 {
    top: max(334px, 41.2dvh) !important;
  }

  #friendsModal.open .ref-3,
  #upgradesModal.open .upg-3 {
    top: max(504px, 62.4dvh) !important;
  }

  #friendsModal.open .ref-4,
  #upgradesModal.open .upg-4 {
    top: max(674px, 83.6dvh) !important;
  }
}

/* === /BURROS_ALL_MODAL_LAYOUT_V11 === */


/* === BURROS_MODAL_CLOSE_BASE_SAFE_V12 === */

/*
  азовое безопасное положение крестика.
  Сначала ставим , чтобы он точно был виден и нажимался.
  отом можно будет микрофиксом двигать выше/ниже.
*/

#friendsModal.open .ref-close,
#friendsModal.open #closeFriends,
#upgradesModal.open .upg-close,
#upgradesModal.open #closeUpgrades,
#tasksModal.open .task-close,
#tasksModal.open #closeTasks,
#withdrawModal.open .wth-close,
#withdrawModal.open #closeWithdraw {
  position: absolute !important;

  top: max(92px, calc(env(safe-area-inset-top, 0px) + 72px)) !important;
  right: clamp(18px, 5vw, 28px) !important;

  width: clamp(52px, 12.5vw, 66px) !important;
  height: clamp(52px, 12.5vw, 66px) !important;

  padding: 6px !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  z-index: 999 !important;
  overflow: visible !important;
  cursor: pointer !important;
}

/* спользуем твои картинки крестиков */
#friendsModal.open .ref-close img,
#friendsModal.open #closeFriends img,
#upgradesModal.open .upg-close img,
#upgradesModal.open #closeUpgrades img,
#tasksModal.open .task-close img,
#tasksModal.open #closeTasks img,
#withdrawModal.open .wth-close img,
#withdrawModal.open #closeWithdraw img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;

  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* Убираем CSS-крестики, если они остались */
#friendsModal.open .ref-close::before,
#friendsModal.open .ref-close::after,
#upgradesModal.open .upg-close::before,
#upgradesModal.open .upg-close::after,
#tasksModal.open .task-close::before,
#tasksModal.open .task-close::after,
#withdrawModal.open .wth-close::before,
#withdrawModal.open .wth-close::after {
  display: none !important;
  content: none !important;
}

/* а узких Android/iPhone тоже сначала безопасно ниже */
@media (max-width: 430px) {
  #friendsModal.open .ref-close,
  #friendsModal.open #closeFriends,
  #upgradesModal.open .upg-close,
  #upgradesModal.open #closeUpgrades,
  #tasksModal.open .task-close,
  #tasksModal.open #closeTasks,
  #withdrawModal.open .wth-close,
  #withdrawModal.open #closeWithdraw {
    top: max(98px, calc(env(safe-area-inset-top, 0px) + 78px)) !important;
    right: 18px !important;

    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }
}

/* === /BURROS_MODAL_CLOSE_BASE_SAFE_V12 === */


/* === BURROS_MODAL_CLOSE_AND_DOTS_V13 === */

/*
  1) рестики во всех внутренних экранах:
  - выше, чем в безопасной нижней версии;
  - не залезают на кнопки;
  - не попадают под Telegram header.
*/

#friendsModal.open .ref-close,
#friendsModal.open #closeFriends,
#upgradesModal.open .upg-close,
#upgradesModal.open #closeUpgrades,
#tasksModal.open .task-close,
#tasksModal.open #closeTasks,
#withdrawModal.open .wth-close,
#withdrawModal.open #closeWithdraw {
  position: absolute !important;

  top: max(72px, calc(env(safe-area-inset-top, 0px) + 52px)) !important;
  right: clamp(18px, 5vw, 28px) !important;

  width: clamp(52px, 12.5vw, 66px) !important;
  height: clamp(52px, 12.5vw, 66px) !important;

  padding: 6px !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  z-index: 999 !important;
  overflow: visible !important;
  cursor: pointer !important;
}

/* спользуем твой дизайн крестиков-картинок */
#friendsModal.open .ref-close img,
#friendsModal.open #closeFriends img,
#upgradesModal.open .upg-close img,
#upgradesModal.open #closeUpgrades img,
#tasksModal.open .task-close img,
#tasksModal.open #closeTasks img,
#withdrawModal.open .wth-close img,
#withdrawModal.open #closeWithdraw img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;

  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* Убираем CSS-крестики, если они остались */
#friendsModal.open .ref-close::before,
#friendsModal.open .ref-close::after,
#upgradesModal.open .upg-close::before,
#upgradesModal.open .upg-close::after,
#tasksModal.open .task-close::before,
#tasksModal.open .task-close::after,
#withdrawModal.open .wth-close::before,
#withdrawModal.open .wth-close::after {
  display: none !important;
  content: none !important;
}

/*
  2) Точки и двоеточия внутри кнопок:
  - опускаем вниз;
  - делаем их похожими на нормальные точки;
  - не трогаем обычные буквы.
*/

/* бычные точки-спрайты в энергии / балансе / кнопках */
.energy-digit[data-digit="."],
.balance-digit[data-digit="."],
#friendsModal.open [data-digit="."],
#upgradesModal.open [data-digit="."],
#tasksModal.open [data-digit="."],
#withdrawModal.open [data-digit="."],
#friendsModal.open [data-char="."],
#upgradesModal.open [data-char="."],
#tasksModal.open [data-char="."],
#withdrawModal.open [data-char="."],
#friendsModal.open [data-glyph="."],
#upgradesModal.open [data-glyph="."],
#tasksModal.open [data-glyph="."],
#withdrawModal.open [data-glyph="."] {
  background-position: center calc(100% - 2px) !important;
  transform: translateY(2px) !important;
  transform-origin: center bottom !important;
}

/* воеточия, чтобы выглядели как две точки, а не длинные полоски */
#friendsModal.open [data-char=":"],
#upgradesModal.open [data-char=":"],
#tasksModal.open [data-char=":"],
#withdrawModal.open [data-char=":"],
#friendsModal.open [data-glyph=":"],
#upgradesModal.open [data-glyph=":"],
#tasksModal.open [data-glyph=":"],
#withdrawModal.open [data-glyph=":"],
#friendsModal.open .char-colon,
#upgradesModal.open .char-colon,
#tasksModal.open .char-colon,
#withdrawModal.open .char-colon,
#friendsModal.open .glyph-colon,
#upgradesModal.open .glyph-colon,
#tasksModal.open .glyph-colon,
#withdrawModal.open .glyph-colon,
#friendsModal.open img[alt=":"],
#upgradesModal.open img[alt=":"],
#tasksModal.open img[alt=":"],
#withdrawModal.open img[alt=":"] {
  transform: scale(0.72, 0.62) translateY(3px) !important;
  transform-origin: center bottom !important;
  margin-left: 1px !important;
  margin-right: 1px !important;
}

/* сли точки/двоеточия внутри bmp-глифов имеют src с dot/colon */
#friendsModal.open img[src*="dot"],
#upgradesModal.open img[src*="dot"],
#tasksModal.open img[src*="dot"],
#withdrawModal.open img[src*="dot"],
#friendsModal.open img[src*="colon"],
#upgradesModal.open img[src*="colon"],
#tasksModal.open img[src*="colon"],
#withdrawModal.open img[src*="colon"] {
  transform: translateY(3px) scaleY(0.75) !important;
  transform-origin: center bottom !important;
}

/* ля точек в плашке энергии — отдельно, чтобы они были внизу */
.energy-digit[data-digit="."] {
  width: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  background-size: 8px 8px !important;
  background-position: center calc(100% - 2px) !important;
  transform: none !important;
  flex: 0 0 10px !important;
}

/* ля точек в балансе — тоже внизу */
.balance-digit[data-digit="."] {
  background-position: center calc(100% - 2px) !important;
}

/* Узкие экраны / Android / iPhone mini */
@media (max-width: 430px) {
  #friendsModal.open .ref-close,
  #friendsModal.open #closeFriends,
  #upgradesModal.open .upg-close,
  #upgradesModal.open #closeUpgrades,
  #tasksModal.open .task-close,
  #tasksModal.open #closeTasks,
  #withdrawModal.open .wth-close,
  #withdrawModal.open #closeWithdraw {
    top: max(78px, calc(env(safe-area-inset-top, 0px) + 58px)) !important;
    right: 18px !important;

    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }
}

/* === /BURROS_MODAL_CLOSE_AND_DOTS_V13 === */


/* === BURROS_TASKS_WITHDRAW_CLOSE_SPACING_V14 === */

/*
  Только экраны:
  - адания
  - ывод
*/

/* рестики адания и ывод чуть повыше */
#tasksModal.open .task-close,
#tasksModal.open #closeTasks,
#withdrawModal.open .wth-close,
#withdrawModal.open #closeWithdraw {
  top: max(66px, calc(env(safe-area-inset-top, 0px) + 46px)) !important;
  right: clamp(18px, 5vw, 28px) !important;

  width: clamp(52px, 12.5vw, 66px) !important;
  height: clamp(52px, 12.5vw, 66px) !important;
  padding: 6px !important;

  z-index: 999 !important;
  overflow: visible !important;
}

/* артинки крестиков должны быть видны полностью */
#tasksModal.open .task-close img,
#tasksModal.open #closeTasks img,
#withdrawModal.open .wth-close img,
#withdrawModal.open #closeWithdraw img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* адания: список/кнопки чуть ниже, чтобы крестик не залезал */
#tasksModal.open .tasks-list {
  top: max(166px, 20.6dvh) !important;
  max-height: calc(100dvh - max(166px, 20.6dvh) - 24px) !important;
}

/* сли кнопки заданий позиционируются напрямую */
#tasksModal.open .task-btn,
#tasksModal.open .task-card,
#tasksModal.open .task-item,
#tasksModal.open .task-row,
#tasksModal.open .tasks-list > * {
  transform: translateY(8px) !important;
}

/* ывод: все плашки чуть ниже */
#withdrawModal.open .wth-1 {
  top: max(152px, 18.8dvh) !important;
}

#withdrawModal.open .wth-2 {
  top: max(264px, 32.8dvh) !important;
}

#withdrawModal.open .wth-3 {
  top: max(376px, 46.8dvh) !important;
}

#withdrawModal.open .wth-4 {
  top: max(488px, 60.8dvh) !important;
}

#withdrawModal.open .wth-5 {
  top: max(600px, 74.8dvh) !important;
}

#withdrawModal.open .wth-6 {
  top: max(712px, 88.8dvh) !important;
}

/* Узкие экраны */
@media (max-width: 430px) {
  #tasksModal.open .task-close,
  #tasksModal.open #closeTasks,
  #withdrawModal.open .wth-close,
  #withdrawModal.open #closeWithdraw {
    top: max(72px, calc(env(safe-area-inset-top, 0px) + 52px)) !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }

  #tasksModal.open .tasks-list {
    top: max(174px, 21.4dvh) !important;
    max-height: calc(100dvh - max(174px, 21.4dvh) - 24px) !important;
  }

  #withdrawModal.open .wth-1 {
    top: max(160px, 19.6dvh) !important;
  }

  #withdrawModal.open .wth-2 {
    top: max(272px, 33.6dvh) !important;
  }

  #withdrawModal.open .wth-3 {
    top: max(384px, 47.6dvh) !important;
  }

  #withdrawModal.open .wth-4 {
    top: max(496px, 61.6dvh) !important;
  }

  #withdrawModal.open .wth-5 {
    top: max(608px, 75.6dvh) !important;
  }

  #withdrawModal.open .wth-6 {
    top: max(720px, 89.6dvh) !important;
  }
}

/* === /BURROS_TASKS_WITHDRAW_CLOSE_SPACING_V14 === */


/* === BURROS_WITHDRAW_TASKS_TUNE_V15 === */

/*
  Только экраны:
  - ывод
  - адания
*/

/* ===== Ы: крестик выше, почти к Telegram header ===== */
#withdrawModal.open .wth-close,
#withdrawModal.open #closeWithdraw {
  top: max(48px, calc(env(safe-area-inset-top, 0px) + 30px)) !important;
  right: clamp(18px, 5vw, 28px) !important;

  width: clamp(52px, 12.5vw, 66px) !important;
  height: clamp(52px, 12.5vw, 66px) !important;
  padding: 6px !important;

  z-index: 999 !important;
  overflow: visible !important;
}

/* ===== Ы: плашки/кнопки выше, ближе к тому как было до фикса ===== */
#withdrawModal.open .wth-1 {
  top: max(126px, 15.6dvh) !important;
}

#withdrawModal.open .wth-2 {
  top: max(232px, 28.8dvh) !important;
}

#withdrawModal.open .wth-3 {
  top: max(338px, 42.0dvh) !important;
}

#withdrawModal.open .wth-4 {
  top: max(444px, 55.2dvh) !important;
}

#withdrawModal.open .wth-5 {
  top: max(550px, 68.4dvh) !important;
}

#withdrawModal.open .wth-6 {
  top: max(656px, 81.6dvh) !important;
}

/* ===== : крестик чутка выше ===== */
#tasksModal.open .task-close,
#tasksModal.open #closeTasks {
  top: max(60px, calc(env(safe-area-inset-top, 0px) + 40px)) !important;
  right: clamp(18px, 5vw, 28px) !important;

  width: clamp(52px, 12.5vw, 66px) !important;
  height: clamp(52px, 12.5vw, 66px) !important;
  padding: 6px !important;

  z-index: 999 !important;
  overflow: visible !important;
}

/* ===== : кнопки/список чутка выше ===== */
#tasksModal.open .tasks-list {
  top: max(150px, 18.6dvh) !important;
  max-height: calc(100dvh - max(150px, 18.6dvh) - 24px) !important;
}

/* убираем сильное смещение вниз из прошлого фикса */
#tasksModal.open .task-btn,
#tasksModal.open .task-card,
#tasksModal.open .task-item,
#tasksModal.open .task-row,
#tasksModal.open .tasks-list > * {
  transform: translateY(0px) !important;
}

/* артинки крестиков видны полностью */
#tasksModal.open .task-close img,
#tasksModal.open #closeTasks img,
#withdrawModal.open .wth-close img,
#withdrawModal.open #closeWithdraw img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* Узкие экраны */
@media (max-width: 430px) {
  #withdrawModal.open .wth-close,
  #withdrawModal.open #closeWithdraw {
    top: max(54px, calc(env(safe-area-inset-top, 0px) + 34px)) !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }

  #withdrawModal.open .wth-1 {
    top: max(132px, 16.2dvh) !important;
  }

  #withdrawModal.open .wth-2 {
    top: max(238px, 29.4dvh) !important;
  }

  #withdrawModal.open .wth-3 {
    top: max(344px, 42.6dvh) !important;
  }

  #withdrawModal.open .wth-4 {
    top: max(450px, 55.8dvh) !important;
  }

  #withdrawModal.open .wth-5 {
    top: max(556px, 69.0dvh) !important;
  }

  #withdrawModal.open .wth-6 {
    top: max(662px, 82.2dvh) !important;
  }

  #tasksModal.open .task-close,
  #tasksModal.open #closeTasks {
    top: max(66px, calc(env(safe-area-inset-top, 0px) + 46px)) !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }

  #tasksModal.open .tasks-list {
    top: max(156px, 19.2dvh) !important;
    max-height: calc(100dvh - max(156px, 19.2dvh) - 24px) !important;
  }
}

/* === /BURROS_WITHDRAW_TASKS_TUNE_V15 === */


/* === BURROS_WITHDRAW_TINY_DOWN_V16 === */

/* Только экран "ывод": крестик на каплю ниже */
#withdrawModal.open .wth-close,
#withdrawModal.open #closeWithdraw {
  top: max(58px, calc(env(safe-area-inset-top, 0px) + 38px)) !important;
}

/* Только экран "ывод": плашки/кнопки на каплю ниже */
#withdrawModal.open .wth-1 {
  top: max(138px, 17.0dvh) !important;
}

#withdrawModal.open .wth-2 {
  top: max(244px, 30.2dvh) !important;
}

#withdrawModal.open .wth-3 {
  top: max(350px, 43.4dvh) !important;
}

#withdrawModal.open .wth-4 {
  top: max(456px, 56.6dvh) !important;
}

#withdrawModal.open .wth-5 {
  top: max(562px, 69.8dvh) !important;
}

#withdrawModal.open .wth-6 {
  top: max(668px, 83.0dvh) !important;
}

@media (max-width: 430px) {
  #withdrawModal.open .wth-close,
  #withdrawModal.open #closeWithdraw {
    top: max(62px, calc(env(safe-area-inset-top, 0px) + 42px)) !important;
  }

  #withdrawModal.open .wth-1 {
    top: max(144px, 17.6dvh) !important;
  }

  #withdrawModal.open .wth-2 {
    top: max(250px, 30.8dvh) !important;
  }

  #withdrawModal.open .wth-3 {
    top: max(356px, 44.0dvh) !important;
  }

  #withdrawModal.open .wth-4 {
    top: max(462px, 57.2dvh) !important;
  }

  #withdrawModal.open .wth-5 {
    top: max(568px, 70.4dvh) !important;
  }

  #withdrawModal.open .wth-6 {
    top: max(674px, 83.6dvh) !important;
  }
}

/* === /BURROS_WITHDRAW_TINY_DOWN_V16 === */


/* === BURROS_FRIENDS_OPEN_ANIMATION_V17 === */

/*
  обавляет экрану "рузья" анимацию открытия,
  как у остальных внутренних кнопок.
  огику открытия  трогает.
*/

@keyframes burrosFriendsModalOpenV17 {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }

  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.002);
  }

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

@keyframes burrosFriendsSkinOpenV17 {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* нимация всей модалки рузья */
#friendsModal.open {
  animation: burrosFriendsModalOpenV17 0.22s ease-out both !important;
}

/* нимация интерфейса внутри рузей */
#friendsModal.open .sheet,
#friendsModal.open .sheet-full,
#friendsModal.open .referral-skin {
  animation: burrosFriendsSkinOpenV17 0.22s ease-out both !important;
  will-change: transform, opacity !important;
}

/* тобы крестик и кнопки появлялись вместе с экраном */
#friendsModal.open .ref-close,
#friendsModal.open #closeFriends,
#friendsModal.open .ref-slot {
  animation: burrosFriendsSkinOpenV17 0.20s ease-out both !important;
}

/* а случай, если Telegram/WebView режет анимации */
#friendsModal.open .referral-skin {
  opacity: 1 !important;
  visibility: visible !important;
}

/* === /BURROS_FRIENDS_OPEN_ANIMATION_V17 === */


/* === BURROS_COLON_ALIGN_FIX_V18 === */

/*
  справляем только двоеточия ":" во внутренних экранах.
  Точки "." не трогаем.
  воеточия должны быть на одной высоте с буквами и цифрами.
*/

#friendsModal.open [data-char=":"],
#upgradesModal.open [data-char=":"],
#tasksModal.open [data-char=":"],
#withdrawModal.open [data-char=":"],
#friendsModal.open [data-glyph=":"],
#upgradesModal.open [data-glyph=":"],
#tasksModal.open [data-glyph=":"],
#withdrawModal.open [data-glyph=":"],
#friendsModal.open .char-colon,
#upgradesModal.open .char-colon,
#tasksModal.open .char-colon,
#withdrawModal.open .char-colon,
#friendsModal.open .glyph-colon,
#upgradesModal.open .glyph-colon,
#tasksModal.open .glyph-colon,
#withdrawModal.open .glyph-colon,
#friendsModal.open img[alt=":"],
#upgradesModal.open img[alt=":"],
#tasksModal.open img[alt=":"],
#withdrawModal.open img[alt=":"],
#friendsModal.open img[src*="colon"],
#upgradesModal.open img[src*="colon"],
#tasksModal.open img[src*="colon"],
#withdrawModal.open img[src*="colon"] {
  transform: none !important;
  transform-origin: center center !important;
  vertical-align: middle !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  object-fit: contain !important;
}

/* сли двоеточие рендерится как bmp-glyph с отдельным data-letter */
#friendsModal.open .bmp-glyph[data-letter=":"],
#upgradesModal.open .bmp-glyph[data-letter=":"],
#tasksModal.open .bmp-glyph[data-letter=":"],
#withdrawModal.open .bmp-glyph[data-letter=":"],
#friendsModal.open .bmp-glyph-uniform[data-letter=":"],
#upgradesModal.open .bmp-glyph-uniform[data-letter=":"],
#tasksModal.open .bmp-glyph-uniform[data-letter=":"],
#withdrawModal.open .bmp-glyph-uniform[data-letter=":"] {
  transform: none !important;
  vertical-align: middle !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* === /BURROS_COLON_ALIGN_FIX_V18 === */


/* === BURROS_LETTER_I_THIN_FIX_V19 === */

/*
  уква I внутри внутренних кнопок:
  делаем визуально тоньше, но не трогаем остальные буквы.
*/

#friendsModal.open .bmp-glyph[data-letter="I"],
#upgradesModal.open .bmp-glyph[data-letter="I"],
#tasksModal.open .bmp-glyph[data-letter="I"],
#withdrawModal.open .bmp-glyph[data-letter="I"],
#friendsModal.open .bmp-glyph-uniform[data-letter="I"],
#upgradesModal.open .bmp-glyph-uniform[data-letter="I"],
#tasksModal.open .bmp-glyph-uniform[data-letter="I"],
#withdrawModal.open .bmp-glyph-uniform[data-letter="I"],
#friendsModal.open img[alt="I"],
#upgradesModal.open img[alt="I"],
#tasksModal.open img[alt="I"],
#withdrawModal.open img[alt="I"],
#friendsModal.open img[data-char="I"],
#upgradesModal.open img[data-char="I"],
#tasksModal.open img[data-char="I"],
#withdrawModal.open img[data-char="I"],
#friendsModal.open img[data-glyph="I"],
#upgradesModal.open img[data-glyph="I"],
#tasksModal.open img[data-glyph="I"],
#withdrawModal.open img[data-glyph="I"] {
  transform: scaleX(0.82) !important;
  transform-origin: center center !important;
  margin-left: -1px !important;
  margin-right: -1px !important;
}

/* а всякий случай, если буква i маленькая */
#friendsModal.open .bmp-glyph[data-letter="i"],
#upgradesModal.open .bmp-glyph[data-letter="i"],
#tasksModal.open .bmp-glyph[data-letter="i"],
#withdrawModal.open .bmp-glyph[data-letter="i"],
#friendsModal.open .bmp-glyph-uniform[data-letter="i"],
#upgradesModal.open .bmp-glyph-uniform[data-letter="i"],
#tasksModal.open .bmp-glyph-uniform[data-letter="i"],
#withdrawModal.open .bmp-glyph-uniform[data-letter="i"],
#friendsModal.open img[alt="i"],
#upgradesModal.open img[alt="i"],
#tasksModal.open img[alt="i"],
#withdrawModal.open img[alt="i"] {
  transform: scaleX(0.82) !important;
  transform-origin: center center !important;
  margin-left: -1px !important;
  margin-right: -1px !important;
}

/* === /BURROS_LETTER_I_THIN_FIX_V19 === */


/* === BURROS_LETTER_I_MEDIUM_FIX_V20 === */

/*
  уква I:
  чуть толще, чем 0.72, но всё ещё тоньше оригинала.
*/

#friendsModal.open .bmp-glyph[data-letter="I"],
#upgradesModal.open .bmp-glyph[data-letter="I"],
#tasksModal.open .bmp-glyph[data-letter="I"],
#withdrawModal.open .bmp-glyph[data-letter="I"],
#friendsModal.open .bmp-glyph-uniform[data-letter="I"],
#upgradesModal.open .bmp-glyph-uniform[data-letter="I"],
#tasksModal.open .bmp-glyph-uniform[data-letter="I"],
#withdrawModal.open .bmp-glyph-uniform[data-letter="I"],
#friendsModal.open img[alt="I"],
#upgradesModal.open img[alt="I"],
#tasksModal.open img[alt="I"],
#withdrawModal.open img[alt="I"],
#friendsModal.open img[data-char="I"],
#upgradesModal.open img[data-char="I"],
#tasksModal.open img[data-char="I"],
#withdrawModal.open img[data-char="I"],
#friendsModal.open img[data-glyph="I"],
#upgradesModal.open img[data-glyph="I"],
#tasksModal.open img[data-glyph="I"],
#withdrawModal.open img[data-glyph="I"],
#friendsModal.open .bmp-glyph[data-letter="i"],
#upgradesModal.open .bmp-glyph[data-letter="i"],
#tasksModal.open .bmp-glyph[data-letter="i"],
#withdrawModal.open .bmp-glyph[data-letter="i"],
#friendsModal.open .bmp-glyph-uniform[data-letter="i"],
#upgradesModal.open .bmp-glyph-uniform[data-letter="i"],
#tasksModal.open .bmp-glyph-uniform[data-letter="i"],
#withdrawModal.open .bmp-glyph-uniform[data-letter="i"],
#friendsModal.open img[alt="i"],
#upgradesModal.open img[alt="i"],
#tasksModal.open img[alt="i"],
#withdrawModal.open img[alt="i"] {
  transform: scaleX(0.82) !important;
  transform-origin: center center !important;
  margin-left: -1px !important;
  margin-right: -1px !important;
}

/* === /BURROS_LETTER_I_MEDIUM_FIX_V20 === */











/* === BURROS_TAP_SOFT_REPORT_FRONT_CSS === */

#coin,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-image,
.coin-img,
button,
a,
[role="button"] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* === /BURROS_TAP_SOFT_REPORT_FRONT_CSS === */








/* === BURROS_FRIENDS_STABLE_BUTTONS === */

/*
  Фикс вкладки "рузья":
  - кнопки внутри рузей не вылетают справа;
  - не прыгают и не сдвигаются;
  - сама вкладка может открываться как раньше;
  - другие разделы не трогаются.
*/

.burros-friends-screen,
.burros-friends-screen * {
  box-sizing: border-box !important;
}

.burros-friends-screen button,
.burros-friends-screen a,
.burros-friends-screen [role="button"],
.burros-friends-screen .button,
.burros-friends-screen [class*="button"],
.burros-friends-screen [class*="Button"],
.burros-friends-screen [class*="invite"],
.burros-friends-screen [class*="Invite"],
.burros-friends-screen [class*="friend"],
.burros-friends-screen [class*="Friend"] {
  transform: none !important;
  translate: none !important;
  animation-name: none !important;
  animation-duration: 0s !important;
  transition-property: opacity, filter, background-color, color, border-color, box-shadow !important;
  left: auto !important;
  right: auto !important;
}

.burros-friends-screen .burros-friends-stable-item {
  transform: none !important;
  translate: none !important;
  animation: none !important;
}

/* Убираем старый класс, если он остался */
.burros-friends-opening {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* === /BURROS_FRIENDS_STABLE_BUTTONS === */








/* === BURROS_WITHDRAW_CLOSE_BLOCK_FIX === */

/*
  равка overlay вывода:
  - убран таймер снизу;
  - крестик заменён на images/close_block.png;
  - close-кнопка стоит чуть ниже Telegram header;
  - остальную игру не трогаем.
*/

#burros-withdraw-hard-timer,
#burros-withdraw-third-timer,
#burros-withdraw-click-timer,
#burros-withdraw-screen-timer,
#burros-withdraw-only-timer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#burros-withdraw-hard-close,
#burros-withdraw-third-close,
#burros-withdraw-click-close,
#burros-withdraw-screen-close,
#burros-withdraw-only-close {
  position: fixed !important;
  right: 14px !important;
  top: calc(54px + env(safe-area-inset-top, 0px)) !important;
  z-index: 2147483647 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent url("images/close_block.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* === /BURROS_WITHDRAW_CLOSE_BLOCK_FIX === */





/* === BURROS_SAFE_WITHDRAW_HIDE_CSS_ONLY === */

/*
  CSS-only фикс:
  - не лезет в JS;
  - не ломает запуск игры;
  - прячет реальные элементы вывода на главном экране;
  - не трогает нижнюю кнопку #btnWithdraw/nav_withdraw.png.
*/

#withdrawModal,
#withdrawModal.open,
#withdrawModal .wth-slot,
#withdrawModal .wth-label,
#withdrawModal .wth-value,
#withdrawModal #wthLimitLabel,
#withdrawModal #wthLimitValue,
#withdrawModal #wthAmountLabel,
#withdrawModal #wthAmountValue,
#withdrawModal #wthCommissionLabel,
#withdrawModal #wthCommissionValue,
#withdrawModal #wthTotalLabel,
#withdrawModal #wthTotalValue,
#withdrawModal #submitWithdraw {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* сли wth-плашки вырвались за пределы модалки */
body > .wth-slot,
body > .wth-label,
body > .wth-value,
main > .wth-slot,
main > .wth-label,
main > .wth-value,
.app > .wth-slot,
.app > .wth-label,
.app > .wth-value,
.game > .wth-slot,
.game > .wth-label,
.game > .wth-value {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ижнюю кнопку навигации Withdraw  скрываем */
#btnWithdraw,
#btnWithdraw *,
.nav-btn,
.nav-btn *,
.bottom,
.bottom *,
.bottom-nav,
.bottom-nav *,
.bottom-buttons,
.bottom-buttons *,
.footer-buttons,
.footer-buttons * {
  visibility: visible !important;
}

/* === /BURROS_SAFE_WITHDRAW_HIDE_CSS_ONLY === */


/* === BURROS_WITHDRAW_BLOCKED_OPEN_ONLY === */

/* тдельная блок-картинка вывода. то  #withdrawModal, поэтому реальные кнопки вывода не появятся. */
#burrosWithdrawBlockedOpenOnly {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.72) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

#burrosWithdrawBlockedOpenOnly.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-card {
  position: relative !important;
  width: min(94vw, 430px) !important;
  max-width: 430px !important;
  animation: burrosWithdrawBlockIn 180ms ease both !important;
}

#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

@keyframes burrosWithdrawBlockIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* === /BURROS_WITHDRAW_BLOCKED_OPEN_ONLY === */


/* === BURROS_WITHDRAW_BLOCK_GAME_BG === */

/*
  withdrawblocked.png как обычный игровой фон:
  - не растягивается слишком широко;
  - не обрезается;
  - стоит по центру;
  - фон вокруг чёрный;
  - крестик остаётся сверху.
*/

#burrosWithdrawBlockedOpenOnly {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  align-items: center !important;
  justify-content: center !important;
}

#burrosWithdrawBlockedOpenOnly.open {
  display: flex !important;
}

#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-card {
  position: relative !important;
  width: min(100vw, 430px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  animation: none !important;
  overflow: hidden !important;
  background: #000 !important;
}

#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: #000 !important;
}

#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close {
  position: absolute !important;
  top: max(18px, env(safe-area-inset-top, 0px) + 10px) !important;
  right: max(16px, env(safe-area-inset-right, 0px) + 12px) !important;
  width: 44px !important;
  height: 44px !important;
  z-index: 1000001 !important;
}

/* === /BURROS_WITHDRAW_BLOCK_GAME_BG === */


/* === BURROS_WITHDRAW_CLOSE_LOWER === */

/* Крестик на blocked withdraw чуть ниже */
#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close {
  top: max(60px, env(safe-area-inset-top, 0px) + 52px) !important;
}

/* === /BURROS_WITHDRAW_CLOSE_LOWER === */


/* === BURROS_BOTTOM_BUTTON_GAP_ONLY_FIX === */
/*
  Fix only for 4 bottom buttons:
  - removes dark-blue gaps INSIDE the buttons
  - keeps blue gap only as page/main background
  - does not touch JS, balance, energy, withdraw logic, or button opening
*/

.bottom,
.bottom-nav,
.bottom-menu,
.nav-bottom {
  overflow: visible !important;
}

/* container: no visible inner spacing between button arts */
.bottom > .wrap,
.bottom .wrap,
.bottom-nav > .wrap,
.bottom-nav .wrap,
.bottom-menu > .wrap,
.bottom-menu .wrap {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  align-items: stretch !important;
  justify-content: center !important;
}

/* target ONLY the four bottom buttons */
#btnFriends,
#btnUpgrades,
#btnWithdraw,
#btnTasks {
  position: relative !important;
  overflow: hidden !important;

  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* make inner button images/art fill the whole button area */
#btnFriends > img,
#btnUpgrades > img,
#btnWithdraw > img,
#btnTasks > img,
#btnFriends picture,
#btnUpgrades picture,
#btnWithdraw picture,
#btnTasks picture,
#btnFriends canvas,
#btnUpgrades canvas,
#btnWithdraw canvas,
#btnTasks canvas,
#btnFriends .btn-bg,
#btnUpgrades .btn-bg,
#btnWithdraw .btn-bg,
#btnTasks .btn-bg,
#btnFriends .btn-icon,
#btnUpgrades .btn-icon,
#btnWithdraw .btn-icon,
#btnTasks .btn-icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: fill !important;
  object-position: center center !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* if the image is absolutely positioned, force it to cover the whole button */
#btnFriends > img,
#btnUpgrades > img,
#btnWithdraw > img,
#btnTasks > img {
  inset: 0 !important;
}

/* make inner dividers thinner by slightly overlapping button arts */
#btnUpgrades,
#btnWithdraw,
#btnTasks {
  margin-left: -1px !important;
}

/* do NOT break withdraw button */
#btnWithdraw {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* === /BURROS_BOTTOM_BUTTON_GAP_ONLY_FIX === */


/* === BURROS_ANDROID_TASKS_COIN_TAP_FIX === */
/*
  Safe frontend-only fix:
  - Android Tasks button hitbox
  - coin tap animation
  - does not touch backend, balance, energy, withdraw logic
*/

#btnTasks {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1008 !important;
}

/* Make inner layers inside Tasks not steal the click */
#btnTasks img,
#btnTasks picture,
#btnTasks canvas,
#btnTasks span,
#btnTasks div,
#btnTasks .btn-icon,
#btnTasks .btn-bg {
  pointer-events: none !important;
}

/* Keep all bottom buttons clickable, but especially Tasks */
#btnFriends,
#btnUpgrades,
#btnWithdraw,
#btnTasks {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Coin must receive taps on Android */
#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Animation class added by JS */
.burros-coin-tap-anim {
  animation: burrosCoinTapAnim 170ms ease-out both !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
}

@keyframes burrosCoinTapAnim {
  0% {
    transform: scale(1) translateY(0);
    filter: brightness(1);
  }
  45% {
    transform: scale(0.94) translateY(2px);
    filter: brightness(1.08);
  }
  100% {
    transform: scale(1) translateY(0);
    filter: brightness(1);
  }
}

/* === /BURROS_ANDROID_TASKS_COIN_TAP_FIX === */


/* === BURROS_COIN_ANIM_HAPTIC_FIX === */
/*
  Coin animation only.
  Does not touch balance, energy, backend, buttons, tasks or withdraw.
*/

#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ыстрая плавная анимация, похожая на старую: лёгкое сжатие + отскок */
.burros-coin-smooth-tap {
  animation: burrosCoinSmoothTap 135ms cubic-bezier(.18,.85,.25,1.25) both !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
}

@keyframes burrosCoinSmoothTap {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1);
  }

  38% {
    transform: translateY(3px) scale(0.955) rotate(-0.4deg);
    filter: brightness(1.08);
  }

  72% {
    transform: translateY(-1px) scale(1.025) rotate(0.25deg);
    filter: brightness(1.04);
  }

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

/* === /BURROS_COIN_ANIM_HAPTIC_FIX === */


/* === BURROS_FORCE_TAP_POWER_2_FIX === */
/* Only +2 flying text and coin tap feel. Does not touch main design. */

.burros-fly-plus-two {
  position: fixed !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  font-family: inherit !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: #111 !important;
  text-shadow:
    -2px -2px 0 #ffffff,
     2px -2px 0 #ffffff,
    -2px  2px 0 #ffffff,
     2px  2px 0 #ffffff,
     0px  3px 0 rgba(0,0,0,.28) !important;
  animation: burrosFlyPlusTwo 620ms ease-out forwards !important;
}

@keyframes burrosFlyPlusTwo {
  0% {
    transform: translate(-50%, -50%) scale(.85);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -70%) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -150%) scale(1);
    opacity: 0;
  }
}

.burros-coin-force-two-anim {
  animation: burrosCoinForceTwoAnim 135ms cubic-bezier(.18,.85,.25,1.25) both !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
}

@keyframes burrosCoinForceTwoAnim {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  45% {
    transform: translateY(3px) scale(.955);
    filter: brightness(1.08);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* === /BURROS_FORCE_TAP_POWER_2_FIX === */


/* === BURROS_ANDROID_BUTTONS_SAVE_NO_WHITE_TAP === */
/*
  Safe visual/click fix only:
  - removes my white flying tap numbers
  - fixes Android hitbox for 2nd and 4th bottom buttons
  - does not touch backend, balance design, energy design, withdraw logic
*/

/* Hide old white flying numbers from previous fixes */
.burros-fly-plus-two,
.burros-white-tap,
.burros-added-tap,
.burros-runtime-tap,
[data-burros-white-tap],
[data-burros-fly] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Bottom buttons must be clickable */
#btnFriends,
#btnUpgrades,
#btnWithdraw,
#btnTasks {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Android: 2nd and 4th buttons above decorative layers */
#btnUpgrades,
#btnTasks {
  z-index: 1010 !important;
}

/* Inner art should not steal clicks */
#btnFriends img,
#btnFriends picture,
#btnFriends canvas,
#btnFriends span,
#btnFriends div,
#btnFriends .btn-icon,
#btnFriends .btn-bg,
#btnUpgrades img,
#btnUpgrades picture,
#btnUpgrades canvas,
#btnUpgrades span,
#btnUpgrades div,
#btnUpgrades .btn-icon,
#btnUpgrades .btn-bg,
#btnWithdraw img,
#btnWithdraw picture,
#btnWithdraw canvas,
#btnWithdraw span,
#btnWithdraw div,
#btnWithdraw .btn-icon,
#btnWithdraw .btn-bg,
#btnTasks img,
#btnTasks picture,
#btnTasks canvas,
#btnTasks span,
#btnTasks div,
#btnTasks .btn-icon,
#btnTasks .btn-bg {
  pointer-events: none !important;
}

/* Coin still receives taps, but no white numbers are added by this fix */
#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Small smooth coin animation, no text */
.burros-coin-soft-tap-only {
  animation: burrosCoinSoftTapOnly 120ms cubic-bezier(.18,.85,.25,1.2) both !important;
  transform-origin: center center !important;
  will-change: transform, filter !important;
}

@keyframes burrosCoinSoftTapOnly {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  45% {
    transform: translateY(2px) scale(.965);
    filter: brightness(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* === /BURROS_ANDROID_BUTTONS_SAVE_NO_WHITE_TAP === */


/* === BURROS_ANDROID_BUTTONS_COIN_NOGLOW_FIX === */
/*
  Only Android UI fix:
  - fixes 2nd and 4th bottom buttons hitbox
  - coin jumps on tap
  - no glow / no brightness on coin
  - does NOT touch backend, energy, balance, saves, withdraw logic
*/

/* 2nd and 4th bottom buttons */
#btnUpgrades,
#btnTasks,
.bottom > .wrap > *:nth-child(2),
.bottom > .wrap > *:nth-child(4),
.bottom .wrap > *:nth-child(2),
.bottom .wrap > *:nth-child(4) {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  z-index: 2005 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Inner art should not steal clicks from 2nd and 4th buttons */
#btnUpgrades img,
#btnUpgrades picture,
#btnUpgrades canvas,
#btnUpgrades span,
#btnUpgrades div,
#btnUpgrades .btn-icon,
#btnUpgrades .btn-bg,
#btnTasks img,
#btnTasks picture,
#btnTasks canvas,
#btnTasks span,
#btnTasks div,
#btnTasks .btn-icon,
#btnTasks .btn-bg {
  pointer-events: none !important;
}

/* Coin tap target stays active */
#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Kill glow/brightness from older fixes */
.burros-coin-tap-anim,
.burros-coin-smooth-tap,
.burros-coin-force-two-anim,
.burros-coin-soft-tap-only,
.burros-coin-android-jump {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* New Android coin jump: fast, smooth, no glow */
.burros-coin-android-jump {
  animation: burrosCoinAndroidJump 135ms cubic-bezier(.18,.85,.25,1.18) both !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

@keyframes burrosCoinAndroidJump {
  0% {
    transform: translateY(0) scale(1);
    filter: none;
  }
  42% {
    transform: translateY(-7px) scale(1.025);
    filter: none;
  }
  72% {
    transform: translateY(2px) scale(.985);
    filter: none;
  }
  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* === /BURROS_ANDROID_BUTTONS_COIN_NOGLOW_FIX === */


/* === BURROS_TAP_PRICES_ANDROID_FIX === */
/*
  Safe frontend-only fix:
  - Android hitbox for 2nd and 4th bottom buttons
  - Android coin jump animation without glow
  - does not touch backend, balance, energy, saves, withdraw logic
*/

#btnUpgrades,
#btnTasks,
.bottom > .wrap > *:nth-child(2),
.bottom > .wrap > *:nth-child(4),
.bottom .wrap > *:nth-child(2),
.bottom .wrap > *:nth-child(4) {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  z-index: 2500 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#btnUpgrades img,
#btnUpgrades picture,
#btnUpgrades canvas,
#btnUpgrades span,
#btnUpgrades div,
#btnUpgrades .btn-icon,
#btnUpgrades .btn-bg,
#btnTasks img,
#btnTasks picture,
#btnTasks canvas,
#btnTasks span,
#btnTasks div,
#btnTasks .btn-icon,
#btnTasks .btn-bg {
  pointer-events: none !important;
}

#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Убираем свечение от прошлых анимаций */
.burros-coin-tap-anim,
.burros-coin-smooth-tap,
.burros-coin-force-two-anim,
.burros-coin-soft-tap-only,
.burros-coin-android-jump,
.burros-coin-tap-prices-jump {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.burros-coin-tap-prices-jump {
  animation: burrosCoinTapPricesJump 130ms cubic-bezier(.18,.85,.25,1.18) both !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

@keyframes burrosCoinTapPricesJump {
  0% {
    transform: translateY(0) scale(1);
    filter: none;
  }
  42% {
    transform: translateY(-7px) scale(1.025);
    filter: none;
  }
  72% {
    transform: translateY(2px) scale(.985);
    filter: none;
  }
  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* === /BURROS_TAP_PRICES_ANDROID_FIX === */


/* === BURROS_ANDROID_UPGRADES_TASKS_COIN_BOUNCE === */
/*
  Android-only interaction fix:
  - fixes Upgrades and Tasks bottom buttons hitbox
  - adds smooth coin bounce
  - removes glow/brightness on tap
  - does not touch backend, balance, energy, saves, withdraw
*/

#btnUpgrades,
#btnTasks,
.bottom > .wrap > *:nth-child(2),
.bottom > .wrap > *:nth-child(4),
.bottom .wrap > *:nth-child(2),
.bottom .wrap > *:nth-child(4) {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  z-index: 3000 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Decorative children must not steal taps */
#btnUpgrades img,
#btnUpgrades picture,
#btnUpgrades canvas,
#btnUpgrades span,
#btnUpgrades div,
#btnUpgrades .btn-icon,
#btnUpgrades .btn-bg,
#btnTasks img,
#btnTasks picture,
#btnTasks canvas,
#btnTasks span,
#btnTasks div,
#btnTasks .btn-icon,
#btnTasks .btn-bg {
  pointer-events: none !important;
}

/* Coin stays tappable */
#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Kill glow/brightness from old fixes */
.burros-coin-tap-anim,
.burros-coin-smooth-tap,
.burros-coin-force-two-anim,
.burros-coin-soft-tap-only,
.burros-coin-android-jump,
.burros-coin-tap-prices-jump,
.burros-android-coin-bounce-clean {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Smooth Android bounce, no glow */
.burros-android-coin-bounce-clean {
  animation: burrosAndroidCoinBounceClean 155ms cubic-bezier(.2,.9,.25,1.2) both !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

@keyframes burrosAndroidCoinBounceClean {
  0% {
    transform: translateY(0) scale(1);
    filter: none;
  }
  32% {
    transform: translateY(-8px) scale(1.018);
    filter: none;
  }
  68% {
    transform: translateY(2px) scale(.992);
    filter: none;
  }
  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* === /BURROS_ANDROID_UPGRADES_TASKS_COIN_BOUNCE === */


/* === BURROS_ANDROID_REAL_HITBOX_COIN_FIX === */
/*
  Android-only:
  - real hitboxes over visual images of Upgrades and Tasks
  - coin bounce without glow
  - no backend / balance / energy / save changes
*/

.burros-android-real-hitbox {
  position: fixed !important;
  display: block !important;
  background: transparent !important;
  opacity: 1 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 2147483000 !important;
}

/* The original buttons must remain enabled */
#btnUpgrades,
#btnTasks {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Their inner art must not steal the click */
#btnUpgrades img,
#btnUpgrades picture,
#btnUpgrades canvas,
#btnUpgrades span,
#btnUpgrades div,
#btnUpgrades .btn-icon,
#btnUpgrades .btn-bg,
#btnTasks img,
#btnTasks picture,
#btnTasks canvas,
#btnTasks span,
#btnTasks div,
#btnTasks .btn-icon,
#btnTasks .btn-bg {
  pointer-events: none !important;
}

/* Coin stays tappable */
#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Kill glow from older fixes */
.burros-coin-tap-anim,
.burros-coin-smooth-tap,
.burros-coin-force-two-anim,
.burros-coin-soft-tap-only,
.burros-coin-android-jump,
.burros-coin-tap-prices-jump,
.burros-android-coin-bounce-clean,
.burros-real-android-coin-bounce {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* fallback CSS animation if Web Animations API is unavailable */
.burros-real-android-coin-bounce {
  animation: burrosRealAndroidCoinBounce 165ms cubic-bezier(.18,.9,.22,1.18) both !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

@keyframes burrosRealAndroidCoinBounce {
  0% {
    transform: translate3d(0,0,0) scale(1);
    filter: none;
  }
  34% {
    transform: translate3d(0,-10px,0) scale(1.025);
    filter: none;
  }
  70% {
    transform: translate3d(0,2px,0) scale(.992);
    filter: none;
  }
  100% {
    transform: translate3d(0,0,0) scale(1);
    filter: none;
  }
}

/* === /BURROS_ANDROID_REAL_HITBOX_COIN_FIX === */


/* === BURROS_SAFE_GAMEPLAY_FIX === */
/*
  Safe gameplay UI fix:
  - inner overlay buttons clickable
  - Android coin bounce without glow
  - no backend rewrite
  - no white tap numbers
*/

button,
[role="button"],
a,
.btn,
.button,
.task-btn,
.claim-btn,
.buy-btn,
.upgrade-btn,
.friend-btn,
.withdraw-btn,
.check-btn,
.verify-btn,
[data-action],
[data-task],
[data-upgrade],
[data-open],
[data-close],
[data-claim],
[data-buy] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

#btnFriends,
#btnUpgrades,
#btnWithdraw,
#btnTasks {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  z-index: 3000 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* нутренние картинки нижних кнопок не крадут клик */
#btnFriends img,
#btnFriends picture,
#btnFriends canvas,
#btnFriends span,
#btnFriends div,
#btnFriends .btn-icon,
#btnFriends .btn-bg,
#btnUpgrades img,
#btnUpgrades picture,
#btnUpgrades canvas,
#btnUpgrades span,
#btnUpgrades div,
#btnUpgrades .btn-icon,
#btnUpgrades .btn-bg,
#btnWithdraw img,
#btnWithdraw picture,
#btnWithdraw canvas,
#btnWithdraw span,
#btnWithdraw div,
#btnWithdraw .btn-icon,
#btnWithdraw .btn-bg,
#btnTasks img,
#btnTasks picture,
#btnTasks canvas,
#btnTasks span,
#btnTasks div,
#btnTasks .btn-icon,
#btnTasks .btn-bg {
  pointer-events: none !important;
}

#coin,
#mainCoin,
#tapCoin,
#tapBtn,
.coin,
.main-coin,
.tap-coin,
.coin-button,
.coin-area,
.tap-area,
.coin-wrap,
.coin-container,
[data-coin],
[data-tap] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Убираем пересвет от старых фиксов */
.burros-safe-coin-bounce,
.burros-coin-tap-anim,
.burros-coin-smooth-tap,
.burros-coin-force-two-anim,
.burros-coin-soft-tap-only,
.burros-coin-android-jump,
.burros-coin-tap-prices-jump,
.burros-android-coin-bounce-clean,
.burros-real-android-coin-bounce {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.burros-safe-coin-bounce {
  animation: burrosSafeCoinBounce 150ms cubic-bezier(.18,.9,.22,1.18) both !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

@keyframes burrosSafeCoinBounce {
  0% {
    transform: translate3d(0,0,0) scale(1);
    filter: none;
  }
  35% {
    transform: translate3d(0,-10px,0) scale(1.025);
    filter: none;
  }
  72% {
    transform: translate3d(0,2px,0) scale(.992);
    filter: none;
  }
  100% {
    transform: translate3d(0,0,0) scale(1);
    filter: none;
  }
}

/* === /BURROS_SAFE_GAMEPLAY_FIX === */


/* === BURROS_UPGRADE_CONFIRM_UI_CSS === */
#upgradesModal.open #upTap,
#upgradesModal.open #upEnergy,
#upgradesModal.open #upRegen,
#upgradesModal.open #upAuto {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

#upgradesModal.open #upTapText,
#upgradesModal.open #upEnergyText,
#upgradesModal.open #upRegenText,
#upgradesModal.open #upAutoText,
#upgradesModal.open #upTapText *,
#upgradesModal.open #upEnergyText *,
#upgradesModal.open #upRegenText *,
#upgradesModal.open #upAutoText * {
  pointer-events: none !important;
}
/* === /BURROS_UPGRADE_CONFIRM_UI_CSS === */


/* === BURROS_SAFE_NATIVE_FRIENDS_UPGRADES_DAILY_CSS === */

/* Friends modal opens from bottom like the others */
#friendsModal {
  transition: opacity .25s ease-out, transform .25s ease-out !important;
}

#friendsModal:not(.open) {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#friendsModal.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Tap hitboxes inside modals */
#tasksModal button,
#tasksModal a,
#upgradesModal button,
#upgradesModal a,
#friendsModal button,
#friendsModal a,
.task-btn,
.upg-slot,
.ref-slot {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* === /BURROS_SAFE_NATIVE_FRIENDS_UPGRADES_DAILY_CSS === */
/* === BURROS_BOOT_VISIBILITY_SAFE === */
html,
body {
  min-height: 100%;
  background: #050505;
}

body {
  opacity: 1 !important;
  visibility: visible !important;
}

#app,
.app,
main {
  opacity: 1 !important;
  visibility: visible !important;
}
/* === /BURROS_BOOT_VISIBILITY_SAFE === */


/* === BURROS_STABLE_ALL_SYSTEM_CSS === */
html,
body {
  min-height: 100%;
  background: #050505;
}

body,
#app,
.app,
main {
  opacity: 1 !important;
  visibility: visible !important;
}

#upTap,
#upEnergy,
#upRegen,
#upAuto,
#tasksModal button,
#tasksModal a,
#upgradesModal button,
#upgradesModal a,
#friendsModal button,
#friendsModal a,
.task-btn,
.upg-slot,
.ref-slot {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

#upTap *,
#upEnergy *,
#upRegen *,
#upAuto *,
.upg-slot *,
.task-btn *,
.ref-slot * {
  pointer-events: none !important;
}

#tapBtn.burros-stable-coin-pop,
.coin.burros-stable-coin-pop {
  animation: burrosStableCoinPop 150ms cubic-bezier(.18,.85,.25,1.18) both !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

@keyframes burrosStableCoinPop {
  0% { transform: translate3d(0,0,0) scale(1); }
  45% { transform: translate3d(0,-9px,0) scale(1.035); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

#friendsModal {
  transition: opacity .25s ease-out, transform .25s ease-out !important;
}

#friendsModal:not(.open) {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#friendsModal.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* === /BURROS_STABLE_ALL_SYSTEM_CSS === */


/* === BURROS_ALL_UPGRADES_BUY_APPLY_LEVELS_CSS === */
#upTap,
#upEnergy,
#upRegen,
#upAuto,
#upgradesModal button,
#upgradesModal a,
#upgradesOverlay button,
#upgradesOverlay a,
.upg-slot,
.upgrade,
.upgrade-card,
.upgrade-button,
.upgrade-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
  z-index: 80 !important;
}

#upTap *,
#upEnergy *,
#upRegen *,
#upAuto *,
.upg-slot *,
.upgrade *,
.upgrade-card *,
.upgrade-button *,
.upgrade-btn * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#upTap.burros-buying-upgrade-now,
#upEnergy.burros-buying-upgrade-now,
#upRegen.burros-buying-upgrade-now,
#upAuto.burros-buying-upgrade-now,
.upg-slot.burros-buying-upgrade-now,
.upgrade.burros-buying-upgrade-now,
.upgrade-card.burros-buying-upgrade-now,
.upgrade-button.burros-buying-upgrade-now,
.upgrade-btn.burros-buying-upgrade-now {
  transform: translate3d(0,0,0) scale(.975) !important;
  transition: transform 70ms linear !important;
}
/* === /BURROS_ALL_UPGRADES_BUY_APPLY_LEVELS_CSS === */


/* === BURROS_RECHARGE_ONLY_BUY_APPLY_CSS === */
#upRegen {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
  z-index: 120 !important;
}

#upRegen * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#upRegen.burros-recharge-buying-now {
  transform: translate3d(0,0,0) scale(.975) !important;
  transition: transform 70ms linear !important;
}
/* === /BURROS_RECHARGE_ONLY_BUY_APPLY_CSS === */


/* === BURROS_RESTORE_ALL_BOTTOM_NAV_CSS === */
#btnFriends,
#btnUpgrades,
#btnWithdraw,
#btnTasks {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
  z-index: 2147483000 !important;
}

#btnFriends *,
#btnUpgrades *,
#btnWithdraw *,
#btnTasks *,
#btnFriends img,
#btnUpgrades img,
#btnWithdraw img,
#btnTasks img,
#btnFriends span,
#btnUpgrades span,
#btnWithdraw span,
#btnTasks span {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
/* === /BURROS_RESTORE_ALL_BOTTOM_NAV_CSS === */



/* === BURROS_WITHDRAW_CLOSE_POSITION_SIZE_FIX === */
.withdraw-blocked-close,
#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close {
  top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)) + 4.9%) !important;
}

.withdraw-blocked-close img,
#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close img {
  width: 90% !important;
  height: 90% !important;
}
/* === /BURROS_WITHDRAW_CLOSE_POSITION_SIZE_FIX === */

/* === BURROS_WITHDRAW_CLOSE_FINE_TUNE_FIX === */
.withdraw-blocked-close,
#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close {
  top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)) + 5.25%) !important;
}

.withdraw-blocked-close img,
#burrosWithdrawBlockedOpenOnly .burros-withdraw-block-close img {
  width: 86% !important;
  height: 86% !important;
}
/* === /BURROS_WITHDRAW_CLOSE_FINE_TUNE_FIX === */
/* === BURROS_ANDROID_BG_LOWER_CLOSES_TINY_LOWER_FIX === */

/* Android: фон ещё чуть пониже */
html.burros-android .app,
body.burros-android .app {
  background-position: center calc(50% + 24px) !important;
}

html.burros-android body,
body.burros-android {
  background-position: center calc(50% + 24px) !important;
}

/* сли фон сидит на skin-элементах, тоже чуть ниже */
html.burros-android .upgrades-skin,
html.burros-android .tasks-skin,
html.burros-android .referral-skin,
html.burros-android .withdraw-blocked-sheet,
body.burros-android .upgrades-skin,
body.burros-android .tasks-skin,
body.burros-android .referral-skin,
body.burros-android .withdraw-blocked-sheet {
  background-position: center calc(50% + 22px) !important;
}

/* Android: лучшения — крестик на микрокаплю ниже */
html.burros-android #upgradesModal.open .upg-close,
html.burros-android #upgradesModal.open #closeUpgrades,
body.burros-android #upgradesModal.open .upg-close,
body.burros-android #upgradesModal.open #closeUpgrades {
  top: max(82px, calc(env(safe-area-inset-top, 0px) + 64px), calc(var(--tg-safe-area-inset-top, 0px) + 64px), calc(var(--tg-content-safe-area-inset-top, 0px) + 64px)) !important;
}

/* Android: адания — крестик на каплю ниже */
html.burros-android #tasksModal.open .task-close,
html.burros-android #tasksModal.open #closeTasks,
body.burros-android #tasksModal.open .task-close,
body.burros-android #tasksModal.open #closeTasks {
  top: max(76px, calc(env(safe-area-inset-top, 0px) + 58px), calc(var(--tg-safe-area-inset-top, 0px) + 58px), calc(var(--tg-content-safe-area-inset-top, 0px) + 58px)) !important;
}

/* === /BURROS_ANDROID_BG_LOWER_CLOSES_TINY_LOWER_FIX === */

/* === BURROS_ANDROID_BG_ONE_DROP_LOWER_FIX === */

/* Android: фон еще чуть-чуть ниже */
html.burros-android .app,
body.burros-android .app {
  background-position: center calc(50% + 30px) !important;
}

html.burros-android body,
body.burros-android {
  background-position: center calc(50% + 30px) !important;
}

html.burros-android .upgrades-skin,
html.burros-android .tasks-skin,
html.burros-android .referral-skin,
html.burros-android .withdraw-blocked-sheet,
body.burros-android .upgrades-skin,
body.burros-android .tasks-skin,
body.burros-android .referral-skin,
body.burros-android .withdraw-blocked-sheet {
  background-position: center calc(50% + 28px) !important;
}

/* === /BURROS_ANDROID_BG_ONE_DROP_LOWER_FIX === */

/* === BURROS_COIN_SCALE_LAYER_ANIMATION_FIX === */

/*
  равильная схема:
  .coin / #tapBtn  анимируем.
  ни отвечают за позицию монетки.
  нимируем только внутренний слой .coin-scale-layer.
*/

.coin .coin-scale-layer,
#tapBtn .coin-scale-layer {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.coin .coin-scale-layer > .coin-image,
#tapBtn .coin-scale-layer > .coin-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

/* одитель получает .tapped, но сам не двигается */
.coin.tapped,
#tapBtn.tapped {
  animation: none !important;
  -webkit-animation: none !important;
}

/* бираем старый bubble/вылет */
.coin.tapped::before,
#tapBtn.tapped::before {
  animation: none !important;
  -webkit-animation: none !important;
  opacity: 0 !important;
}

/* нимируем только новый внутренний слой */
.coin.tapped .coin-scale-layer,
#tapBtn.tapped .coin-scale-layer {
  animation: burrosCoinLayerPress 0.30s cubic-bezier(.18,.88,.24,1.08) both !important;
  -webkit-animation: burrosCoinLayerPress 0.30s cubic-bezier(.18,.88,.24,1.08) both !important;
}

/* тап -> уменьшилась -> вернулась */
@keyframes burrosCoinLayerPress {
  0% {
    transform: translateZ(0) scale(1);
  }
  38% {
    transform: translateZ(0) scale(0.90);
  }
  72% {
    transform: translateZ(0) scale(1.018);
  }
  100% {
    transform: translateZ(0) scale(1);
  }
}

@-webkit-keyframes burrosCoinLayerPress {
  0% {
    -webkit-transform: translateZ(0) scale(1);
  }
  38% {
    -webkit-transform: translateZ(0) scale(0.90);
  }
  72% {
    -webkit-transform: translateZ(0) scale(1.018);
  }
  100% {
    -webkit-transform: translateZ(0) scale(1);
  }
}

/* === /BURROS_COIN_SCALE_LAYER_ANIMATION_FIX === */

/* === BURROS_SAFE_WITHDRAW_AND_FRIENDS_ANIM_V2 === */

/* 1) ывод работает на главном меню */
#btnWithdraw {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#btnWithdraw * {
  pointer-events: none !important;
}

/* 2) ывод  кликается, когда открыто другое окно */
html:has(#tasksModal.open) #btnWithdraw,
body:has(#tasksModal.open) #btnWithdraw,
html:has(#upgradesModal.open) #btnWithdraw,
body:has(#upgradesModal.open) #btnWithdraw,
html:has(#friendsModal.open) #btnWithdraw,
body:has(#friendsModal.open) #btnWithdraw,
html:has(#referralModal.open) #btnWithdraw,
body:has(#referralModal.open) #btnWithdraw {
  pointer-events: none !important;
  touch-action: none !important;
}

/* сли ывод пробивает как нижний nav-слот */
html:has(#tasksModal.open) #btnWithdraw,
html:has(#upgradesModal.open) #btnWithdraw,
html:has(#friendsModal.open) #btnWithdraw,
html:has(#referralModal.open) #btnWithdraw {
  z-index: 1 !important;
}

/* 3) рузья вылетают снизу вверх */
#friendsModal .sheet,
#friendsModal .sheet-full,
#friendsModal .referral-skin,
#referralModal .sheet,
#referralModal .sheet-full,
#referralModal .referral-skin {
  transform: translate3d(0, 115%, 0) !important;
  transition: transform 260ms cubic-bezier(.18,.88,.24,1.04), opacity 180ms ease !important;
  will-change: transform !important;
}

#friendsModal.open .sheet,
#friendsModal.open .sheet-full,
#friendsModal.open .referral-skin,
#referralModal.open .sheet,
#referralModal.open .sheet-full,
#referralModal.open .referral-skin {
  transform: translate3d(0, 0, 0) !important;
}

/* 4) кно друзей кликабельное */
#friendsModal.open,
#referralModal.open,
#friendsModal.open .sheet,
#friendsModal.open .sheet-full,
#friendsModal.open .referral-skin,
#referralModal.open .sheet,
#referralModal.open .sheet-full,
#referralModal.open .referral-skin {
  pointer-events: auto !important;
}

/* === /BURROS_SAFE_WITHDRAW_AND_FRIENDS_ANIM_V2 === */

/* === BURROS_WITHDRAW_OPEN_SAFE_CSS === */

#btnWithdraw {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#btnWithdraw * {
  pointer-events: none !important;
}

/* ывод работает только на главном экране, не внутри других окон */
html:has(#tasksModal.open) #btnWithdraw,
body:has(#tasksModal.open) #btnWithdraw,
html:has(#upgradesModal.open) #btnWithdraw,
body:has(#upgradesModal.open) #btnWithdraw,
html:has(#friendsModal.open) #btnWithdraw,
body:has(#friendsModal.open) #btnWithdraw,
html:has(#referralModal.open) #btnWithdraw,
body:has(#referralModal.open) #btnWithdraw {
  pointer-events: none !important;
  touch-action: none !important;
}

/* === /BURROS_WITHDRAW_OPEN_SAFE_CSS === */

/* === BURROS_WITHDRAW_RESTORE_PREV_BUT_WIDER_FIX === */

/*
  озвращаем окно ывод почти к прежнему виду,
  но делаем фон чуть шире, чтобы текст не выглядел вытянутым вверх.
*/

#burrosWithdrawSingleCardOverlay {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  display: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  overflow: hidden !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  z-index: 2147483000 !important;
}

#burrosWithdrawSingleCardOverlay.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/*
  ыло 100vw x 100vh.
  Теперь делаем фон чуть шире экрана и центрируем.
  то уменьшает визуальное вертикальное растяжение.
*/
#burrosWithdrawSingleCardOverlay .burros-withdraw-single-card {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 104vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  overflow: hidden !important;

  background-color: transparent !important;
  background-image: url("/images/withdrawblocked.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;

  pointer-events: auto !important;
}

/* рестик как раньше — обычного размера и в обычном месте */
#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  position: fixed !important;

  top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
  right: 18px !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background-color: transparent !important;
  background-image: url("/images/close_block.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;

  z-index: 2147483646 !important;
  cursor: pointer !important;
}

/* Android — как раньше, на каплю ниже */
html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
}

/* Старые withdraw-окна скрываем */
#withdrawModal,
#withdrawBlockedModal,
#burrosWithdrawBlockedOpenOnly {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === /BURROS_WITHDRAW_RESTORE_PREV_BUT_WIDER_FIX === */

/* === BURROS_WITHDRAW_CLOSE_BIGGER_LEFT_FIX === */

/*
  Только крестик в окне "ывод":
  - чуть больше;
  - чуть левее.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 24px !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;

  background-size: contain !important;
}

/* Android тоже чуть больше и левее */
html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 24px !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}

/* === /BURROS_WITHDRAW_CLOSE_BIGGER_LEFT_FIX === */

/* === BURROS_WITHDRAW_CLOSE_TINY_MORE_LEFT_FIX === */

/*
  Только крестик в окне "ывод":
  - ещё на каплю левее.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 28px !important;
}

/* Android тоже на каплю левее */
html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 28px !important;
}

/* === /BURROS_WITHDRAW_CLOSE_TINY_MORE_LEFT_FIX === */

/* === BURROS_FRIENDS_FULLSCREEN_BOTTOM_UP_ANIM_FIX === */

/*
  Только окно "рузья":
  - открытие снизу вверх;
  - на весь экран;
  - как у остальных окон.
*/

#friendsModal,
#referralModal {
  overflow: hidden !important;
}

/* акрытое состояние — окно/картинка находится ниже экрана */
#friendsModal .sheet,
#friendsModal .sheet-full,
#friendsModal .referral-skin,
#friendsModal .friends-skin,
#referralModal .sheet,
#referralModal .sheet-full,
#referralModal .referral-skin,
#referralModal .friends-skin {
  transform: translate3d(0, 115%, 0) !important;
  transition: transform 280ms cubic-bezier(.18,.88,.24,1.04), opacity 180ms ease !important;
  will-change: transform !important;
}

/* ткрытое состояние — вылетает снизу вверх на место */
#friendsModal.open .sheet,
#friendsModal.open .sheet-full,
#friendsModal.open .referral-skin,
#friendsModal.open .friends-skin,
#referralModal.open .sheet,
#referralModal.open .sheet-full,
#referralModal.open .referral-skin,
#referralModal.open .friends-skin {
  transform: translate3d(0, 0, 0) !important;
}

/* тобы окно друзей оставалось на весь экран, как другие */
#friendsModal.open,
#referralModal.open {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

/* онтент внутри остаётся кликабельным */
#friendsModal.open .sheet,
#friendsModal.open .sheet-full,
#friendsModal.open .referral-skin,
#friendsModal.open .friends-skin,
#referralModal.open .sheet,
#referralModal.open .sheet-full,
#referralModal.open .referral-skin,
#referralModal.open .friends-skin,
#friendsModal.open .ref-slot,
#friendsModal.open .ref-close,
#friendsModal.open #closeFriends,
#referralModal.open .ref-slot,
#referralModal.open .ref-close,
#referralModal.open #closeFriends {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* === /BURROS_FRIENDS_FULLSCREEN_BOTTOM_UP_ANIM_FIX === */

/* === BURROS_FRIENDS_NO_RIGHT_SIDE_JUMP_FIX === */

/*
  Убирает баг:
  при открытии "рузья" элементы сначала находятся справа за экраном,
  потом вылетают в нормальное место.

  ставляем только вертикальную анимацию снизу вверх.
*/

/* Само окно не должно иметь горизонтального сдвига */
#friendsModal,
#referralModal {
  overflow: hidden !important;
}

/* сновной фон/контейнер друзей двигается только по Y, не по X */
#friendsModal .sheet,
#friendsModal .sheet-full,
#friendsModal .referral-skin,
#friendsModal .friends-skin,
#referralModal .sheet,
#referralModal .sheet-full,
#referralModal .referral-skin,
#referralModal .friends-skin {
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  width: 100vw !important;
  max-width: none !important;

  translate: none !important;
  transform-origin: center bottom !important;

  transform: translate3d(0, 115%, 0) !important;
  transition: transform 280ms cubic-bezier(.18,.88,.24,1.04), opacity 180ms ease !important;
  will-change: transform !important;
}

/* ткрытие — только вверх, без бокового движения */
#friendsModal.open .sheet,
#friendsModal.open .sheet-full,
#friendsModal.open .referral-skin,
#friendsModal.open .friends-skin,
#referralModal.open .sheet,
#referralModal.open .sheet-full,
#referralModal.open .referral-skin,
#referralModal.open .friends-skin {
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  translate: none !important;
  transform: translate3d(0, 0, 0) !important;
}

/* нутренние кнопки/элементы не должны наследовать боковой transform */
#friendsModal .ref-slot,
#friendsModal .ref-close,
#friendsModal #closeFriends,
#friendsModal .friends-close,
#referralModal .ref-slot,
#referralModal .ref-close,
#referralModal #closeFriends,
#referralModal .friends-close {
  transform: none !important;
  translate: none !important;
}

/* сли где-то есть анимация справа налево — отключаем только внутри рузей */
#friendsModal.open .ref-slot,
#friendsModal.open .ref-close,
#friendsModal.open #closeFriends,
#friendsModal.open .friends-close,
#referralModal.open .ref-slot,
#referralModal.open .ref-close,
#referralModal.open #closeFriends,
#referralModal.open .friends-close {
  animation-name: none !important;
}

/* === /BURROS_FRIENDS_NO_RIGHT_SIDE_JUMP_FIX === */

/* === BURROS_WITHDRAW_IMAGE_TINY_WIDER_FIX === */

/*
  Только картинка "ывод":
  делаем фон чуть шире, чтобы текст выглядел менее вытянутым.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-card {
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 106vw !important;
  max-width: none !important;

  background-size: 100% 100% !important;
  background-position: center center !important;
}

/* === /BURROS_WITHDRAW_IMAGE_TINY_WIDER_FIX === */



/* === BURROS_WITHDRAW_IMAGE_ONE_DROP_WIDER_FIX === */

/*
  Только картинка "ывод":
  буквально на каплю шире.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-card {
  left: 50% !important;
  width: 107vw !important;
  max-width: none !important;

  background-size: 100% 100% !important;
  background-position: center center !important;
}

/* Сохраняем текущую анимацию снизу вверх */
#burrosWithdrawSingleCardOverlay .burros-withdraw-single-card {
  transform: translate3d(-50%, 115%, 0) !important;
}

#burrosWithdrawSingleCardOverlay.open .burros-withdraw-single-card {
  transform: translate3d(-50%, 0, 0) !important;
}

/* === /BURROS_WITHDRAW_IMAGE_ONE_DROP_WIDER_FIX === */

/* === BURROS_WITHDRAW_REAL_BOTTOM_UP_ANIM_FIX === */

/*
  Только анимация открытия "ывод":
  - убираем "открывается как дерево";
  - открытие снизу вверх;
  - сохраняем центрирование и текущую ширину картинки.
*/

#burrosWithdrawSingleCardOverlay {
  overflow: hidden !important;
}

/* азовое положение картинки */
#burrosWithdrawSingleCardOverlay .burros-withdraw-single-card {
  left: 50% !important;
  transform-origin: center bottom !important;
  transition: none !important;
  will-change: transform !important;
}

/* огда окно открыто — проигрываем нормальный вылет снизу вверх */
#burrosWithdrawSingleCardOverlay.open .burros-withdraw-single-card {
  animation: burrosWithdrawSlideUpReal 280ms cubic-bezier(.18,.88,.24,1.04) both !important;
}

/* ез scale, без разворота, без "дерева" — только движение снизу вверх */
@keyframes burrosWithdrawSlideUpReal {
  0% {
    transform: translate3d(-50%, 115%, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@-webkit-keyframes burrosWithdrawSlideUpReal {
  0% {
    -webkit-transform: translate3d(-50%, 115%, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
}

/* осле анимации карточка остаётся ровно на месте */
#burrosWithdrawSingleCardOverlay.open .burros-withdraw-single-card {
  transform: translate3d(-50%, 0, 0) !important;
}

/* рестик не анимируем отдельно, чтобы он не прыгал */
#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* === /BURROS_WITHDRAW_REAL_BOTTOM_UP_ANIM_FIX === */

/* === BURROS_WITHDRAW_FONT_NOT_TALL_FIX === */

/*
  Только фон "ывод":
  - делаем картинку шире, чтобы текст не казался вытянутым вверх;
  - высота остаётся на весь экран;
  - крестик не трогаем.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-card {
  left: 50% !important;

  /*
    ыло около 110vw.
    елаем шире, чтобы компенсировать вертикальную вытянутость шрифта.
  */
  width: 116vw !important;
  height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  transform: translate3d(-50%, 115%, 0) !important;
}

#burrosWithdrawSingleCardOverlay.open .burros-withdraw-single-card {
  transform: translate3d(-50%, 0, 0) !important;
}

/* рестик не меняем */

/* === /BURROS_WITHDRAW_FONT_NOT_TALL_FIX === */

/* === BURROS_WITHDRAW_CLOSE_MORE_LEFT_AFTER_UPGRADE_FIX === */

/*
  Только крестик в окне "ывод":
  сдвигаем левее, фон/анимации/покупки не трогаем.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 34px !important;
}

html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 34px !important;
}

/* === /BURROS_WITHDRAW_CLOSE_MORE_LEFT_AFTER_UPGRADE_FIX === */

/* === BURROS_WITHDRAW_CLOSE_EVEN_MORE_LEFT_FIX === */

/*
  Только крестик в окне "ывод":
  сдвигаем ещё левее.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 42px !important;
}

html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 42px !important;
}

/* === /BURROS_WITHDRAW_CLOSE_EVEN_MORE_LEFT_FIX === */

/* === BURROS_WITHDRAW_CLOSE_ONE_MORE_DROP_LEFT_FIX === */

/*
  Только крестик в окне "ывод":
  ещё чуть-чуть левее.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 48px !important;
}

html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 48px !important;
}

/* === /BURROS_WITHDRAW_CLOSE_ONE_MORE_DROP_LEFT_FIX === */

/* === BURROS_ALL_UPGRADES_REAL_BUY_APPLY_GUARD_CSS === */
#upTap,
#upEnergy,
#upRegen,
#upAuto {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
  z-index: 500 !important;
}

#upTap *,
#upEnergy *,
#upRegen *,
#upAuto * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
/* === /BURROS_ALL_UPGRADES_REAL_BUY_APPLY_GUARD_CSS === */

/* === BURROS_WITHDRAW_CLOSE_YET_MORE_LEFT_FIX === */

/*
  Только крестик в окне "ывод":
  ещё чуть-чуть левее.
*/

#burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 54px !important;
}

html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  right: 54px !important;
}

/* === /BURROS_WITHDRAW_CLOSE_YET_MORE_LEFT_FIX === */

/* === BURROS_ANDROID_WITHDRAW_CLOSE_SMALLER_LOWER_FIX === */

/*
  Только Android:
  крестик в окне "ывод" чуть меньше и чуть ниже.
*/

html.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close,
body.burros-android #burrosWithdrawSingleCardOverlay .burros-withdraw-single-close {
  top: calc(env(safe-area-inset-top, 0px) + 86px) !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  background-size: contain !important;
}

/* === /BURROS_ANDROID_WITHDRAW_CLOSE_SMALLER_LOWER_FIX === */