/* ==== CARD BASE ==== */
.item-card {
    background: #14182b;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
    margin-bottom: 25px; /* espaçamento natural dentro do grid */
  }
  
  /* Brilho animado */
  .item-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .item-card:hover::before {
    opacity: 1;
    animation: glowMove 2.5s linear infinite;
  }
  
  @keyframes glowMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  
  /* Hover sutil */
  .item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(255,255,255,0.1);
  }
  
  /* ==== HEADER ==== */
  .item-header {
    padding: 6px 12px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  /* ==== IMAGEM ==== */
  .item-img {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
    background: radial-gradient(circle at center, rgba(255,255,255,0.03), transparent 70%);
  }
  
  .item-img img {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
  }
  
  /* ==== INFO ==== */
  .item-info {
    text-align: center;
    padding: 5px 0 10px;
  }
  
  .item-info h4 {
    margin: 0;
    font-size: 14px;
    color: #ddd;
  }
  
  .item-info p {
    margin: 3px 0 0;
    font-weight: 600;
    font-size: 15px;
  }
  
  /* ==== PROGRESS BAR ==== */
  .progress-bar {
    position: relative;
    height: 40px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
  }
  
  .progress-bar .progress {
    height: 100%;
    width: 0;
    border-radius: 0;
    transition: width 0.4s ease;
  }
  
  .progress-bar .progress-text {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
  }
  
  /* ==== CORES POR RARIDADE ==== */
  .mythical .item-header { background: #ff5e34; color: #000; }
  .legendary .item-header { background: #ff9e23; color: #000; }
  .epic .item-header { background: #a962ff; color: #000; }
  .rare .item-header { background: #4b66ff; color: #000; }
  
  .mythical .progress-bar { background: #ff5e34; }
  .legendary .progress-bar { background: #ff9e23; }
  .epic .progress-bar { background: #a962ff; }
  .rare .progress-bar { background: #4b66ff; }
  
  .mythical .progress { background: #d94e28; }
  .legendary .progress { background: #e68515; }
  .epic .progress { background: #8c4ae3; }
  .rare .progress { background: #324bdb; }
  
  /* ==== BRILHO COLORIDO (POR RARIDADE) ==== */
  .mythical:hover::before {
    background: linear-gradient(120deg, #ffb088, #ff5e34, #ffb088);
  }
  .legendary:hover::before {
    background: linear-gradient(120deg, #ffd280, #ff9e23, #ffd280);
  }
  .epic:hover::before {
    background: linear-gradient(120deg, #d4b1ff, #a962ff, #d4b1ff);
  }
  .rare:hover::before {
    background: linear-gradient(120deg, #7ca6ff, #4b66ff, #7ca6ff);
  }
  .li-profile{
    cursor: pointer;
  }