.points-badge{ background:linear-gradient(135deg,rgba(245,179,1,.16),rgba(245,179,1,.06)); border:1px solid rgba(245,179,1,.3); color:var(--amber); padding:9px 16px; border-radius:12px; font-size:15px; }
.points-badge b{ color:#fff; }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; }
.shop-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; text-align:center; transition:border-color .15s,transform .15s; }
.shop-card:hover{ transform:translateY(-3px); border-color:var(--surface-3); }
.shop-card.equipped{ border-color:var(--green); box-shadow:0 0 0 1px rgba(46,230,166,.3); }
.shop-preview{ height:54px; display:grid; place-items:center; margin-bottom:10px; }
.shop-name{ font-weight:600; font-size:14px; margin-bottom:4px; }
.shop-price{ color:var(--amber); font-weight:700; font-size:13px; margin-bottom:12px; }

/* =========================================================
   SHOP — RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    /* Points badge: allow it to wrap and shrink on tablets */
    .points-badge {
        font-size: 13px;
        padding: 7px 12px;
        word-break: break-word;
    }

    /* 2-column shop grid on tablets */
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Cards: ensure price + button are always visible */
    .shop-card {
        padding: 14px 12px;
    }

    .shop-name {
        font-size: 13px;
    }

    .shop-price {
        font-size: 12px;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    /* Points badge wraps fully on small phones */
    .points-badge {
        font-size: 12px;
        padding: 6px 10px;
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* 2-column shop grid on phones (items are small enough) */
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Very small phones: single column */
    @media (max-width: 360px) {
        .shop-grid {
            grid-template-columns: 1fr;
        }
    }

    .shop-card {
        padding: 12px 10px;
    }

    .shop-preview {
        height: 46px;
        margin-bottom: 8px;
    }

    .shop-name {
        font-size: 12.5px;
    }

    .shop-price {
        font-size: 12px;
        margin-bottom: 8px;
    }
}