/* =========================
   PROFILE CARD (GRID INSIDE)
========================= */
.profile-box {

  color: rgb(90, 54, 69);
  font-weight: bold;

  width: 100%;

  background: #ffffff;

  border: 1px dashed #000000;

  padding: 10px;

  font-family: "Dogica", monospace;

  image-rendering: pixelated;

  margin-bottom: 10px;

  position: relative;

  letter-spacing: -1.5px;


  /* 🔥 GRID */
  display: grid;
 grid-template-columns: 1fr;
grid-template-areas:
  "header"
  "desc"
  "info"
  "extra";

  gap: 8px;
}


/* =========================
   AVATAR
========================= */
.profile-avatar {
  grid-area: avatar;

  width: 120px;

  image-rendering: pixelated;
  

  padding: 4px;

  background: #fff;

  align-self: start;
}


/* =========================
   DESCRIPTION
========================= */
.profile-desc {
  grid-area: desc;

  font-size: 10px;

  line-height: 1.4;

  margin: 0;
}


/* =========================
   INFO BOX (styled like mini card)
========================= */
.profile-info {
  grid-area: info;

  font-size: 10px;

  margin-top: 4px;

  padding: 6px;

  border: 1px dashed #000;

  background: #fffafc;
}

.profile-info p {
  margin: 3px 0;
}


/* =========================
   EXTRA TEXT
========================= */
.profile-extra {
  grid-area: extra;

  font-size: 9px;

  margin-top: 4px;

  opacity: 0.8;

  text-align: center;
}


/* =========================
   HOVER
========================= */
.profile-box:hover {
  background: #fffafc;
  transform: translateY(-1px);
}

/* =========================
   SUBHEADER IMAGE (NEW)
========================= */
.profile-subheader {
  grid-area: header;

  width: 100%;
  height: auto;

  image-rendering: pixelated;

  border: 1px dashed #000;

  padding: 3px;

  background: #fff;

  
}

/* =========================
   SECTIONS (mini windows)
========================= */
.profile-section {
  margin-top: 8px;

  border: 1px dashed #000;

  background: #ffffff;

  padding: 6px;

}

/* titulo tipo ventana 2000s */
.profile-section-title {
  font-size: 9px;

  background: #ffceea;

  padding: 2px 6px;

  display: inline-block;

  border: 1px solid #000;

  margin-bottom: 6px;

  color: #000;

  text-transform: lowercase;
}


/* =========================
   GRID LIST (games etc)
========================= */
.profile-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 4px;

  font-size: 9px;
}

.profile-grid span {
  padding: 3px;

  font-size: 9px;

  display: block;

}

.profile-grid span:nth-child(1) { background: #ffd6ec; }
.profile-grid span:nth-child(2) { background: #d6f6ff; }
.profile-grid span:nth-child(3) { background: #fff4a3; }
.profile-grid span:nth-child(4) { background: #e9d6ff; }
.profile-grid span:nth-child(5) { background: #ffd1d1; }
.profile-grid span:nth-child(6) { background: #c6ffd6; }
.profile-grid span:nth-child(7) { background: #ffedc8; }
.profile-grid span:nth-child(8) { background: #d0f0ff; }
.profile-grid span:nth-child(9) { background: #f9d6ff; }
.profile-grid span:nth-child(10) { background: #d6ffe1; }
.profile-grid span:nth-child(11) { background: #ffe0f0; }


/* =========================
   FAQ
========================= */
.faq p {
  font-size: 9px;

  margin: 6px 0;

  line-height: 1.3;
}