/*
 * Vignette de carte. La maquette n'a pas d'image : elle dessine un dégradé.
 * En production l'image du CDN prime, le dégradé ne sert que de repli (imageStatus != valid).
 * La couleur de bordure porte la rareté, doublée d'un libellé accessible dans le template.
 */
.rb-thumb {
    --rb-thumb-border: var(--rb-border-muted);

    position: relative;
    display: block;
    flex: none;
    overflow: hidden;
    background-color: var(--rb-bg-inset);
    border: 1px solid var(--rb-thumb-border);
    border-radius: var(--rb-radius-sm);
}

.rb-thumb__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rb-thumb--placeholder {
    background: linear-gradient(155deg, var(--rb-bg-surface-alt) 0%, var(--rb-bg-panel) 100%);
}

.rb-thumb--common { --rb-thumb-border: var(--rb-rarity-common); }
.rb-thumb--uncommon { --rb-thumb-border: var(--rb-rarity-uncommon); }
.rb-thumb--rare { --rb-thumb-border: var(--rb-rarity-rare); }
.rb-thumb--legendary { --rb-thumb-border: var(--rb-rarity-legendary); }
.rb-thumb--champion { --rb-thumb-border: var(--rb-rarity-champion); }

/* Tailles issues des contextes de la maquette (spec design §6). */
.rb-thumb--xs { width: 16px; height: 22px; border-radius: 3px; }
.rb-thumb--sm { width: 30px; height: 41px; }
.rb-thumb--md { width: 32px; height: 44px; }
.rb-thumb--lg { width: 64px; height: 88px; border-radius: 6px; }
.rb-thumb--xl { width: 84px; height: 116px; border-radius: 7px; }