.game-popup { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(32, 20, 13, 0.8); backdrop-filter: blur(5px); }
.game-popup-card { position: relative; width: min(480px, 100%); border: 5px solid var(--ink); background: var(--cream); box-shadow: 11px 11px 0 var(--orange); text-align: center; padding: 32px; }
.voucher-ticket { position: relative; overflow: hidden; background: var(--gold); border: 4px dashed var(--ink); padding: 22px; }
.voucher-ticket::before, .voucher-ticket::after { content: ""; position: absolute; top: 50%; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); transform: translateY(-50%); }
.voucher-ticket::before { left: -16px; }.voucher-ticket::after { right: -16px; }
.voucher-logo { width: 122px; height: 92px; object-fit: cover; object-position: 50% 30%; mix-blend-mode: multiply; }
.voucher-ticket p { margin: 0; font: 700 12px "DM Mono", monospace; letter-spacing: .08em; }.voucher-ticket h2 { margin: 10px 0; font: 800 38px/.9 "Space Grotesk", sans-serif; letter-spacing: -.07em; }.voucher-code { display: inline-block; border: 2px solid var(--ink); padding: 7px 10px; background: var(--cream); font: 700 13px "DM Mono", monospace; }
.popup-button { margin-top: 20px; border: 3px solid var(--ink); background: var(--orange); color: #fff8e7; padding: 12px 17px; font: 700 13px "Space Grotesk", sans-serif; text-transform: uppercase; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.explosion-card { overflow: hidden; background: var(--orange); color: #fff8e7; border-color: var(--gold); animation: boom-card .4s ease-out; }.explosion-burst { position: relative; margin: -42px auto 2px; width: 210px; height: 170px; display: grid; place-items: center; color: var(--gold); font-size: 116px; animation: boom-burst .55s cubic-bezier(.1,.7,.2,1); }.explosion-burst::before { content: "✹"; position: absolute; color: var(--ink); font-size: 205px; z-index: -1; }.explosion-card h2 { color: var(--gold); font: 800 40px/.9 "Space Grotesk", sans-serif; letter-spacing: -.07em; margin: 0; text-shadow: 3px 3px 0 var(--ink); }.explosion-card p { font: 700 15px "DM Mono", monospace; margin: 17px 0 0; }@keyframes boom-card { from { transform: scale(.25) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }@keyframes boom-burst { from { transform: scale(.1) rotate(-140deg); } to { transform: scale(1) rotate(0); } }