/*
 * xMAFIA R3.62
 * Original VIPPanel / DailyBonusPanel browser adapter.
 */

.xmafia-vip-bonus-overlay {
    position: fixed;
    inset: 0;

    z-index: 30000;

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

    overflow: hidden;

    background:
        rgba(0, 0, 0, 0.35);
}


.xmafia-vip-bonus-panel {
    position: relative;

    width: 820px;
    height: 660px;

    flex: 0 0 820px;

    transform-origin:
        center center;
}


.xmafia-vip-bonus-image {
    position: absolute;

    left: 0;
    top: 0;

    width: 820px;
    height: 660px;

    pointer-events: none;
    user-select: none;
}


.xmafia-vip-bonus-hit {
    position: absolute;

    z-index: 5;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    cursor: pointer;
}


.xmafia-daily-bonus-selected {
    position: absolute;

    width: 92px;
    height: 92px;

    z-index: 4;

    pointer-events: none;
}


/*
 * Do not invent replacement visual artwork for frame 2.
 * Selection remains semantic until its exact child-frame raster
 * is exported.
 */
.xmafia-daily-bonus-selected::after {
    content: "";

    position: absolute;
    inset: 0;

    border:
        1px solid
        rgba(255,255,255,.01);
}


@media (max-width: 820px) {

    .xmafia-vip-bonus-panel {
        transform:
            scale(
                calc(100vw / 820)
            );
    }
}


@media (max-height: 660px) {

    .xmafia-vip-bonus-panel {
        transform:
            scale(
                calc(100vh / 660)
            );
    }
}


/* ============================================================
   xMAFIA R3.64 — Original VIPConfig interaction
   ============================================================ */


.xmafia-vip-checkbox {
    position: absolute;

    z-index: 12;

    width: 20px;
    height: 20px;

    margin: 0;
    padding: 0;

    border: 0;

    background:
        transparent
        center center /
        20px 20px
        no-repeat;

    cursor: pointer;
}


.xmafia-vip-color-trigger {
    position: absolute;

    z-index: 15;

    width: 27px;
    height: 27px;

    margin: 0;
    padding: 0;

    border: 0;

    cursor: pointer;
}


.xmafia-vip-palette {
    position: absolute;

    z-index: 60;

    display: grid;

    grid-template-columns:
        repeat(3, 30px);

    padding: 5px;

    gap: 0;

    background:
        rgba(0, 0, 0, 0.9);
}


.xmafia-vip-palette button {
    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    border: 0;

    cursor: pointer;
}


.xmafia-vip-status-text {
    position: absolute;

    z-index: 10;

    transform:
        translateX(-50%);

    white-space:
        nowrap;

    pointer-events:
        none;

    font-family:
        Arial,
        sans-serif;

    font-size:
        13px;

    line-height:
        16px;

    color:
        #ffffff;
}


.xmafia-vip-avatar-upload {
    z-index: 20;
}

/* XMAFIA_R62_VIP_CLOSE */

.xmafia-vip-bonus-panel {
    isolation: isolate;
}

.xmafia-vip-semantic-close {
    position: absolute;

    right: 8px;
    top: 8px;

    width: 28px;
    height: 28px;

    z-index: 900;

    border: 0;
    background: transparent;

    cursor: pointer;
}

body[data-xmafia-ui="qa"]
.xmafia-vip-semantic-close {
    background: #632323 !important;
    border: 2px solid #ff6c6c !important;
}

body[data-xmafia-ui="qa"]
.xmafia-vip-semantic-close::after {
    content: "X";

    color: white;
    font-weight: bold;
}