/* A Special card somebody was just given, turned over above the page (special-gift.js):
   under the reveal's own layer, over everything else. */
.special-gift {
    position: fixed; inset: 0; z-index: 20500;
    display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px;
    background: radial-gradient(ellipse at center, rgb(4 26 25 / .78), rgb(1 6 6 / .92) 70%);
    animation: special-gift-in .3s ease-out both;
}
.special-gift[hidden] { display: none; }
@keyframes special-gift-in { from { opacity: 0; } }
.special-gift__card { width: min(300px, 72vw, calc((100dvh - 150px) * 4 / 7)); }
.special-gift__card > .trading-card, .special-gift__card > .card-preview-button > .trading-card { width: 100%; margin: 0; }
.special-gift__card > .card-preview-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; text-decoration: none; }
.special-gift__close[hidden] { display: none; }

/* A Special card face down: a lock with nothing to say about what it keeps. */
.special-card-back {
    box-sizing: border-box; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 7;
    border: 3px solid #0d4a45; border-radius: 11px;
    background:
        radial-gradient(circle at 50% 46%, rgb(127 245 230 / .22), transparent 38%),
        repeating-radial-gradient(circle at 50% 46%, transparent 0 14px, rgb(127 245 230 / .07) 14px 15px),
        linear-gradient(165deg, #0c3f3a, #031514 70%);
    box-shadow: 0 0 0 1px #000, 0 26px 60px rgb(0 0 0 / .6);
}
.special-card-back svg { width: 20%; overflow: visible; filter: drop-shadow(0 0 10px rgb(127 245 230 / .55)); }
.special-card-back path { fill: #010a0a; stroke: #7ff5e6; stroke-width: 1.5; }