/* Connect More - cosmetics (FEAT-0020, GDD v2 s10). The ONLY place the look of
   a coconut skin / board theme lives; js/cosmetics.js toggles data-skin /
   data-theme on #board (or a swatch) after checking ownership.
   - A coconut skin restyles only YOUR coconuts (#board[data-mine] says which
     piece class is yours) and keeps the whole / half shape: it is a filter +
     glow over the real coconut art, so the two sides are always told apart.
   - A board theme tints the bamboo board's backing.
   Unowned / lapsed = no attribute = the plain coconuts and bamboo. */

/* ============================ COCONUT ART ============================ */
/* Coconut art, shared by the board pieces and the VS bar faces. WHOLE: hairy
   brown shell with the three "eyes". HALF: the cut face (cream hollow, white
   flesh, thin seam, thick brown shell rim). */
:root {
    --coco-whole:
        radial-gradient(circle at 34% 26%, rgba(255, 236, 200, 0.55) 0%, rgba(255, 236, 200, 0) 26%),
        radial-gradient(circle at 41% 30%, #2a1606 0 5%, transparent 6.5%),
        radial-gradient(circle at 55% 27%, #2a1606 0 5%, transparent 6.5%),
        radial-gradient(circle at 48% 39%, #2a1606 0 5%, transparent 6.5%),
        repeating-conic-gradient(from 8deg at 50% 50%, rgba(0, 0, 0, 0.14) 0deg 3deg, rgba(255, 220, 170, 0.06) 3deg 8deg),
        radial-gradient(circle at 50% 56%, #a8743f 0%, #7d5027 55%, #44270e 100%);
    --coco-half:
        radial-gradient(circle at 40% 36%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 16%),
        radial-gradient(circle at 50% 50%,
            #e2d2a8 0 34%, #fffaf0 36% 54%, #d8c39a 55.5% 57.5%,
            transparent 59%),
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(0, 0, 0, 0.16) 0deg 3deg, rgba(255, 220, 170, 0.07) 3deg 7deg),
        radial-gradient(circle at 50% 50%, #9a6633 0 62%, #6e431c 78%, #3e220b 100%);
    --coco-shade:
        inset 0 -6px 10px rgba(0, 0, 0, 0.45),
        inset 0 3px 5px rgba(255, 225, 180, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.5);
}

/* ============================ COCONUT SKINS ============================ */
/* Glow Coconut - neon cyan glow with a slow pulse. */
#board[data-skin="neon-pulse"][data-mine="crimson"] .disc.crimson,
#board[data-skin="neon-pulse"][data-mine="gold"] .disc.gold,
.cm-swatch.skin-neon-pulse {
    filter: saturate(1.6) hue-rotate(155deg) brightness(1.2);
    box-shadow: var(--coco-shade), 0 0 14px rgba(56, 213, 255, 0.85);
    animation: cm-glow-pulse 1.8s ease-in-out infinite;
}
/* Lava Husk - molten orange glow through the husk. */
#board[data-skin="molten-core"][data-mine="crimson"] .disc.crimson,
#board[data-skin="molten-core"][data-mine="gold"] .disc.gold,
.cm-swatch.skin-molten-core {
    filter: saturate(2) contrast(1.15) brightness(1.1) hue-rotate(-12deg);
    box-shadow: var(--coco-shade), 0 0 16px rgba(255, 110, 20, 0.8), inset 0 0 10px rgba(255, 120, 30, 0.6);
}
/* Frost Coconut - icy blue with a frosted sheen. */
#board[data-skin="frost-shard"][data-mine="crimson"] .disc.crimson,
#board[data-skin="frost-shard"][data-mine="gold"] .disc.gold,
.cm-swatch.skin-frost-shard {
    filter: grayscale(0.55) brightness(1.4) hue-rotate(185deg) saturate(1.6);
    box-shadow: var(--coco-shade), 0 0 12px rgba(160, 230, 255, 0.85);
}
/* 24K Golden Coconut - solid gold with a bright shine. */
#board[data-skin="24k-gold"][data-mine="crimson"] .disc.crimson,
#board[data-skin="24k-gold"][data-mine="gold"] .disc.gold,
.cm-swatch.skin-24k-gold {
    filter: sepia(1) saturate(3.2) brightness(1.2) hue-rotate(-8deg);
    box-shadow: var(--coco-shade), 0 0 16px rgba(255, 210, 90, 0.85);
}
@keyframes cm-glow-pulse {
    0%, 100% { filter: saturate(1.6) hue-rotate(155deg) brightness(1.15); }
    50% { filter: saturate(1.9) hue-rotate(155deg) brightness(1.45); }
}

/* ============================ BOARD THEMES ============================ */
/* The bamboo lattice stays; the theme tints the board's backing behind it. */
#board[data-theme] { border-radius: 14px; }
#board[data-theme="midnight-arena"] { background: radial-gradient(circle at 50% 30%, rgba(90, 70, 200, 0.55), rgba(20, 14, 52, 0.75)); box-shadow: 0 0 26px rgba(120, 100, 255, 0.35); }
#board[data-theme="sunset-strip"] { background: linear-gradient(180deg, rgba(255, 140, 60, 0.55), rgba(220, 50, 110, 0.6)); box-shadow: 0 0 26px rgba(255, 110, 90, 0.35); }
#board[data-theme="clan-colors"] { background: linear-gradient(135deg, rgba(14, 140, 86, 0.6), rgba(7, 26, 20, 0.75)); box-shadow: 0 0 26px rgba(77, 255, 176, 0.3); }

/* ============================ PICKER + PREVIEW ============================ */

/* Cosmetics card on the play page: a small owned/locked grid of swatches for the
   disc skins and board themes, plus a licence-key redeem row and a Pro/Founder
   badge line. Uses the same glass-card language as play.css. */
#cosmetics-card .cm-group + .cm-group { margin-top: 0.8rem; }
.cm-group-label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
.cm-swatches { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* A swatch is a tappable disc/board chip. Owned swatches are selectable; locked
   ones are dimmed with a small lock and deep-link the shop. */
.cm-swatch {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex: none;
    transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.cm-swatch.board { border-radius: 10px; }
.cm-swatch:hover { transform: translateY(-2px); }
.cm-swatch.selected {
    border-color: var(--corn);
    box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.4), 0 0 12px rgba(255, 210, 63, 0.5);
}
.cm-swatch.locked { cursor: pointer; opacity: 0.5; filter: grayscale(0.5); }
.cm-swatch.locked::after {
    content: '\1F512';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    filter: none;
}
.cm-swatch[title] { }

/* Swatch fills - the plain whole coconut; a skin swatch adds its filter + glow
   above (same rule as the board), board swatches show the backing tint. */
.cm-swatch.default-disc,
.cm-swatch[class*="skin-"] { background: var(--coco-whole); }
.cm-swatch.default-board { background: linear-gradient(180deg, #c9a24a 0%, #8a6a2c 100%); }
.cm-swatch.board-midnight-arena { background: radial-gradient(circle at 50% 30%, #5a46c8, #140e34); }
.cm-swatch.board-sunset-strip { background: linear-gradient(180deg, #ff8c3c 0%, #dc326e 100%); }
.cm-swatch.board-clan-colors { background: linear-gradient(135deg, #0e8c56 0%, #071a14 100%); }

/* Pro / Founder status line + redeem row. */
.cm-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; min-height: 1.2rem; }
.cm-badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid var(--card-line);
}
.cm-badge.pro { color: #06202f; background: linear-gradient(180deg, #ffe486 0%, #ffd23f 100%); border-color: rgba(255, 210, 63, 0.6); }
.cm-badge.founder { color: #fff; background: linear-gradient(180deg, #b34fff 0%, #6a2bff 100%); border-color: rgba(179, 79, 255, 0.6); }

.cm-redeem { display: flex; gap: 0.4rem; align-items: stretch; margin-top: 0.8rem; }
.cm-redeem input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(180deg, #1f3350 0%, #14202f 100%);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.cm-redeem input::placeholder { color: rgba(255, 255, 255, 0.5); }
.cm-redeem button {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    border-width: 14px 18px 18px 16px;
    border-image-source: url('/img/ui/btnbg-green.png');
    color: #06280f;
    font-size: 0.82rem;
    padding: 0.1rem 0.5rem 0.2rem;
}
.cm-redeem-msg { font-size: 0.8rem; margin-top: 0.45rem; min-height: 1.1em; color: var(--text-dim); }
.cm-redeem-msg.ok { color: var(--lime); }
.cm-redeem-msg.err { color: var(--magenta); }
.cm-shop-link {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--sky);
    text-decoration: none;
    font-weight: 700;
}
.cm-shop-link:hover { text-decoration: underline; }