/* Cartes de création — partagées par la galerie de l'accueil et la page de
   profil. Les deux montrent la même chose : une vignette, le nom, les pièces
   portées et la palette du costume. Un seul fichier, pour que les deux pages
   ne divergent jamais.

   Chaque carte porte --teinte et --teinte-rvb, la couleur dominante du skin. */

.sf-carte {
    position: relative; overflow: hidden; cursor: pointer; isolation: isolate;
    border: 1px solid rgba(var(--teinte-rvb), .55);
    border-radius: 16px;
    /* Une assise opaque sous la teinte : sans elle, la scene derriere la
       galerie traversait le verre, et la lisiere de son faisceau coupait
       toute la rangee a la meme hauteur. */
    background:
        linear-gradient(180deg, rgba(var(--teinte-rvb), .42) 0%, rgba(var(--teinte-rvb), .14) 52%, rgba(6, 12, 20, .55) 100%),
        #0c1420;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        0 12px 30px rgba(0, 0, 0, .4);
    transition: border-color 170ms ease, box-shadow 170ms ease;
}
/* Reflet oblique fige dans la plaque. */
.sf-carte::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(112deg,
        rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 26%,
        transparent 46%, rgba(255, 255, 255, .06) 82%, transparent 100%);
}
.sf-carte > * { position: relative; z-index: 1; }
/* Pas de soulevement au survol : la lueur suffit a designer la carte, et
   douze cartes qui montent et descendent agitaient la grille. */
.sf-carte:hover {
    border-color: rgba(var(--teinte-rvb), .95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 18px 38px rgba(0, 0, 0, .48),
        0 0 26px rgba(var(--teinte-rvb), .35);
}

.sf-carte-image {
    position: relative; height: 154px;
    /* Pas d'overflow cache ici : la colonne des pieces portees est plus haute
       que la vignette des qu'un skin porte cinq objets, et les dernieres
       etaient coupees. La carte, elle, rogne toujours ses coins. */
    display: flex; align-items: flex-end; justify-content: center;
}
.sf-carte-image img {
    position: relative; height: 100%; width: auto; max-width: 92%;
    object-fit: contain; object-position: 50% 100%;
    padding: 10px 0 6px;
    /* Un cinquieme plus grand, pousse depuis le haut : la place vide est
       sous le personnage, c'est donc vers le bas qu'il doit s'etendre. */
    transform: scale(1.2);
    transform-origin: 50% 0;
}
.sf-embleme {
    position: absolute; top: 12px; z-index: 1;
    display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 9px; font-size: 15px; color: #eafff3;
    background: rgba(6, 14, 22, .5); border: 1px solid rgba(255, 255, 255, .14);
}
.sf-embleme.gauche { left: 12px; }
.sf-embleme.droite { right: 12px; opacity: .55; }
.sf-carte-corps { padding: 10px 12px 12px; }
.sf-carte-corps strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nom a gauche, pieces portees a droite : on lit d'un coup d'oeil de quoi le
   skin est fait, sans avoir a l'ouvrir. */
/* Pieces portees : une colonne contre le bord droit de la vignette, a cote du
   personnage. Elles etaient a la suite du nom, trop petites et a l'etroit. */
.sf-pieces {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: flex; flex-direction: column; gap: 0;
}
/* Les pieces se chevauchent legerement : cinq objets s etalaient sinon sur
   toute la hauteur de la carte. */
.sf-pieces img + img { margin-top: -8px; }
.sf-pieces img {
    width: 48px; height: 48px; object-fit: contain;
    /* Ni cadre ni fond : l'objet seul. L'ombre epouse sa silhouette et le
       detache d'un skin clair, ce qu'un fond faisait jusqu'ici. */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75));
}
/* Palette du costume : une colonne contre le bord gauche de la vignette, en
   reponse aux pieces portees a droite. Des pastilles, pas des etiquettes :
   c'est la couleur qui parle, pas son code. */
.sf-palette {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; flex-direction: column; flex: none; gap: 6px;
}
.sf-palette i {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6);
}

/* Hors d'une vignette — la fiche vedette — la palette reste une ligne. */
.sf-vedette-ligne .sf-palette { position: static; flex-direction: row; gap: 5px; }
.sf-carte-corps small { font-size: 13px; color: var(--attenue); }
.sf-carte-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 13px; }
.sf-carte-pied .coeur { color: #ff6b8a; }
.sf-classe {
    margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 13px; flex: none;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .3); color: #cfe0f0;
}

/* Aperçu de remplacement : les créations d'avant la vignette n'en ont pas, et
   une image vide s'affiche en icône cassée. */
.sf-sans-vignette {
    align-self: center; padding: 8px 14px; border-radius: 999px;
    font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(var(--teinte-rvb), .22);
}

/* La carte entiere ouvre le skin : le pied ne porte plus que le coeur et
   l etiquette de classe, que la marge automatique de .sf-classe ecarte. */
.sf-carte { cursor: pointer; }

/* Le nom de l'auteur mene a ses creations. */
.sf-auteur-lien {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: #cfe0f0; text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.sf-auteur-lien:hover { color: #ffffff; text-decoration-style: solid; }


/* « J'aime » : le cœur disait le compte sans jamais permettre de l'augmenter.
   Creux tant qu'on n'a pas voté, plein ensuite. */
.sf-aime {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 3px 9px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 13px; color: #ff6b8a;
    border: 1px solid rgba(255, 107, 138, .3);
    background: rgba(255, 107, 138, .08);
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.sf-aime:hover { background: rgba(255, 107, 138, .18); border-color: rgba(255, 107, 138, .6); }
.sf-aime:disabled { opacity: .6; cursor: default; }
.sf-aime.actif {
    color: #fff0f3; background: linear-gradient(180deg, #ff7a99, #e03c66);
    border-color: rgba(255, 255, 255, .35);
}
.sf-aime-coeur { line-height: 1; }
/* Un battement au clic : le geste se voit sans attendre le serveur. */
.sf-aime.bat .sf-aime-coeur { animation: sf-battement 320ms ease; }
@keyframes sf-battement {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Le nom de la creation : texte plein et clair, la teinte du costume ne
   passe que par la lueur. Un degrade vers cette teinte rendait le nom
   illisible des que le costume tirait vers le clair ou le sature. */
.sf-carte-corps strong {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55),
                 0 0 14px rgba(var(--teinte-rvb), .6);
    letter-spacing: .01em;
}

/* Les compagnons portes, sous la colonne des couleurs : l'aura d'abord,
   la monture dessous. Ni cadre ni fond, comme les pieces portees a
   droite — l'ombre epouse la silhouette et suffit a detacher l'icone.
   La vignette ne dessine pas l'aura elle-meme : elle deborderait du
   cadre. Le familier n'y figure pas, il se tiendra a cote du
   personnage. */
.sf-compagnons {
    /* Juste a droite de la colonne des couleurs, en haut : celle-ci fait
       18 px de large depuis la gauche a 10 px, donc son bord tombe a 28.
       Sous les couleurs, cinq teintes auraient pousse les icones sur le
       nom. */
    position: absolute; top: 8px; left: 32px; z-index: 2;
    display: flex; flex-direction: column; gap: 0;
}
.sf-compagnons img + img { margin-top: -8px; }
.sf-compagnons img {
    width: 40px; height: 40px; object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75));
}