.coin-store {
    max-width: 720px;
}
.coin-store p,
.coin-terms {
    line-height: 1.6;
}
.coin-store a,
.coin-store-link {
    color: #dec1ff;
}
/* Paid Shop cards match the other shop cards; previews are piles of the pixel coin. */
.paid-preview {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 6px auto;
    border: 2px solid #ffffff55;
    border-radius: 5px;
    background: radial-gradient(circle at 50% 62%, #4a3510, #0b0816 72%);
    box-shadow: 0 10px 20px #0005;
    overflow: hidden;
}
.paid-preview img {
    position: absolute;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}
/* Later coins sit on top, so each pile is listed bottom row first. */
.coin-pile-3 img:nth-child(1) {
    left: 16px;
    top: 54px;
}
.coin-pile-3 img:nth-child(2) {
    left: 48px;
    top: 54px;
}
.coin-pile-3 img:nth-child(3) {
    left: 32px;
    top: 28px;
}
.coin-pile-6 img:nth-child(1) {
    left: 6px;
    top: 60px;
}
.coin-pile-6 img:nth-child(2) {
    left: 32px;
    top: 60px;
}
.coin-pile-6 img:nth-child(3) {
    left: 58px;
    top: 60px;
}
.coin-pile-6 img:nth-child(4) {
    left: 19px;
    top: 36px;
}
.coin-pile-6 img:nth-child(5) {
    left: 45px;
    top: 36px;
}
.coin-pile-6 img:nth-child(6) {
    left: 32px;
    top: 12px;
}
.paid-preview.is-premium {
    background: radial-gradient(circle at 50% 58%, #4b2a6b, #0b0816 72%);
}
.paid-preview.is-premium img {
    left: 16px;
    top: 14px;
    width: 64px;
    height: 64px;
}
.coin-checkout-pack {
    font-size: 1.15rem;
}
.coin-checkout-pack strong {
    color: var(--reward);
}
#coinCheckoutButton:not([hidden]) {
    display: block;
    margin: 12px 0 4px;
}
.coin-store-button {
    background: #8f4fc0;
    color: white;
    border: 1px solid #c69be5;
    border-radius: 9px;
    padding: 12px 18px;
    font: inherit;
    cursor: pointer;
}
.coin-store-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* App stores require their own billing for digital goods, so the phone apps show no paid items. */
.coin-store-button[hidden],
.native-app #paidShop,
.native-app #openCoinStore,
.native-app #coinStoreDialog {
    display: none;
}
.coin-store-button:focus-visible,
.coin-store-link:focus-visible {
    outline: 3px solid #fde68a;
    outline-offset: 3px;
}
.coin-store-notice {
    border-left: 3px solid #fde68a;
    padding: 10px 16px;
    background: #2b2334;
}
.coin-terms {
    display: block;
    margin: 20px 0;
}
.coin-terms input {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.coin-store-link {
    background: none;
    border: 0;
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
    padding: 8px 0;
}
.coin-history-item {
    border-top: 1px solid #503562;
    padding: 12px 0;
    overflow-wrap: anywhere;
}
.coin-history-item p {
    margin: 4px 0;
}
@media (max-width: 520px) {
    .coin-store {
        padding: 20px;
    }
}
.payment-policy {
    max-width: 760px;
    margin: 40px auto;
    padding: 24px;
    color: #f5f0ff;
    background: #141021;
    font:
        17px/1.7 system-ui,
        sans-serif;
}
.payment-policy a {
    color: #dec1ff;
}
html:has(.payment-policy) {
    background: #141021;
}