html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body.perfil-page {
  background: transparent;
  overflow: hidden;
}

.perfil-only-wrap {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* Card base fixo */
.perfil-card {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 1280px;
  height: 720px;
  padding: 22px;

  background: linear-gradient(
    to bottom,
    rgba(19, 55, 20, 0.95),
    rgba(10, 31, 11, 0.96)
  );

  border: 4px solid #2b1807;
  outline: 3px solid #68411b;
  box-sizing: border-box;

  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform;
  overflow: hidden;
}

.perfil-card-header {
  display: grid;
  grid-template-columns: 170px 1fr 180px;
  gap: 18px;
  align-items: start;
}

.perfil-card-avatar-frame {
  width: 160px;
  height: 160px;
  padding: 6px;
  background: linear-gradient(to bottom, #f1dba5 0%, #c9a85f 100%);
  border: 3px solid #2b1807;
  outline: 2px solid #68411b;
  box-sizing: border-box;
}

.perfil-card-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #18331a;
}

.perfil-card-name {
  margin: 0;
  font-size: 2.2rem;
  color: #f8f2dc;
  line-height: 1.1;
}

.perfil-card-role {
  margin-top: 8px;
  color: #dce7ff;
  font-weight: 700;
  font-size: 1.05rem;
}

.perfil-card-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 16px;
}

.perfil-badge-slot {
  width: 92px;
  height: 92px;
  padding: 6px;
  background: rgba(13, 33, 13, 0.35);
  border: 2px solid rgba(241, 219, 165, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 92px;
}

.perfil-badge-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.perfil-card-coin-box,
.perfil-level-box,
.perfil-stat-box,
.perfil-footer-panel,
.perfil-ranking-box {
  padding: 14px;
  background: rgba(13, 33, 13, 0.35);
  border: 2px solid rgba(241, 219, 165, 0.35);
  box-sizing: border-box;
  min-width: 0;
}

.perfil-card-coin-box {
  text-align: center;
}

.perfil-card-coin-label,
.perfil-box-label {
  display: block;
  font-size: 0.82rem;
  color: #e4d7ac;
  line-height: 1.1;
}

.perfil-card-coin-value,
.perfil-box-value {
  display: block;
  margin-top: 6px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

.perfil-card-main {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
}

.perfil-xp-box {
  padding: 14px;
  background: rgba(13, 33, 13, 0.35);
  border: 2px solid rgba(241, 219, 165, 0.35);
  box-sizing: border-box;
  min-width: 0;
}

.perfil-xp-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #f6f1d8;
  font-size: 0.92rem;
  white-space: nowrap;
}

.perfil-xp-top span:last-child {
  flex-shrink: 0;
}

.perfil-xp-bar {
  width: 100%;
  height: 18px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #2b1807;
  overflow: hidden;
  box-sizing: border-box;
}

.perfil-xp-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #73dc82 0%, #f1dba5 100%);
}

.perfil-card-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.perfil-card-rankings {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.perfil-card-footer {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.perfil-footer-text {
  font-size: 1rem;
}

.is-hidden {
  display: none !important;
}