/* Connect More - shop storefront (FEAT-0020). This page is the SHOWROOM only:
   it previews the catalogue and deep-links every BUY button to the matching
   product page on shop.connectmore.online (the wesell-hosted Shopify-style
   checkout that owns money + licence minting). We never take a card here - after
   buying, the player redeems the licence key (box at the top, or the in-game
   Locker). Palette + fonts inherit from style.css; swatch previews reuse the
   .cm-swatch chips from cosmetics.css. */

:root {
    --shop-line: rgba(255, 255, 255, 0.18);
}

body {
    background:
        radial-gradient(circle at 100% 12%, rgba(77, 166, 255, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 0% 60%, rgba(255, 71, 87, 0.12) 0%, transparent 42%),
        linear-gradient(180deg, #101725 0%, #0c0e17 55%, #08080c 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

.shop-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem clamp(1rem, 4vw, 2.4rem);
    border-bottom: 1px solid var(--shop-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}
.shop-head .logo { margin-right: auto; font-size: clamp(1.3rem, 4vw, 1.8rem); line-height: 1; font-weight: 400; }
.shop-head .logo a { text-decoration: none; }
.shop-head .logo .wm-a { font-family: 'Bungee', 'Arial Black', sans-serif; color: var(--sky, #4da6ff); text-shadow: 0 0 16px rgba(77, 166, 255, 0.5); }
.shop-head .logo .wm-b { font-family: 'Titan One', 'Arial Black', sans-serif; color: var(--corn, #ffd23f); text-shadow: 0 0 16px rgba(255, 210, 63, 0.4), 2px 2px 0 #ff4757; }
.shop-nav { display: flex; gap: 0.8rem; }
.shop-nav a {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid var(--shop-line);
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.shop-nav a:hover { border-color: rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.1); }

.shop-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(1.4rem, 4vw, 3rem) clamp(1rem, 4vw, 2.4rem) 3rem;
    color: #fff;
}

.shop-hero { text-align: center; margin-bottom: 2.4rem; }
.shop-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--lime, #4dffb0);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.shop-title {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-size: clamp(2rem, 6vw, 3.2rem);
    line-height: 1.05;
    color: var(--corn, #ffd23f);
    text-shadow: 0 0 20px rgba(255, 210, 63, 0.4), 3px 3px 0 #a3112c;
}
.shop-sub {
    max-width: 640px;
    margin: 0.8rem auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 1.5;
}

.shop-redeem-bar {
    display: flex;
    gap: 0.5rem;
    max-width: 460px;
    margin: 1.6rem auto 0;
}
.shop-redeem-bar input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    border: 2px solid var(--shop-line);
    background: rgba(12, 16, 26, 0.8);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}
.shop-redeem-bar input::placeholder { color: rgba(255, 255, 255, 0.5); }
.shop-redeem-btn {
    flex: 0 0 auto;
    padding: 0.7rem 1.4rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #06280f;
    background: linear-gradient(180deg, #6bffb0 0%, #23d18a 100%);
    box-shadow: 0 6px 16px rgba(35, 209, 138, 0.3);
    transition: filter 0.12s ease, transform 0.07s ease;
}
.shop-redeem-btn:hover { filter: brightness(1.06); }
.shop-redeem-btn:active { transform: translateY(2px); }
.shop-redeem-btn:disabled { opacity: 0.6; cursor: default; }
.shop-redeem-msg { min-height: 1.2em; margin-top: 0.6rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); }
.shop-redeem-msg.ok { color: var(--lime, #4dffb0); }
.shop-redeem-msg.err { color: #ff6b7a; }

.shop-badges { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; min-height: 1.4rem; }

.shop-section { margin-top: 2.4rem; }
.shop-section-title {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-size: clamp(1.2rem, 3.4vw, 1.6rem);
    color: var(--sky, #4da6ff);
    text-shadow: 0 0 14px rgba(77, 166, 255, 0.4);
    margin-bottom: 1rem;
}
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
}

.shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding: 1.3rem 1.1rem 1.2rem;
    border-radius: 18px;
    border: 1px solid var(--shop-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 55%),
        rgba(18, 24, 38, 0.65);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.shop-card:hover { transform: translateY(-3px); border-color: rgba(255, 210, 63, 0.4); }

/* Big preview: reuse the .cm-swatch chip look at a larger size. */
.shop-preview {
    width: 88px;
    height: 88px;
    border: 3px solid rgba(255, 255, 255, 0.25);
}
.shop-preview.cm-swatch:hover { transform: none; }
.shop-preview.board { border-radius: 16px; }

.shop-card-name { font-weight: 800; font-size: 1.05rem; color: #fff; }
.shop-card-price { font-family: 'Titan One', 'Arial Black', sans-serif; font-size: 1.3rem; color: var(--corn, #ffd23f); }
.shop-card-blurb { font-size: 0.84rem; color: rgba(255, 255, 255, 0.72); line-height: 1.4; flex: 1 1 auto; }

.shop-buy {
    display: inline-block;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2a1600;
    background: linear-gradient(180deg, #ffe486 0%, #ffd23f 100%);
    box-shadow: 0 6px 16px rgba(255, 210, 63, 0.28);
    transition: filter 0.12s ease, transform 0.07s ease;
}
.shop-buy:hover { filter: brightness(1.06); }
.shop-buy:active { transform: translateY(2px); }

/* Owned state: the card shows an OWNED chip instead of a buy button. */
.shop-owned {
    display: inline-block;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    text-align: center;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lime, #4dffb0);
    background: rgba(77, 255, 176, 0.12);
    border: 1px solid rgba(77, 255, 176, 0.4);
}
.shop-owned-tag {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    color: #06280f;
    background: linear-gradient(180deg, #6bffb0 0%, #23d18a 100%);
}

.shop-fineprint {
    max-width: 720px;
    margin: 2.6rem auto 0;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}
.shop-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 0.6rem; }