.modal { position: absolute; top: 100%; right: calc(50% - 30px); text-align: center; text-align-last: center; overflow: hidden; transition: all .7s ease; }
.shortcuts .modal { text-align: right; text-align-last: right; }

.card { width: max-content; max-width: 320px; padding: 24px 24px 12px; background-color: #fff; border-radius: 12px; text-align: center; text-align-last: center; }
.modal.dark .card, .card.dark { background-color: #bf919b; }
.card > *:first-child { margin-top: 0; padding-top: 0; }

.modal h1 { font-size: calc(1.5em + 2.25rem); }
.modal h2 { font-size: calc(1.25em + 1.75rem); }
.modal h3 { font-size: calc(1em + 1.25rem); }

.modal::before { content: ""; display: inline-block; height: 0; width: 0; margin: 0 20px -10px 20px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid #fff; }
.modal.dark::before { border-bottom: 24px solid #bf919b; }

.dark:not(.modal):not(.claim) { background-color: #bf919b; }