.bingo-shell {
    position: relative;
}

.bingo-promo-panel {
    position: absolute;
    top: 7px;
    right: calc(50% + var(--bingo-board-size) / 2 + 12px);
    width: max(180px, var(--bingo-double-cell-size));
    padding: 9px;
    border: 1px solid rgba(125, 211, 252, .25);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(18, 31, 52, .97), rgba(8, 16, 30, .97));
    box-shadow: var(--site-shadow);
}

.bingo-promo-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 7px;
}

.bingo-promo-heading h2 {
    margin: 0;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

#bingo-promo-count {
    flex: 0 0 auto;
    color: #7dd3fc;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bingo-promo-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.bingo-promo-toggle {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    height: 33px;
    padding: 3px;
    border: 1px solid rgba(100, 116, 139, .4);
    border-radius: 7px;
    background: rgba(2, 6, 23, .5);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.bingo-promo-toggle img {
    width: 100%;
    max-width: 25px;
    height: 25px;
    object-fit: contain;
    pointer-events: none;
}

.bingo-promo-mark {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border: 1px solid #163e35;
    border-radius: 50%;
    background: #0c2926;
    color: #6ee7b7;
    font: 700 10px/1 Arial, sans-serif;
    pointer-events: none;
}

.bingo-promo-toggle.is-excluded {
    border-color: rgba(251, 113, 133, .65);
    background: rgba(136, 19, 55, .18);
}

.bingo-promo-toggle.is-excluded img {
    opacity: .5;
    filter: grayscale(.8);
}

.bingo-promo-toggle.is-excluded .bingo-promo-mark {
    border-color: #7f1d38;
    background: #4c142b;
    color: #fda4af;
    font-size: 13px;
}

.bingo-promo-toggle.is-unavailable {
    border-style: dashed;
}

.bingo-promo-toggle.is-unavailable img {
    opacity: .3;
}

.bingo-promo-toggle:not(:disabled):hover {
    border-color: #7dd3fc;
    background: rgba(14, 165, 233, .14);
}

.bingo-promo-toggle:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 3px;
}

.bingo-promo-toggle:disabled {
    cursor: default;
}

.bingo-promo-panel.is-locked .bingo-promo-toggle {
    opacity: .55;
}

#bingo-promo-hint {
    margin: 7px 0 0;
    color: #94a3b8;
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
}

@media (max-width: 1000px) {
    .bingo-promo-panel {
        position: static;
        width: var(--bingo-board-size);
        margin: 5px auto;
        padding: 8px;
    }

    .bingo-promo-heading {
        margin-bottom: 6px;
    }

    #bingo-promo-hint {
        margin-top: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bingo-promo-toggle {
        transition: none;
    }
}