/* ============================================================
 * rewards.css — Rewards Shop page (/rewards)
 * First-pass layout; meant to be "spruced up" with SD's input.
 * ============================================================ */

.mm-rewards-hero {
    text-align: center;
    margin: 8px auto 26px;
    max-width: 680px;
}
.mm-rewards-title { font-size: 2rem; margin: 0 0 6px; }
.mm-rewards-subtitle { color: var(--mm-text-muted, #9aa3c0); margin: 0 0 16px; }

/* Token balance pill */
.mm-rewards-balance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(246, 201, 74, .16), rgba(246, 201, 74, .05));
    border: 1px solid rgba(246, 201, 74, .35);
    font-weight: 700;
    color: #f6c94a;
}
.mm-rewards-balance .mm-rewards-balance-num { font-size: 1.15rem; }
.mm-rewards-balance .mm-token-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe39a, #e0a92a);
    box-shadow: 0 0 8px rgba(246, 201, 74, .6);
}

/* Section heading per reward type */
.mm-rewards-section-title {
    font-size: 1.15rem;
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Card grid */
.mm-rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.mm-reward-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    padding: 16px 16px 14px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mm-reward-card:hover {
    transform: translateY(-3px);
    border-color: rgba(246, 201, 74, .35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.mm-reward-card.is-owned { border-color: rgba(95, 224, 255, .3); }

/* The "shiny platter" the preview sits on */
.mm-reward-platter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    margin-bottom: 12px;
    border-radius: 12px;
    background:
        radial-gradient(120% 80% at 50% 18%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18));
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
}
.mm-reward-platter::after {
    /* soft elliptical glow under the item, like a lit display platter */
    content: "";
    position: absolute;
    bottom: 8px; left: 50%;
    width: 70%; height: 16px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(246, 201, 74, .35), rgba(246, 201, 74, 0) 70%);
    filter: blur(2px);
}
.mm-reward-preview-name {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    font-weight: 800;
}
.mm-reward-preview-name .mm-user-title { font-size: .62em; }

.mm-reward-name { font-weight: 700; margin: 0 0 2px; }
.mm-reward-desc { font-size: .85rem; color: var(--mm-text-muted, #9aa3c0); margin: 0 0 12px; flex: 1; }

.mm-reward-cost {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; color: #f6c94a; margin-bottom: 10px;
}
.mm-reward-cost .mm-token-dot { width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe39a, #e0a92a); }

.mm-reward-actions { display: flex; gap: 8px; }
.mm-reward-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #e8ecfb;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.mm-reward-btn:hover { background: rgba(255, 255, 255, .12); }
.mm-reward-btn-buy { background: linear-gradient(135deg, #f6c94a, #e0a92a); color: #1a1726; border-color: transparent; }
.mm-reward-btn-buy:hover { filter: brightness(1.05); }
.mm-reward-btn-equipped { background: rgba(95, 224, 255, .18); border-color: rgba(95, 224, 255, .45); color: #bdeeff; cursor: default; }
.mm-reward-btn[disabled] { opacity: .5; cursor: not-allowed; }

.mm-reward-status { font-size: .78rem; color: var(--mm-text-muted, #9aa3c0); margin-top: 8px; min-height: 1em; text-align: center; }

.mm-rewards-guestnote { text-align: center; margin: 18px 0; color: var(--mm-text-muted, #9aa3c0); }

/* ── Double XP boost section ── */
.mm-boost-banner {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    color: var(--mm-text-muted, #9aa3c0);
    text-align: center;
}
.mm-boost-banner.is-active {
    background: linear-gradient(135deg, rgba(150, 255, 40, .14), rgba(95, 224, 255, .10));
    border-color: rgba(150, 255, 40, .40);
    color: #dff7c8;
}
.mm-boost-banner strong { color: #fff; }
.mm-boost-platter {
    background:
        radial-gradient(120% 80% at 50% 18%, rgba(150, 255, 40, .22), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18));
}
.mm-boost-icon {
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
    filter: drop-shadow(0 0 8px rgba(150, 255, 40, .7));
}

/* ── Preview helpers for the new cosmetic types ── */
.mm-reward-preview-avatar {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
}
.mm-reward-preview-glow {
    position: relative;
    z-index: 1;
    font-size: .92rem;
    font-weight: 600;
    color: #e8ecfb;
    max-width: 90%;
}

/* ── Mystery Box section ── */
.mm-box-card:hover { border-color: rgba(200, 130, 255, .4); }
.mm-box-platter {
    background:
        radial-gradient(120% 80% at 50% 18%, rgba(200, 130, 255, .22), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18));
}
.mm-box-icon {
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
    filter: drop-shadow(0 0 8px rgba(200, 130, 255, .7));
    animation: mm-box-bob 2.4s ease-in-out infinite;
}
@keyframes mm-box-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-4px) rotate(3deg); }
}
/* After a box is opened, the platter shows the won cosmetic with a pop. */
.mm-box-platter.mm-box-revealed {
    background:
        radial-gradient(120% 80% at 50% 18%, rgba(246, 201, 74, .26), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18));
    animation: mm-box-pop .45s ease;
}
@keyframes mm-box-pop {
    0%   { transform: scale(.8); opacity: .2; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}