/* ============================================================
   logos.css — Banque de logos pomme.gg
   v3 — logo-motex couleurs du jeu (V2)
   ============================================================ */

.card-logo {
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
}

/* ===== logo-bebas ===== */
.logo-bebas {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  line-height: 1;
}
.logo-bebas .grad {
  background: linear-gradient(90deg, #ff2e8a, #a855f7 55%, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-bebas .white { color: #fff; }
.logo-bebas.size-l { font-size: 22px; }
.logo-bebas.size-m { font-size: 18px; }
.logo-bebas.size-s { font-size: 15px; letter-spacing: 2px; }

/* ===== logo-x ===== */
.logo-x {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
  line-height: 1;
}
.logo-x .accent {
  font-style: italic;
  display: inline-block;
}
.logo-x .accent-red    { color: #ff3c6e; }
.logo-x .accent-blue   { color: #3ca8ff; }
.logo-x .accent-orange { color: #ff8c42; }
.logo-x.size-l { font-size: 26px; }
.logo-x.size-m { font-size: 22px; }
.logo-x.size-s { font-size: 19px; }

/* ===== logo-mc ===== */
.logo-mc {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  letter-spacing: -.5px;
}
.logo-mc .l1 { display: block; font-size: 18px; }
.logo-mc .l2 { display: block; }
.logo-mc .accent { color: #ff3c6e; font-style: italic; }
.logo-mc.size-s { font-size: 16px; }
.logo-mc.size-s .l1 { font-size: 13px; }

/* ===== logo-codex ===== */
.logo-codex {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 26px;
  color: #fff;
  letter-spacing: -.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}
.logo-codex svg {
  width: 26px;
  height: 26px;
  margin: 0 -1px;
  flex-shrink: 0;
}
.logo-codex .x-red {
  color: #ff3c6e;
  font-style: italic;
}
.logo-codex.size-m { font-size: 22px; }
.logo-codex.size-m svg { width: 22px; height: 22px; }
.logo-codex.size-s { font-size: 18px; }
.logo-codex.size-s svg { width: 18px; height: 18px; }

/* ===== logo-motex (cases couleurs du jeu, famille MOTS) =====
   Couleurs du jeu : rouge = bien placé, jaune = mal placé, gris = absent.
   Schéma V2 : M rouge, O rouge, T jaune, E gris, X rouge italique. */
.logo-motex {
  display: inline-flex;
  gap: 3px;
  line-height: 1;
  vertical-align: middle;
}
.logo-motex .cl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: 'Bebas Neue', sans-serif;
}
.logo-motex .cl.red  { background: #ff3c6e; color: #fff; }
.logo-motex .cl.gold { background: #ffd166; color: #241803; }
.logo-motex .cl.grey { background: #1b1b27; color: #c8c8d8; border: 1px solid rgba(255, 255, 255, .07); }
.logo-motex .cl.x    { font-style: italic; }
.logo-motex.size-l .cl { width: 38px; height: 38px; font-size: 24px; }
.logo-motex.size-m .cl { width: 28px; height: 28px; font-size: 18px; }
.logo-motex.size-s { gap: 2px; }
.logo-motex.size-s .cl { width: 22px; height: 22px; font-size: 14px; border-radius: 4px; }