/* ============================================================
   OWNERSHIP RIBBON - Horlogium 2025
   Compact, bottom-left aligned, elegant status indicators
============================================================ */

/* ---------------------------
   Structure de base
--------------------------- */
.game-image-wrapper {
  position: relative;
  overflow: hidden;
}

.game-grid-image {
  width: 100%;
  display: block;
}

/* ---------------------------
   Ruban principal
--------------------------- */
.ownership-banner {
  position: relative;
  bottom: 70px;                /* légèrement au-dessus du bas de l'image */
  left: 0;
  height: 32px;
  line-height: 32px; /* texte centré verticalement */
  width: 100%;                 /* pour l’effet de sortie du bord gauche */
  transform: translateX(-87%); /* seul l’arrondi visible au repos */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 70px;          /* “tabulation” visuelle */
  padding-right: 24px;
  letter-spacing: 0.05em; /* meilleure lisibilité sur small caps */
  text-shadow: 0 0 3px rgba(0,0,0,0.6); /* petit contraste */
  gap: 0;
  border-radius: 0 14px 14px 0;
  font-variant-caps: small-caps;
  font-weight: 600;
  font-size: 0.8rem;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 35;
  cursor: default;
  transition:
    transform 0.4s cubic-bezier(.2,.9,.2,1),
    background-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

/* 2) Conteneur du texte : occupe la largeur dispo, de la tab de gauche jusqu’à avant la boule */
.ownership-label {
  height: 100%;
  position: relative;          /* ✅ relative, pas absolute */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;  /* ✅ centre aussi le texte à l’intérieur */
}

/* État “repos” */
.ownership-banner.ribbon--available {  /* possédé */
  background:#181a46; color:var(--horlogium-gold); border:1px solid var(--horlogium-gold);
}
.ownership-banner.ribbon--unavailable { /* non possédé */
  background:#181a46; color:#ff5555; border:1px solid var(--horlogium-gold);
}

/* 🎯 Couleurs AU SURVOL (action) */
.ownership-banner.ribbon--available:hover {   /* propose SUPPRIMER */
  background:#c0392b; color:#fff; border:none;
}
.ownership-banner.ribbon--unavailable:hover { /* propose AJOUTER */
  background:#2ecc71; color:#fff; border:none;
}

/* ---------------------------
   Déploiement du ruban
--------------------------- */
.game-image-wrapper:hover .ownership-banner {
  transform: translateX(-22%); /* déploiement à ~80% */
}

/* ---------------------------
   Boules brillantes
--------------------------- */
.ownership-boule {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;                   /* > au ::after (shine) */
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,0.4),
    inset  1px  1px 2px rgba(255,255,255,0.4);
  transition: opacity .2s ease;
}

.ownership-boule.gold {
  background: radial-gradient(circle at 30% 30%, #fff8c9 0%, #efaf22 50%, #b98a15 100%);
}
.ownership-boule.red {
  background: radial-gradient(circle at 30% 30%, #ffc9c9 0%, #b92f2b 50%, #7a1614 100%);
}

.ownership-banner:hover .ownership-boule {
  opacity: 0;
}

/* ============================================================
   ÉTATS DU RUBAN (COULEURS & INTERACTIONS)
============================================================ */

/* Par défaut (juste pour debug / base neutre) */
.ownership-banner {
  background: #181a46;
  border: 1px solid var(--horlogium-gold);
  color: #fff;
}


/* ---------------------------
   Texte et transitions
--------------------------- */
.ownership-text {
  position: absolute;          /* ✅ texte superposé dans le label */
  top: 50%;                    /* ✅ pour le centrage vertical précis */
  left: 0;                     /* bord gauche aligné */
  right: 0;                    /* empêche de passer sous la boule */
  transform: translateY(-50%);  /* centre parfaitement verticalement */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  /* transition: opacity 0.25s ease, color 0.3s ease; */
  line-height: 1;
  z-index: 5;
}

/* Texte par défaut et texte d’action */
.ownership-text.default { opacity: 1; }
.ownership-text.action  { opacity: 0; }

/* Changement de texte lors du hover */
.ownership-banner:hover .ownership-text.default { opacity: 0; }
.ownership-banner:hover .ownership-text.action  { opacity: 1; }

/* ---------------------------
   Effet lumineux (balayage)
--------------------------- */
.ownership-banner:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-25deg);
  animation: ribbon-swipe 1.2s forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes ribbon-swipe {
  0%   { left: -100%; }
  100% { left: 100%; }
}

.ownership-banner.locked {
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
}

.ownership-banner.updating {
  pointer-events: none;
  opacity: 0.6;
}

/* Couleurs logiques — aucune dépendance au parent */
.ribbon--available { color: var(--horlogium-gold); background:#181a46; border:1px solid var(--horlogium-gold); }
.ribbon--unavailable { color:#ff5555; background:#181a46; border:1px solid var(--horlogium-gold); }

/* =============================
   Correction des couleurs de texte par état
============================= */

/* Texte par défaut (repos) */
.ribbon--available .ownership-text.default {
  color: var(--horlogium-gold);
}
.ribbon--unavailable .ownership-text.default {
  color: #ff5555;
}

/* Texte d’action (hover) */
.ribbon--available:hover .ownership-text.action {
  color: #fff; /* suppr */
}
.ribbon--unavailable:hover .ownership-text.action {
  color: #fff; /* ajout */
}