/**
 * INSCRYPCARDS - Carte (calques : fond, portrait, coût, sigils, stats)
 * Les textures font 125x190 ; tout est positionné en % pour s'adapter à la largeur du conteneur.
 */

/* Couleur du texte et des éléments des cartes PO3. */
:root {
    --po3-color: #9fe0ff;
}

/* Police utilisée pour les noms et les statistiques des cartes. */
@font-face {
    font-family: 'HeavyWeight';
    src: url('../ttf/HEAVYWEI.TTF') format('truetype');
    font-display: swap;
}


/* Conteneur de la carte : proportions, mise à l'échelle et couleur par défaut.
   Les unités cqw des éléments enfants dépendent de sa largeur. */
.ic-card {
    position: relative;
    width: 100%;
    aspect-ratio: 125 / 190;
    container-type: inline-size;
    image-rendering: pixelated;
    color: #07131c;
}

/* Tous les calques d'image sont positionnés dans la carte et restent non interactifs. */
.ic-card img {
    position: absolute;
    image-rendering: pixelated;
    pointer-events: none;
    user-select: none;
}

/* Fond et calques de cadre couvrant toute la carte. */
.ic-frame { 
    inset: 0; 
    width: 100%; 
    height: 100%; 
}

/* Position et taille du portrait. */
.ic-portrait { 
    left: 4.4%; 
    top: 17%; 
    width: 91.2%; 
    height: 49.5%; 
    object-fit: contain; 
}

/* Titre centré en haut de la carte. */
.ic-name {
    position: absolute;
    left: 4%; right: 4%; top: 3.5%; height: 12%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'HeavyWeight', var(--font-ui);
    font-size: 17cqw;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}
/* Réduction de la taille pour les noms longs et très longs. */
.ic-name.is-long { 
    font-size: 13.5cqw; 
}

.ic-name.is-xlong { 
    font-size: 10.5cqw; 
}

/* Zone et images du coût de la carte. */
.ic-cost { 
    position: absolute; 
    right: 6%; 
    top: 17.5%; 
    width: 36%; 
    height: 20%; 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-start; 
}

.ic-cost img { 
    position: static; 
    height: 100%; 
    width: auto; 
}
/* Affichage textuel de secours pour les coûts d'énergie sans texture dédiée. */
.ic-cost-energy {
    font-family: var(--font-ui);
    font-size: 15cqw;
    line-height: 1;
    padding: 2cqw 3cqw;
    background: #5a9aaa;
    color: #07131c;
    border: 1cqw solid #07131c;
}

/* Centre chaque sigil sur sa position définie dans le modèle de carte. */
.ic-sigil { 
    transform: translate(-50%, -50%); 
    height: auto; 
}

/* Indique qu'un clic permet de changer le portrait. */
.ic-repaintable { cursor: pointer; }

/* Apparence commune des valeurs d'attaque et de vie. */
.ic-stat {
    position: absolute;
    font-family: 'HeavyWeight', var(--font-ui);
    font-size: 30.5cqw;
    line-height: 1;
    text-align: center;
    transform: translate(-50%, -50%);
}
/* Positions de l'attaque à gauche et de la vie à droite. */
.ic-atk { 
    left: 13.5%; 
    top: 77.5%; 
}

.ic-hp  { 
    left: 84%; 
    top: 86.5%; 
    color: #07131c; 
}

/*-------------------------*/
/*         GRIMORA         */
/*-------------------------*/

/* Grimora : titre et statistiques noirs, avec les deux chiffres alignés. */
.ic-grimora .ic-name,
.ic-grimora .ic-stat { color: #000; }
.ic-grimora .ic-atk, 
.ic-grimora .ic-hp { top: 86.5%; }
/* Grimora : portrait, coût et sigils réduits. */
.ic-grimora .ic-portrait {
    left: 13.5%;
    top: 21%;
    width: 73%;
    height: 40%;
}
.ic-grimora .ic-cost { 
    width: 29%; 
    height: 16%; 
}
.ic-grimora .ic-sigil { 
    transform: translate(-50%, -50%) scale(0.8); 
}

/*-------------------------*/
/*           PO3           */
/*-------------------------*/


/* PO3 : couleur du titre, des statistiques et de la quantité. */
.ic-p03 .ic-name,
.ic-p03 .ic-stat,
.ic-p03 .ic-qty { color: var(--po3-color); }
/* Positions du titre PO3 standard et du titre PO3 rare, repéré par son cadre. */
.ic-p03 .ic-name { 
    top: 6%; 
}
/* position des stats */
.ic-p03 .ic-stat { 
    top: 100%;
    height: 40%;
}
.ic-p03 .ic-atk { 
    left: 20%;
}
.ic-p03 .ic-hp { 
    right: 20%;
}


.ic-p03:has(> .ic-frame-base[src$="card_empty_rare_po3.png"]) .ic-name { top: 4%; }
/* PO3 : couleurs du coût d'énergie textuel de secours. */
.ic-p03 .ic-cost-energy {
    color: var(--po3-color);
    background: #07131c;
    border-color: var(--po3-color);
}
/* PO3 : recolore le portrait et les sigils, sans toucher aux textures de coût.
   La couleur du SVG intégré doit être mise à jour avec --po3-color. */
.ic-p03 .ic-portrait,
.ic-p03 .ic-sigil {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-color='%239fe0ff' result='color'/%3E%3CfeComposite in='color' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3C/svg%3E#t");   
}

.ic-p03 .ic-portrait {
    /* taille du portrait PO3 */
    height: 40%;
    top: 24%;
}
/* mm chose pour la rare PO3 */
.ic-p03:has(> .ic-frame-base[src$="card_empty_rare_po3.png"]) .ic-name {
    top: 6%;
    color: #000;
}

/*-------------------------*/
/*       MAGNIFICUS        */
/*-------------------------*/

/* Magnificus : couleur du titre et des statistiques. */
.ic-magnificus .ic-name,
.ic-magnificus .ic-stat { color: #e4caff; }

/* Avatar : 3 calques (haut, visage, bas), textures 109x88 au total */
.avatar {
    position: relative;
    aspect-ratio: 109 / 88;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.avatar img { 
    position: absolute; 
    image-rendering: pixelated; 
}
/* Placement des calques supérieur, inférieur et du visage. */
.av-top    { 
    left: 0; 
    top: 0;   
    width: 100%; 
    height: 50%; 
}

.av-bottom { 
    left: 0; 
    top: 50%; 
    width: 100%; 
    height: 50%; 
}

.av-face   { 
    left: 28.4%; 
    top: 30%; 
    width: 43.1%; 
    height: 38.6%; 
}

/* Pièce (remplace l'emoji d'argent) */
.coin {
    height: 1.1em;
    width: auto;
    vertical-align: -0.2em;
    image-rendering: pixelated;
}

/* Badge de quantité affiché en bas de la carte. */
.ic-qty {
    position: absolute;
    right: 4%; bottom: -1cqw;
    padding: 1cqw 3cqw;
    font-family: var(--font-main);
    font-size: 8cqw;
    background: #07131c;
    color: #d4a020;
    transform: translateY(50%);
}