/* ==========================================================================
   2256 : HOMO SYNTHÉSIS — CARTES OBJETS

   Formats canoniques :

   NORMAL
   41 × 63 mm
   paysage
   rendu de référence : 147 × 96 px

   LOURD
   63 × 88 mm
   portrait
   rendu de référence : 147 × 205 px
   ========================================================================== */


/* ==========================================================================
   CARTE
   ========================================================================== */

.hs-card.hs-card--canonical {
  position: relative;

  flex: none;

  box-sizing: border-box;

  overflow: visible;

  perspective: 900px;

  user-select: none;

  -webkit-user-select: none;

  -webkit-tap-highlight-color: transparent;

  color: #fcfbe4;

  font-family:
    Roboto,
    sans-serif;

  transform-origin: center center;
}


/* --------------------------------------------------------------------------
   Normal — paysage
   -------------------------------------------------------------------------- */

.hs-card--normal {
  width: 147px;
  height: 95.613px;
}


/* --------------------------------------------------------------------------
   Lourd — portrait
   -------------------------------------------------------------------------- */

.hs-card--heavy {
  width: 147px;
  height: 205.8px;
}


/* ==========================================================================
   VOLUME 3D
   ========================================================================== */

.hs-card__inner {
  position: absolute;

  inset: 0;

  transform-style: preserve-3d;

  transition:
    transform
    400ms
    cubic-bezier(
      .22,
      .72,
      .18,
      1
    );
}


/* --------------------------------------------------------------------------
   Verso visible
   -------------------------------------------------------------------------- */

.hs-card--back-visible
.hs-card__inner {
  transform:
    rotateY(180deg);
}


/* ==========================================================================
   FACES
   ========================================================================== */

.hs-card__face {
  position: absolute;

  inset: 0;

  overflow: hidden;

  box-sizing: border-box;

  padding: 4.9em;

  background:
    #fcfbe4;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;
}


/* --------------------------------------------------------------------------
   Recto
   -------------------------------------------------------------------------- */

.hs-card__face--front {
  transform:
    rotateY(0deg);
}


/* --------------------------------------------------------------------------
   Verso
   -------------------------------------------------------------------------- */

.hs-card__face--back {
  transform:
    rotateY(180deg);
}


/* ==========================================================================
   PANNEAU INTÉRIEUR
   ========================================================================== */

.hs-card__panel {
  width: 100%;
  height: 100%;

  box-sizing: border-box;

  border:
    1px solid
    #22302f;
}


/* ==========================================================================
   RECTO
   ========================================================================== */

.hs-card__panel--front {
  display: flex;

  flex-direction: column;

  gap: 3.5em;

  padding:
    5em
    5.5em
    4em;

  background:
    #0d1414;
}


/* --------------------------------------------------------------------------
   Nom
   -------------------------------------------------------------------------- */

.hs-card__name {
  flex: none;

  min-width: 0;

  overflow: hidden;

  color:
    #fcfbe4;

  font-family:
    Oswald,
    sans-serif;

  font-size:
    9.2em;

  font-weight:
    600;

  line-height:
    1.02;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

  text-wrap:
    pretty;
}


/* ==========================================================================
   ILLUSTRATION
   ========================================================================== */

.hs-card__illustration {
  position: relative;

  flex: 1;

  min-height: 0;

  overflow: hidden;

  box-sizing: border-box;

  border:
    1px solid
    #1c2a29;

  background-color:
    #111b1b;

  background-image:
    repeating-linear-gradient(
      135deg,
      #16211f 0 4px,
      #0f1918 4px 9px
    );
}


/* --------------------------------------------------------------------------
   Image réelle
   -------------------------------------------------------------------------- */

.hs-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  pointer-events: none;
}


/* ==========================================================================
   CODE + FACTION
   ========================================================================== */

.hs-card--canonical .hs-card__meta {
  flex: none;

  display: flex;

  align-items: baseline;

  justify-content:
    space-between;

  gap: 0.55em;

  min-width: 0;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    7.4em;

  line-height:
    1.1;
}


/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

.hs-card__code {
  min-width: 0;

  overflow: hidden;

  color:
    #49adb6;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}


/* --------------------------------------------------------------------------
   Faction
   -------------------------------------------------------------------------- */

.hs-card__faction {
  flex: none;

  color:
    #8a9a8a;
}


/* ==========================================================================
   JETONS + ABSORPTION
   ========================================================================== */

/* nJ — bas gauche */
.hs-card__tokens {
  position: absolute;
  left: 5.5em;
  bottom: 4em;
  z-index: 8;

  display: flex;
  flex-wrap: wrap;

  /*
   * 10 jetons maximum par ligne :
   * 10 × 6.5em + 9 × 2.5em = 87.5em.
   *
   * Comme la zone est ancrée en bas,
   * les lignes supplémentaires remontent
   * naturellement dans la carte.
   */
  width: 87.5em;

  gap: 2.5em;
}


.hs-card__token {
  width: 6.5em;
  height: 6.5em;

  box-sizing: border-box;

  padding: 0;

  border:
    1px solid
    #b0432e;

  background:
    transparent;

  cursor:
    pointer;
}


.hs-card__token--full {
  background:
    #b0432e;
}


.hs-card__token--empty {
  background:
    transparent;
}


/* nB — bas droite */
.hs-card__absorption {
  position: absolute;
  right: 5.5em;
  bottom: 4em;
  z-index: 8;

  display: flex;
  gap: 2.5em;
}


.hs-card__absorption-slot {
  display: grid;
  place-items: center;

  width: 7.5em;
  height: 7.5em;

  box-sizing: border-box;

  border:
    1px dashed
    #8f7a36;

  background:
    rgba(216, 182, 63, .04);

  color:
    #bda24b;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    5.8em;

  line-height:
    1;
}


/* carré jaune plein — armure */
.hs-card__armor-marker {
  position: absolute;

  z-index: 24;

  top: 7em;
  right: 7em;

  width: 7em;
  height: 7em;

  box-sizing: border-box;

  background:
    #d8b63f;

  border:
    1px solid
    rgba(10, 16, 16, .72);

  pointer-events: none;
}


/* ==========================================================================
   VERSO
   ========================================================================== */

.hs-card__panel--back {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4em;

  padding: 5em;

  background-color:
    #111b1b;

  background-image:
    repeating-linear-gradient(
      45deg,
      #131e1d 0 3px,
      #0f1817 3px 8px
    );
}


/* --------------------------------------------------------------------------
   Nom du verso
   -------------------------------------------------------------------------- */

.hs-card__back-name {
  max-width: 100%;

  color:
    #8a9a8a;

  font-family:
    Oswald,
    sans-serif;

  font-size:
    8em;

  font-weight:
    500;

  line-height:
    1.05;

  letter-spacing:
    0.1em;

  text-align: center;

  text-transform:
    uppercase;

  overflow-wrap:
    anywhere;
}


/* --------------------------------------------------------------------------
   ID
   -------------------------------------------------------------------------- */

.hs-card__back-id {
  max-width: 100%;

  color:
    #fcfbe4;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    8.4em;

  text-align:
    center;

  overflow-wrap:
    anywhere;
}


/* --------------------------------------------------------------------------
   Séparateur
   -------------------------------------------------------------------------- */

.hs-card__back-separator {
  width: 32%;

  height: 1px;

  flex: none;

  background:
    #2a3a39;
}


/* --------------------------------------------------------------------------
   Code du verso
   -------------------------------------------------------------------------- */

.hs-card__back-code {
  max-width: 100%;

  color:
    #94abb5;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    7em;

  text-align:
    center;

  overflow-wrap:
    anywhere;
}


/* ==========================================================================
   BLESSURE
   Les cartes Blessure utilisent désormais le composant Normal canonique.
   Aucun liseré extérieur spécifique : l'identité passe par le fond et la ligne.
   ========================================================================== */



/* ==========================================================================
   ÉTATS UTILITAIRES
   ========================================================================== */

.hs-card--canonical.hs-card--selected {
  outline:
    1px solid
    #49adb6;

  outline-offset:
    2px;
}


.hs-card--canonical.hs-card--dragging {
  opacity: 0.92;

  outline:
    1px solid
    #49adb6;

  outline-offset:
    2px;
}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {
  .hs-card__inner {
    transition: none;
  }
}
/* ==========================================================================
   STAGE CANONIQUE — formats reconstruits en résolution source

   Le wrapper .hs-card garde les dimensions demandées par l'interface.
   Le stage contient la carte complète à sa résolution canonique et est réduit
   en une seule opération par cards.js. Le flip reste sur .hs-card__inner.
   ========================================================================== */
.hs-card--canonical > .hs-card__stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  overflow: visible;
}

.hs-card--canonical > .hs-card__stage > .hs-card__inner {
  position: absolute;
  inset: 0;
}