/* Generated cosmetics: extra tables, card backs and avatar frames.
   Tables set felt colors (and an optional pattern) for #game-screen and the
   shop swatch; card backs define --back; frames style any [data-frame] image. */

body[data-table="forest"] #game-screen,
.swatch-table[data-value="forest"] {
    --felt-1: #2f9e44;
    --felt-2: #1b6b2c;
    --felt-3: #0a2a12;
}

body[data-table="deepsea"] #game-screen,
.swatch-table[data-value="deepsea"] {
    --felt-1: #1c7ea8;
    --felt-2: #0f4c75;
    --felt-3: #041c30;
    --felt-pattern: repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,0.06) 0 3px, transparent 3px 24px);
    --felt-pattern-size: auto;
}

body[data-table="graphite"] #game-screen,
.swatch-table[data-value="graphite"] {
    --felt-1: #5b6472;
    --felt-2: #343b47;
    --felt-3: #12151b;
    --felt-pattern: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px);
    --felt-pattern-size: auto;
}

body[data-table="burgundy"] #game-screen,
.swatch-table[data-value="burgundy"] {
    --felt-1: #8c2340;
    --felt-2: #5a1228;
    --felt-3: #20050e;
    --felt-pattern: repeating-conic-gradient(from 45deg, rgba(255,255,255,0.07) 0 25%, transparent 0 50%);
    --felt-pattern-size: 44px 44px;
}

body[data-table="turquoise"] #game-screen,
.swatch-table[data-value="turquoise"] {
    --felt-1: #14b8a6;
    --felt-2: #0d7d72;
    --felt-3: #043a35;
    --felt-pattern: radial-gradient(circle, rgba(255,255,255,0.1) 0 2px, transparent 3px);
    --felt-pattern-size: 24px 24px;
}

body[data-table="sunset"] #game-screen,
.swatch-table[data-value="sunset"] {
    --felt-1: #e8743b;
    --felt-2: #b23a48;
    --felt-3: #3d0f2a;
    --felt-pattern: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.05) 0 6deg, transparent 6deg 12deg);
    --felt-pattern-size: auto;
}

body[data-table="sakura"] #game-screen,
.swatch-table[data-value="sakura"] {
    --felt-1: #e879a8;
    --felt-2: #a83e75;
    --felt-3: #4a1233;
    --felt-pattern: radial-gradient(circle, rgba(255,255,255,0.1) 0 2px, transparent 3px);
    --felt-pattern-size: 24px 24px;
}

body[data-table="arctic"] #game-screen,
.swatch-table[data-value="arctic"] {
    --felt-1: #7dd3fc;
    --felt-2: #3b82b6;
    --felt-3: #123a5e;
    --felt-pattern: repeating-conic-gradient(rgba(255,255,255,0.06) 0 25%, transparent 0 50%);
    --felt-pattern-size: 56px 56px;
}

body[data-table="desert"] #game-screen,
.swatch-table[data-value="desert"] {
    --felt-1: #d4a55a;
    --felt-2: #9a6b2c;
    --felt-3: #3f2610;
    --felt-pattern: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 14px, transparent 14px 28px);
    --felt-pattern-size: auto;
}

body[data-table="espresso"] #game-screen,
.swatch-table[data-value="espresso"] {
    --felt-1: #7a4a2b;
    --felt-2: #4a2a16;
    --felt-3: #1a0d06;
    --felt-pattern: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px);
    --felt-pattern-size: auto;
}

body[data-table="neongrid"] #game-screen,
.swatch-table[data-value="neongrid"] {
    --felt-1: #0f1f3a;
    --felt-2: #0a1226;
    --felt-3: #03060f;
    --felt-edge: rgba(34,255,209,0.6);
    --felt-pattern: repeating-linear-gradient(90deg, rgba(34,255,209,0.1) 0 1px, transparent 1px 32px);
    --felt-pattern-size: auto;
}

body[data-table="aurora"] #game-screen,
.swatch-table[data-value="aurora"] {
    --felt-1: #10b981;
    --felt-2: #0e5f7a;
    --felt-3: #1b1147;
    --felt-pattern: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.05) 0 6deg, transparent 6deg 12deg);
    --felt-pattern-size: auto;
}

body[data-table="lava"] #game-screen,
.swatch-table[data-value="lava"] {
    --felt-1: #ef4444;
    --felt-2: #9a1d12;
    --felt-3: #2b0704;
    --felt-edge: rgba(251,146,60,0.6);
    --felt-pattern: repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,0.06) 0 3px, transparent 3px 24px);
    --felt-pattern-size: auto;
}

body[data-table="zen"] #game-screen,
.swatch-table[data-value="zen"] {
    --felt-1: #a3b18a;
    --felt-2: #6b7d5a;
    --felt-3: #28321f;
    --felt-pattern: repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,0.06) 0 3px, transparent 3px 24px);
    --felt-pattern-size: auto;
}

body[data-table="vegas"] #game-screen,
.swatch-table[data-value="vegas"] {
    --felt-1: #b91c1c;
    --felt-2: #7f1010;
    --felt-3: #1c0303;
    --felt-edge: rgba(245,196,81,0.6);
    --felt-pattern: repeating-conic-gradient(from 45deg, rgba(255,255,255,0.07) 0 25%, transparent 0 50%);
    --felt-pattern-size: 44px 44px;
}

body[data-table="crystalice"] #game-screen,
.swatch-table[data-value="crystalice"] {
    --felt-1: #a5f3fc;
    --felt-2: #38a3c9;
    --felt-3: #0b2f4a;
    --felt-pattern: repeating-conic-gradient(rgba(255,255,255,0.06) 0 25%, transparent 0 50%);
    --felt-pattern-size: 56px 56px;
}

body[data-table="cosmos"] #game-screen,
.swatch-table[data-value="cosmos"] {
    --felt-1: #4c1d95;
    --felt-2: #1e1b4b;
    --felt-3: #050314;
    --felt-pattern: radial-gradient(circle, rgba(255,255,255,0.55) 0 1px, transparent 1.6px);
    --felt-pattern-size: 61px 47px;
}

body[data-table="dragon"] #game-screen,
.swatch-table[data-value="dragon"] {
    --felt-1: #dc2626;
    --felt-2: #7c1414;
    --felt-3: #180404;
    --felt-edge: rgba(245,196,81,0.6);
    --felt-pattern: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.05) 0 6deg, transparent 6deg 12deg);
    --felt-pattern-size: auto;
}

body[data-table="royalemerald"] #game-screen,
.swatch-table[data-value="royalemerald"] {
    --felt-1: #059669;
    --felt-2: #065f46;
    --felt-3: #022c22;
    --felt-edge: rgba(245,196,81,0.6);
    --felt-pattern: repeating-conic-gradient(from 45deg, rgba(255,255,255,0.07) 0 25%, transparent 0 50%);
    --felt-pattern-size: 44px 44px;
}

body[data-table="obsidian"] #game-screen,
.swatch-table[data-value="obsidian"] {
    --felt-1: #27272f;
    --felt-2: #131318;
    --felt-3: #000000;
    --felt-edge: rgba(167,139,250,0.55);
    --felt-pattern: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 14px, transparent 14px 28px);
    --felt-pattern-size: auto;
}

.swatch-table {
    background:
        var(--felt-pattern, linear-gradient(transparent, transparent)) 0 0 / var(--felt-pattern-size, auto),
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 255, 255, 0.1), transparent 70%),
        radial-gradient(ellipse at 50% 50%, var(--felt-1), var(--felt-2) 55%, var(--felt-3));
}

/* Montana logo just left of the card in play, on every table except the plain
   ones. It hangs off the slot, not the card, so it stays put on the felt while
   each new card slides out of the deck. */
.current-card-slot {
    position: relative;
    width: fit-content;
    margin-inline: auto;
}

.current-card-slot::before {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    display: block;
    height: 62%;
    aspect-ratio: 1;
    background: url("../images/iconomon.webp") center / contain no-repeat;
    content: '';
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
    opacity: 0.92;
    pointer-events: none;
    transform: translateY(-50%);
}

body[data-table="classic"] .current-card-slot::before,
body[data-table="graphite"] .current-card-slot::before,
body[data-table="arctic"] .current-card-slot::before,
body[data-table="zen"] .current-card-slot::before,
body[data-table="obsidian"] .current-card-slot::before {
    display: none;
}

body[data-card-back="charcoal"] {
    --back: repeating-conic-gradient(rgba(255,255,255,0.07) 0 25%, transparent 0 50%) 0 0 / 14px 14px, linear-gradient(160deg, #4b5563, #1f2937 70%, #0b0f17);
}

.swatch-back[data-value="charcoal"] {
    background: repeating-conic-gradient(rgba(255,255,255,0.07) 0 25%, transparent 0 50%) 0 0 / 14px 14px, linear-gradient(160deg, #4b5563, #1f2937 70%, #0b0f17);
}

body[data-card-back="grape"] {
    --back: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 3px, transparent 3px 9px), linear-gradient(150deg, #a855f7, #6b21a8 60%, #3b0764);
}

.swatch-back[data-value="grape"] {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 3px, transparent 3px 9px), linear-gradient(150deg, #a855f7, #6b21a8 60%, #3b0764);
}

body[data-card-back="bubblegum"] {
    --back: radial-gradient(circle, rgba(255,255,255,0.35) 0 2.5px, transparent 3.5px) 0 0 / 12px 12px, linear-gradient(150deg, #f9a8d4, #ec4899 60%, #9d174d);
}

.swatch-back[data-value="bubblegum"] {
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0 2.5px, transparent 3.5px) 0 0 / 12px 12px, linear-gradient(150deg, #f9a8d4, #ec4899 60%, #9d174d);
}

body[data-card-back="mint"] {
    --back: repeating-radial-gradient(circle at 50% 120%, rgba(255,255,255,0.22) 0 2px, transparent 2px 9px), linear-gradient(160deg, #6ee7b7, #14b8a6 60%, #0f766e);
}

.swatch-back[data-value="mint"] {
    background: repeating-radial-gradient(circle at 50% 120%, rgba(255,255,255,0.22) 0 2px, transparent 2px 9px), linear-gradient(160deg, #6ee7b7, #14b8a6 60%, #0f766e);
}

body[data-card-back="sahara"] {
    --back: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.14) 0 8deg, transparent 8deg 16deg), linear-gradient(160deg, #fcd34d, #d97706 65%, #78350f);
}

.swatch-back[data-value="sahara"] {
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.14) 0 8deg, transparent 8deg 16deg), linear-gradient(160deg, #fcd34d, #d97706 65%, #78350f);
}

body[data-card-back="casinored"] {
    --back: repeating-conic-gradient(from 45deg, rgba(255,255,255,0.12) 0 25%, transparent 0 50%) 0 0 / 18px 18px, linear-gradient(150deg, #ef4444, #b91c1c 60%, #7f1d1d);
}

.swatch-back[data-value="casinored"] {
    background: repeating-conic-gradient(from 45deg, rgba(255,255,255,0.12) 0 25%, transparent 0 50%) 0 0 / 18px 18px, linear-gradient(150deg, #ef4444, #b91c1c 60%, #7f1d1d);
}

body[data-card-back="nightstars"] {
    --back: radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 19px 23px, radial-gradient(circle, rgba(255,255,255,0.7) 0 1px, transparent 1.5px) 9px 11px / 29px 31px, linear-gradient(160deg, #312e81, #1e1b4b 65%, #0b0a24);
}

.swatch-back[data-value="nightstars"] {
    background: radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 19px 23px, radial-gradient(circle, rgba(255,255,255,0.7) 0 1px, transparent 1.5px) 9px 11px / 29px 31px, linear-gradient(160deg, #312e81, #1e1b4b 65%, #0b0a24);
}

body[data-card-back="copper"] {
    --back: repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 8px), linear-gradient(140deg, #f59e6b, #c2410c 60%, #7c2d12);
}

.swatch-back[data-value="copper"] {
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 8px), linear-gradient(140deg, #f59e6b, #c2410c 60%, #7c2d12);
}

body[data-card-back="ivory"] {
    --back: repeating-linear-gradient(45deg, rgba(120,90,40,0.16) 0 2px, transparent 2px 7px), linear-gradient(150deg, #fffbeb, #f3e2b8 60%, #d6b97a);
}

.swatch-back[data-value="ivory"] {
    background: repeating-linear-gradient(45deg, rgba(120,90,40,0.16) 0 2px, transparent 2px 7px), linear-gradient(150deg, #fffbeb, #f3e2b8 60%, #d6b97a);
}

body[data-card-back="tartan"] {
    --back: repeating-linear-gradient(0deg, rgba(255,255,255,0.14) 0 3px, transparent 3px 12px), repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 6px, transparent 6px 12px), linear-gradient(150deg, #16a34a, #166534 60%, #052e16);
}

.swatch-back[data-value="tartan"] {
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.14) 0 3px, transparent 3px 12px), repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 6px, transparent 6px 12px), linear-gradient(150deg, #16a34a, #166534 60%, #052e16);
}

body[data-card-back="aurora"] {
    --back: radial-gradient(ellipse at 30% 20%, rgba(52,211,153,0.7), transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(167,139,250,0.65), transparent 60%), repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 9px), linear-gradient(170deg, #0f172a, #0b1a2e);
}

.swatch-back[data-value="aurora"] {
    background: radial-gradient(ellipse at 30% 20%, rgba(52,211,153,0.7), transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(167,139,250,0.65), transparent 60%), repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 9px), linear-gradient(170deg, #0f172a, #0b1a2e);
}

body[data-card-back="lava"] {
    --back: radial-gradient(circle at 25% 80%, #fde047 0 8%, transparent 9%), radial-gradient(circle at 70% 60%, #fb923c 0 10%, transparent 11%), radial-gradient(circle at 45% 30%, #f97316 0 7%, transparent 8%), linear-gradient(170deg, #7f1d1d, #1c0a0a 70%, #000);
}

.swatch-back[data-value="lava"] {
    background: radial-gradient(circle at 25% 80%, #fde047 0 8%, transparent 9%), radial-gradient(circle at 70% 60%, #fb923c 0 10%, transparent 11%), radial-gradient(circle at 45% 30%, #f97316 0 7%, transparent 8%), linear-gradient(170deg, #7f1d1d, #1c0a0a 70%, #000);
}

body[data-card-back="cybergrid"] {
    --back: repeating-linear-gradient(0deg, rgba(34,255,209,0.35) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(34,255,209,0.35) 0 1px, transparent 1px 10px), linear-gradient(160deg, #0b1220, #020617);
}

.swatch-back[data-value="cybergrid"] {
    background: repeating-linear-gradient(0deg, rgba(34,255,209,0.35) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(34,255,209,0.35) 0 1px, transparent 1px 10px), linear-gradient(160deg, #0b1220, #020617);
}

body[data-card-back="royalgold"] {
    --back: url(../images/iconomon.webp) center / 55% no-repeat, repeating-conic-gradient(from 45deg, rgba(255,255,255,0.18) 0 25%, transparent 0 50%) 0 0 / 16px 16px, linear-gradient(145deg, #fde68a, #d4a017 55%, #7a4e05);
}

.swatch-back[data-value="royalgold"] {
    background: url(../images/iconomon.webp) center / 55% no-repeat, repeating-conic-gradient(from 45deg, rgba(255,255,255,0.18) 0 25%, transparent 0 50%) 0 0 / 16px 16px, linear-gradient(145deg, #fde68a, #d4a017 55%, #7a4e05);
}

body[data-card-back="crystal"] {
    --back: repeating-conic-gradient(from 30deg at 50% 50%, rgba(255,255,255,0.28) 0 12deg, transparent 12deg 24deg), linear-gradient(150deg, #cffafe, #22d3ee 55%, #0e7490);
}

.swatch-back[data-value="crystal"] {
    background: repeating-conic-gradient(from 30deg at 50% 50%, rgba(255,255,255,0.28) 0 12deg, transparent 12deg 24deg), linear-gradient(150deg, #cffafe, #22d3ee 55%, #0e7490);
}

body[data-card-back="sakuranight"] {
    --back: radial-gradient(circle, rgba(251,207,232,0.85) 0 2px, transparent 3px) 0 0 / 17px 17px, radial-gradient(circle, rgba(251,207,232,0.5) 0 1.5px, transparent 2.5px) 8px 8px / 17px 17px, linear-gradient(160deg, #4a044e, #1e0a2e);
}

.swatch-back[data-value="sakuranight"] {
    background: radial-gradient(circle, rgba(251,207,232,0.85) 0 2px, transparent 3px) 0 0 / 17px 17px, radial-gradient(circle, rgba(251,207,232,0.5) 0 1.5px, transparent 2.5px) 8px 8px / 17px 17px, linear-gradient(160deg, #4a044e, #1e0a2e);
}

body[data-card-back="montanablue"] {
    --back: url(../images/iconomon.webp) center / 56% no-repeat, repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 8px), linear-gradient(140deg, #1d4ed8, #1e3a8a 60%, #0b1740);
}

.swatch-back[data-value="montanablue"] {
    background: url(../images/iconomon.webp) center / 56% no-repeat, repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 8px), linear-gradient(140deg, #1d4ed8, #1e3a8a 60%, #0b1740);
}

body[data-card-back="obsidian"] {
    --back: repeating-linear-gradient(60deg, rgba(167,139,250,0.22) 0 2px, transparent 2px 12px), repeating-linear-gradient(-60deg, rgba(167,139,250,0.14) 0 1px, transparent 1px 12px), linear-gradient(160deg, #18181b, #000);
}

.swatch-back[data-value="obsidian"] {
    background: repeating-linear-gradient(60deg, rgba(167,139,250,0.22) 0 2px, transparent 2px 12px), repeating-linear-gradient(-60deg, rgba(167,139,250,0.14) 0 1px, transparent 1px 12px), linear-gradient(160deg, #18181b, #000);
}

body[data-card-back="holo"] {
    --back: repeating-linear-gradient(135deg, rgba(255,255,255,0.22) 0 2px, transparent 2px 10px), linear-gradient(135deg, #f472b6, #a78bfa 25%, #60a5fa 50%, #34d399 75%, #fde047);
}

.swatch-back[data-value="holo"] {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.22) 0 2px, transparent 2px 10px), linear-gradient(135deg, #f472b6, #a78bfa 25%, #60a5fa 50%, #34d399 75%, #fde047);
}

body[data-card-back="blackgold"] {
    --back: url(../images/iconomon.webp) center / 56% no-repeat, radial-gradient(circle at 50% 50%, rgba(245,196,81,0.25), transparent 65%), repeating-linear-gradient(45deg, rgba(245,196,81,0.16) 0 1px, transparent 1px 8px), linear-gradient(160deg, #1c1917, #000);
}

.swatch-back[data-value="blackgold"] {
    background: url(../images/iconomon.webp) center / 56% no-repeat, radial-gradient(circle at 50% 50%, rgba(245,196,81,0.25), transparent 65%), repeating-linear-gradient(45deg, rgba(245,196,81,0.16) 0 1px, transparent 1px 8px), linear-gradient(160deg, #1c1917, #000);
}

@property --fa {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

:is(img[data-frame="bronze"], img[data-frame="silver"], img[data-frame="platinum"], img[data-frame="emerald"], img[data-frame="ruby"], img[data-frame="sapphire"], img[data-frame="amethyst"], img[data-frame="flames"], img[data-frame="frost"], img[data-frame="neon"], img[data-frame="lightning"], img[data-frame="royalgold"], img[data-frame="aurora"], img[data-frame="rainbow"], img[data-frame="galaxy"], img[data-frame="diamond"]) {
    border-color: var(--fb, transparent);
    box-shadow: 0 0 0 2px var(--f2, transparent), 0 0 10px 3px var(--fg, transparent);
}

.avatar-outside.avatar-tappable:is([data-frame="bronze"], [data-frame="silver"], [data-frame="platinum"], [data-frame="emerald"], [data-frame="ruby"], [data-frame="sapphire"], [data-frame="amethyst"], [data-frame="flames"], [data-frame="frost"], [data-frame="neon"], [data-frame="lightning"], [data-frame="royalgold"], [data-frame="aurora"], [data-frame="rainbow"], [data-frame="galaxy"], [data-frame="diamond"]):hover {
    box-shadow: 0 0 0 2px var(--f2, transparent), 0 0 16px 5px var(--fg, transparent);
}

img[data-frame="bronze"] {
    --fb: #cd7f32;
    --f2: #5c3512;
    --fg: rgba(205,127,50,0.45);
}

img[data-frame="silver"] {
    --fb: #d1d5db;
    --f2: #4b5563;
    --fg: rgba(209,213,219,0.5);
}

img[data-frame="platinum"] {
    --fb: #a5f3fc;
    --f2: #155e75;
    --fg: rgba(103,232,249,0.6);
}

img[data-frame="emerald"] {
    --fb: #34d399;
    --f2: #064e3b;
    --fg: rgba(52,211,153,0.55);
}

img[data-frame="ruby"] {
    --fb: #f87171;
    --f2: #7f1d1d;
    --fg: rgba(248,113,113,0.55);
}

img[data-frame="sapphire"] {
    --fb: #60a5fa;
    --f2: #1e3a8a;
    --fg: rgba(96,165,250,0.55);
}

img[data-frame="amethyst"] {
    --fb: #c084fc;
    --f2: #581c87;
    --fg: rgba(192,132,252,0.55);
}

img[data-frame="flames"] {
    --fb: #fb923c;
    --f2: #7c2d12;
    --fg: rgba(251,146,60,0.7);
}

img[data-frame="frost"] {
    --fb: #bae6fd;
    --f2: #0c4a6e;
    --fg: rgba(125,211,252,0.65);
}

img[data-frame="neon"] {
    --fb: #f0abfc;
    --f2: #701a75;
    --fg: rgba(232,121,249,0.75);
}

img[data-frame="lightning"] {
    --fb: #fde047;
    --f2: #713f12;
    --fg: rgba(253,224,71,0.8);
}

img[data-frame="royalgold"] {
    --fa: 0deg;
    --fb: transparent;
    --f2: transparent;
    --fg: rgba(245,196,81,0.55);
    --fs: 5s;
    --fc: conic-gradient(from var(--fa), #f5c451, #fff3b0, #b7791f, #f5c451, #fff3b0, #b7791f, #f5c451);
    border: 3px solid transparent;
    background: linear-gradient(var(--bg-2, #121b35), var(--bg-2, #121b35)) padding-box, var(--fc) border-box;
}

img[data-frame="aurora"] {
    --fa: 0deg;
    --fb: transparent;
    --f2: transparent;
    --fg: rgba(52,211,153,0.5);
    --fs: 4s;
    --fc: conic-gradient(from var(--fa), #34d399, #22d3ee, #a78bfa, #34d399);
    border: 3px solid transparent;
    background: linear-gradient(var(--bg-2, #121b35), var(--bg-2, #121b35)) padding-box, var(--fc) border-box;
}

img[data-frame="rainbow"] {
    --fa: 0deg;
    --fb: transparent;
    --f2: transparent;
    --fg: rgba(255,255,255,0.35);
    --fs: 3s;
    --fc: conic-gradient(from var(--fa), #ef4444, #f59e0b, #fde047, #22c55e, #3b82f6, #a855f7, #ef4444);
    border: 3px solid transparent;
    background: linear-gradient(var(--bg-2, #121b35), var(--bg-2, #121b35)) padding-box, var(--fc) border-box;
}

img[data-frame="galaxy"] {
    --fa: 0deg;
    --fb: transparent;
    --f2: transparent;
    --fg: rgba(129,140,248,0.65);
    --fs: 7s;
    --fc: conic-gradient(from var(--fa), #1e1b4b, #6366f1, #ec4899, #38bdf8, #1e1b4b);
    border: 3px solid transparent;
    background: linear-gradient(var(--bg-2, #121b35), var(--bg-2, #121b35)) padding-box, var(--fc) border-box;
}

img[data-frame="diamond"] {
    --fa: 0deg;
    --fb: transparent;
    --f2: transparent;
    --fg: rgba(165,243,252,0.8);
    --fs: 2.5s;
    --fc: conic-gradient(from var(--fa), #ffffff, #67e8f9, #c4b5fd, #ffffff, #67e8f9, #c4b5fd, #ffffff);
    border: 3px solid transparent;
    background: linear-gradient(var(--bg-2, #121b35), var(--bg-2, #121b35)) padding-box, var(--fc) border-box;
}

/* Motion never fights the throw effects, which animate the same avatars. */
img[data-frame="royalgold"]:not([class*="fx-"]):not(.projectile-hit),
img[data-frame="aurora"]:not([class*="fx-"]):not(.projectile-hit),
img[data-frame="rainbow"]:not([class*="fx-"]):not(.projectile-hit),
img[data-frame="galaxy"]:not([class*="fx-"]):not(.projectile-hit),
img[data-frame="diamond"]:not([class*="fx-"]):not(.projectile-hit) {
    animation: frame-spin var(--fs, 4s) linear infinite;
}

img[data-frame="platinum"]:not([class*="fx-"]):not(.projectile-hit),
img[data-frame="frost"]:not([class*="fx-"]):not(.projectile-hit),
img[data-frame="neon"]:not([class*="fx-"]):not(.projectile-hit) {
    animation: frame-pulse 2.4s ease-in-out infinite;
}

img[data-frame="flames"]:not([class*="fx-"]):not(.projectile-hit),
img[data-frame="lightning"]:not([class*="fx-"]):not(.projectile-hit) {
    animation: frame-flicker 0.9s steps(2, end) infinite alternate;
}

@keyframes frame-spin {
    to { --fa: 360deg; }
}

@keyframes frame-pulse {
    50% { box-shadow: 0 0 0 2px var(--f2), 0 0 18px 6px var(--fg); }
}

@keyframes frame-flicker {
    0% { box-shadow: 0 0 0 2px var(--f2), 0 0 8px 2px var(--fg); }
    100% { box-shadow: 0 0 0 2px var(--f2), 0 0 16px 6px var(--fg); }
}

@media (prefers-reduced-motion: reduce) {
    img[data-frame] { animation: none !important; }
}

/* Shop swatch: a sample avatar wearing the frame. */
.swatch-frame {
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
}

.swatch-frame img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
}

.swatch-frame img:not([data-frame]) {
    border: 2px solid var(--gold);
    background: var(--bg-2);
}

/* Shop avatars: the picture itself, shown the way it looks at the table. */
.swatch-avatar {
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
}

.swatch-avatar img {
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    object-fit: cover;
}

/* Collection heading spanning the whole shop grid. */
.shop-collection {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 10px 14px;
    border-left: 4px solid var(--collection-accent, var(--gold));
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--collection-tint, rgba(245, 196, 81, 0.16)), transparent);
    text-align: left;
}

.shop-collection:first-child { margin-top: 0; }
.shop-collection strong { font-size: 16px; }
.shop-collection small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

.shop-collection-count {
    align-self: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.shop-collection[data-collection="senderismo"] { --collection-accent: #e8a13a; --collection-tint: rgba(232, 161, 58, 0.18); }
.shop-collection[data-collection="campamento"] { --collection-accent: #d9623b; --collection-tint: rgba(217, 98, 59, 0.18); }
.shop-collection[data-collection="montana"] { --collection-accent: #5aa3d6; --collection-tint: rgba(90, 163, 214, 0.18); }
.shop-collection[data-collection="guardabosques"] { --collection-accent: #6f9a4a; --collection-tint: rgba(111, 154, 74, 0.2); }
.shop-collection[data-collection="aventura"] { --collection-accent: #2fa39a; --collection-tint: rgba(47, 163, 154, 0.18); }