/* Keep the card centered without blocking the surrounding page. */
.member-scratch-card {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: #00000026;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.member-scratch-card iframe {
    display: block;
    width: 340px;
    height: 330px;
    max-width: 100%;
    border: 0;
    background: transparent;
    pointer-events: auto;
}

.scratch-card-frame,
.scratch-card-frame body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
}

.scratch-card-frame .scratch-container {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100%;
    user-select: none;
}

.scratch-card-frame .scratchpad {
    width: 250px;
    height: 225px;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #030704, 0 2px 5px #000b;
}

/* A beveled rim and layered lower edge lift the card off the page. */
.scratch-card-frame .scratch-card-shell {
    position: relative;
    padding: 10px;
    border: 1px solid #a9d59a80;
    border-radius: 15px;
    background: linear-gradient(145deg, #64775b 0%, #2a3d2d 20%, #111e16 50%, #09110c 78%, #354c34 100%);
    box-shadow:
        inset 1px 1px 0 #e1ffd175,
        inset -1px -1px 0 #000b,
        0 2px 0 #142519,
        0 5px 0 #0b160f,
        0 6px 0 #46613d,
        0 9px 0 #050c08,
        0 18px 25px #000b,
        0 0 28px #44d62c18;
}

.scratch-card-frame .scratch-card-shell::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid #b8e5a326;
    border-radius: 11px;
    box-shadow: inset 0 1px 4px #0009;
    pointer-events: none;
}