/* ==================================================
   TOP DONATES — CSS ISOLADO
   Não altera topo, menu ou páginas antigas
================================================== */

.donates-hero {
  max-width: 1100px;
  margin: 35px auto 25px;
  padding: 35px 20px;
  text-align: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(255, 0, 0, 0.28), transparent 45%),
    linear-gradient(135deg, rgba(20, 0, 0, 0.95), rgba(0, 0, 0, 0.96));
  border: 1px solid rgba(255, 60, 60, 0.35);
  box-shadow: 0 0 35px rgba(255, 0, 0, 0.22);
}

.donates-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  color: #fff;
  letter-spacing: 2px;
  text-shadow:
    0 0 12px rgba(255, 0, 0, 0.9),
    0 0 28px rgba(255, 0, 0, 0.55);
}

.donates-hero p {
  margin: 12px 0 0;
  color: #ddd;
  font-size: 1.05rem;
  font-weight: 700;
}

.donates-section {
  max-width: 1180px;
  margin: 30px auto;
  padding: 0 16px;
}

.donates-title-box {
  margin-bottom: 18px;
  padding: 18px;
  text-align: center;
  border-radius: 20px;
  background: rgba(10, 10, 10, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.donates-title-box h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  letter-spacing: 1px;
}

.donates-title-box p {
  margin: 6px 0 0;
  color: #bbb;
  font-weight: 700;
}

.donates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.donates-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 22px 18px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(3, 3, 3, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}

.donates-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.24;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65), transparent 35%);
  transform: rotate(18deg);
  pointer-events: none;
}

.donates-card-inner {
  position: relative;
  z-index: 2;
}

.donates-avatar {
  width: 105px;
  height: 105px;
  margin: 0 auto 14px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.3));
}

.donates-name {
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  word-break: break-word;
}

.donates-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Hall Diamante */

.diamond-section .donates-title-box {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.diamond-card {
  background:
    radial-gradient(circle at top, rgba(120, 230, 255, 0.34), transparent 38%),
    linear-gradient(180deg, rgba(9, 28, 38, 0.98), rgba(0, 0, 0, 0.98));
  border: 1px solid rgba(155, 238, 255, 0.55);
  box-shadow:
    0 0 26px rgba(0, 213, 255, 0.28),
    0 18px 34px rgba(0, 0, 0, 0.65);
}

.diamond-card .donates-name {
  text-shadow:
    0 0 12px rgba(120, 230, 255, 0.9),
    0 0 26px rgba(120, 230, 255, 0.55);
}

.diamond-card .donates-badge {
  border-radius: 999px 999px 10px 10px;
  color: #001014;
  background: linear-gradient(90deg, #dffaff, #70e9ff, #ffffff);
  box-shadow: 0 0 18px rgba(120, 230, 255, 0.55);
}

/* Hall Rubi — Roxo Premium */

.ruby-section .donates-title-box {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.ruby-section .donates-title-box h2 {
  color: #f3dcff;
  text-shadow:
    0 0 10px rgba(200, 120, 255, 0.95),
    0 0 28px rgba(140, 0, 255, 0.75),
    0 0 45px rgba(255, 255, 255, 0.22);
}

.ruby-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background:
    radial-gradient(circle at 50% 0%, rgba(230, 190, 255, 0.30), transparent 24%),
    radial-gradient(circle at 15% 20%, rgba(190, 70, 255, 0.24), transparent 28%),
    radial-gradient(circle at 85% 35%, rgba(90, 0, 180, 0.26), transparent 32%),
    linear-gradient(180deg, rgba(36, 0, 58, 0.99), rgba(4, 0, 10, 0.99));
  border: 1px solid rgba(210, 145, 255, 0.68);
  box-shadow:
    0 0 18px rgba(200, 120, 255, 0.45),
    0 0 42px rgba(125, 0, 255, 0.28),
    0 20px 42px rgba(0, 0, 0, 0.75);
}

.ruby-card::before {
  content: "";
  position: absolute;
  inset: -45%;
  opacity: 0.34;
  background:
    conic-gradient(
      from 180deg,
      transparent,
      rgba(255, 255, 255, 0.20),
      rgba(190, 90, 255, 0.38),
      transparent
    );
  animation: rubyGlowSpin 7s linear infinite;
  pointer-events: none;
}

.ruby-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255, 255, 255, 0.18) 45%,
      transparent 70%
    );
  transform: translateX(-120%);
  animation: rubyShine 3.5s ease-in-out infinite;
}

.ruby-card .donates-card-inner {
  position: relative;
  z-index: 2;
}

.ruby-card .donates-avatar {
  width: 118px;
  height: 118px;
  filter:
    drop-shadow(0 0 12px rgba(220, 160, 255, 0.95))
    drop-shadow(0 0 28px rgba(150, 0, 255, 0.75));
}

.ruby-card .donates-name {
  color: #ffffff;
  font-size: 1.45rem;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.65),
    0 0 18px rgba(205, 130, 255, 1),
    0 0 38px rgba(140, 0, 255, 0.85);
}

.ruby-card .donates-badge {
  min-width: 250px;
  color: #fff;
  background:
    linear-gradient(90deg, #2b004c, #7d18ff, #c88cff, #7d18ff);
  border: 1px solid rgba(235, 200, 255, 0.65);
  box-shadow:
    0 0 14px rgba(200, 120, 255, 0.75),
    inset 0 0 12px rgba(255, 255, 255, 0.22);
}

.ruby-card .donates-fixed-value {
  min-width: 210px;
  display: inline-block;
  margin-top: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  color: #2b004c;
  background: linear-gradient(90deg, #ffffff, #e7c6ff, #ffffff);
  font-size: 1rem;
  font-weight: 1000;
  letter-spacing: 1px;
  box-shadow:
    0 0 18px rgba(220, 165, 255, 0.75),
    0 0 35px rgba(130, 0, 255, 0.35);
}

@keyframes rubyGlowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rubyShine {
  0% {
    transform: translateX(-130%);
  }

  45% {
    transform: translateX(130%);
  }

  100% {
    transform: translateX(130%);
  }
}

/* Ranking Geral */

.donates-ranking {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.donates-rank-row {
  display: grid;
  grid-template-columns: 70px 64px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(18, 18, 18, 0.96), rgba(5, 5, 5, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

.donates-rank-position {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  text-align: center;
}

.donates-rank-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.22));
}

.donates-rank-info h3 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.donates-rank-info span {
  display: block;
  margin-top: 4px;
  color: #aaa;
  font-size: 0.82rem;
  font-weight: 800;
}

/* Admin Donates */

.donates-admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
}

.donates-admin-modal {
  max-width: 760px;
  margin: 35px auto;
  position: relative;
}

.donates-form {
  display: grid;
  gap: 12px;
}

.donates-form input,
.donates-form select {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  outline: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  font-weight: 800;
}

.donates-form input::placeholder {
  color: #888;
}

.donates-form button,
.donates-admin-action {
  padding: 13px 16px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #a40000, #ff1717);
  font-weight: 900;
  letter-spacing: 0.8px;
}

.donates-form .cancel-btn {
  background: linear-gradient(135deg, #333, #111);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.donates-admin-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.donates-admin-item h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
}

.donates-admin-item p {
  margin: 5px 0 0;
  color: #aaa;
  font-weight: 800;
  font-size: 0.85rem;
}

.donates-admin-buttons {
  display: flex;
  gap: 8px;
}

.donates-admin-buttons button {
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
}

.donates-edit-btn {
  background: linear-gradient(135deg, #444, #222);
}

.donates-delete-btn {
  background: linear-gradient(135deg, #750000, #ff1b1b);
}

.donates-empty {
  padding: 22px;
  text-align: center;
  color: #aaa;
  font-weight: 900;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Responsivo */

@media (max-width: 640px) {
  .donates-hero {
    margin-top: 22px;
    padding: 28px 14px;
  }

  .donates-card {
    min-height: 230px;
  }

  .donates-rank-row {
    grid-template-columns: 48px 48px 1fr;
    gap: 10px;
    padding: 12px;
  }

  .donates-rank-icon {
    width: 44px;
    height: 44px;
  }

  .donates-admin-item {
    grid-template-columns: 1fr;
  }

  .donates-admin-buttons {
    width: 100%;
  }

  .donates-admin-buttons button {
    flex: 1;
  }
}

/* LivePix */

.livepix-section .donates-title-box {
  border-color: rgba(0, 255, 170, 0.35);
  box-shadow: 0 0 26px rgba(0, 255, 170, 0.14);
}

.donates-livepix-box {
  max-width: 560px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(0, 255, 170, 0.15), transparent 45%),
    rgba(0, 0, 0, 0.76);
  border: 1px solid rgba(0, 255, 170, 0.28);
  box-shadow: 0 0 30px rgba(0, 255, 170, 0.16);
}

.donates-livepix-frame {
  width: 100%;
  max-width: 400px;
  height: 600px;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.donates-badge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.ruby-card .donates-fixed-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(
      90deg,
      #4b008d,
      #8b2dff,
      #d9a7ff,
      #8b2dff
    );
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 0.95rem;
  font-weight: 1000;
  letter-spacing: 1px;
  box-shadow:
    0 0 14px rgba(185, 120, 255, 0.8),
    0 0 28px rgba(120, 0, 255, 0.35);
}

/* Upgrade Hall Rubi — VIP Premium */

.ruby-card {
  transform: translateY(0);
  animation: rubyPulseVip 2.8s ease-in-out infinite;
}

.ruby-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow:
    0 0 28px rgba(220, 150, 255, 0.85),
    0 0 70px rgba(140, 0, 255, 0.55),
    0 28px 55px rgba(0, 0, 0, 0.85);
}

.donates-badge-box {
  gap: 4px;
  margin-top: 10px;
}

.ruby-card .donates-badge {
  margin-top: 0;
  padding: 9px 18px;
  font-size: 0.78rem;
  border-radius: 999px 999px 10px 10px;
  background:
    linear-gradient(
      90deg,
      #24003f,
      #7c14ff,
      #e2b2ff,
      #7c14ff,
      #24003f
    );
  background-size: 260% 100%;
  animation: rubyBadgeMove 2.6s linear infinite;
}

.ruby-card .donates-fixed-value {
  margin-top: -2px;
  padding: 10px 22px;
  border-radius: 10px 10px 999px 999px;
  color: #25003f;
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #f0d4ff,
      #b95cff,
      #f0d4ff,
      #ffffff
    );
  background-size: 260% 100%;
  animation: rubyBadgeMove 2.4s linear infinite;
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  font-weight: 1000;
  text-shadow: 0 0 10px rgba(255,255,255,0.75);
  box-shadow:
    0 0 16px rgba(230, 170, 255, 0.95),
    0 0 38px rgba(160, 40, 255, 0.65),
    inset 0 0 16px rgba(255,255,255,0.45);
}

.ruby-card::before {
  animation: rubyGlowSpin 3.8s linear infinite;
  opacity: 0.48;
}

.ruby-card::after {
  animation: rubyShine 2.2s ease-in-out infinite;
}

@keyframes rubyPulseVip {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(200, 120, 255, 0.45),
      0 0 42px rgba(125, 0, 255, 0.28),
      0 20px 42px rgba(0, 0, 0, 0.75);
  }

  50% {
    box-shadow:
      0 0 30px rgba(230, 170, 255, 0.85),
      0 0 75px rgba(145, 0, 255, 0.55),
      0 22px 46px rgba(0, 0, 0, 0.82);
  }
}

@keyframes rubyBadgeMove {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 260% 50%;
  }
}

/* Efeitos extras na imagem do Hall Rubi */

.ruby-card .donates-avatar {
  animation:
    rubyImageFloat 2.8s ease-in-out infinite,
    rubyImageGlow 2.2s ease-in-out infinite;
}

.ruby-card .donates-card-inner::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 135px;
  height: 135px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(210, 130, 255, 0.45), transparent 62%);
  filter: blur(10px);
  z-index: -1;
  animation: rubyAuraPulse 2.4s ease-in-out infinite;
}

@keyframes rubyImageFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.06);
  }
}

@keyframes rubyImageGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px rgba(220, 160, 255, 0.95))
      drop-shadow(0 0 28px rgba(150, 0, 255, 0.75));
  }

  50% {
    filter:
      drop-shadow(0 0 22px rgba(255, 220, 255, 1))
      drop-shadow(0 0 44px rgba(190, 40, 255, 0.95))
      drop-shadow(0 0 70px rgba(120, 0, 255, 0.65));
  }
}

@keyframes rubyAuraPulse {
  0%, 100% {
    opacity: 0.45;
    transform: translateX(-50%) scale(0.9);
  }

  50% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1.18);
  }
}

/* ==================================================
   HALL DIAMANTE — PREMIUM
================================================== */

.diamond-card {
  transform: translateY(0);
  animation: diamondPulseVip 3.2s ease-in-out infinite;
}

.diamond-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow:
    0 0 28px rgba(170, 235, 255, 0.85),
    0 0 70px rgba(0, 180, 255, 0.45),
    0 28px 55px rgba(0, 0, 0, 0.85);
}

.diamond-section .donates-title-box {
  position: relative;
  overflow: hidden;
  border-color: rgba(170, 235, 255, 0.45);
  background:
    radial-gradient(circle at top, rgba(120, 220, 255, 0.18), transparent 45%),
    rgba(0, 10, 18, 0.90);
  box-shadow:
    0 0 22px rgba(120, 220, 255, 0.25),
    0 0 55px rgba(0, 150, 255, 0.14);
}

.diamond-section .donates-title-box h2 {
  color: #e8fbff;
  text-shadow:
    0 0 10px rgba(170, 235, 255, 0.95),
    0 0 28px rgba(0, 170, 255, 0.55),
    0 0 45px rgba(255,255,255,0.18);
}

.diamond-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background:
    radial-gradient(circle at 50% 0%, rgba(200, 245, 255, 0.24), transparent 24%),
    radial-gradient(circle at 15% 20%, rgba(120, 220, 255, 0.18), transparent 28%),
    radial-gradient(circle at 85% 35%, rgba(0, 120, 255, 0.20), transparent 32%),
    linear-gradient(180deg, rgba(0, 25, 40, 0.99), rgba(0, 0, 0, 0.99));
  border: 1px solid rgba(190, 245, 255, 0.45);
  box-shadow:
    0 0 18px rgba(140, 230, 255, 0.28),
    0 0 42px rgba(0, 170, 255, 0.18),
    0 20px 42px rgba(0, 0, 0, 0.75);
}

.diamond-card::before {
  content: "";
  position: absolute;
  inset: -45%;
  opacity: 0.26;
  background:
    conic-gradient(
      from 180deg,
      transparent,
      rgba(255,255,255,0.14),
      rgba(120,220,255,0.24),
      transparent
    );
  animation: diamondGlowSpin 6s linear infinite;
  pointer-events: none;
}

.diamond-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,0.10) 45%,
      transparent 70%
    );
  transform: translateX(-120%);
  animation: diamondShine 4s ease-in-out infinite;
}

.diamond-card .donates-avatar {
  width: 118px;
  height: 118px;
  animation:
    diamondImageFloat 3.4s ease-in-out infinite,
    diamondImageGlow 3s ease-in-out infinite;
}

.diamond-card .donates-card-inner::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 135px;
  height: 135px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(170, 235, 255, 0.26), transparent 62%);
  filter: blur(10px);
  z-index: -1;
  animation: diamondAuraPulse 3s ease-in-out infinite;
}

.diamond-card .donates-name {
  color: #ffffff;
  font-size: 1.45rem;
  text-shadow:
    0 0 10px rgba(255,255,255,0.45),
    0 0 18px rgba(170,235,255,0.75),
    0 0 34px rgba(0,170,255,0.45);
}

.diamond-card .donates-badge {
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  color: #00212d;
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #b9f4ff,
      #69dfff,
      #b9f4ff,
      #ffffff
    );
  background-size: 260% 100%;
  animation: diamondBadgeMove 3s linear infinite;
  border: 1px solid rgba(255,255,255,0.65);
  font-size: 0.82rem;
  font-weight: 1000;
  box-shadow:
    0 0 16px rgba(170,235,255,0.75),
    0 0 34px rgba(0,170,255,0.28),
    inset 0 0 16px rgba(255,255,255,0.34);
}

/* ANIMAÇÕES */

@keyframes diamondPulseVip {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(140, 230, 255, 0.28),
      0 0 42px rgba(0, 170, 255, 0.18),
      0 20px 42px rgba(0, 0, 0, 0.75);
  }

  50% {
    box-shadow:
      0 0 28px rgba(200,245,255,0.55),
      0 0 75px rgba(0,180,255,0.32),
      0 22px 46px rgba(0,0,0,0.82);
  }
}

@keyframes diamondGlowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes diamondShine {
  0% {
    transform: translateX(-130%);
  }

  45% {
    transform: translateX(130%);
  }

  100% {
    transform: translateX(130%);
  }
}

@keyframes diamondBadgeMove {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 260% 50%;
  }
}

@keyframes diamondImageFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1.04);
  }
}

@keyframes diamondImageGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(200,245,255,0.75))
      drop-shadow(0 0 24px rgba(0,170,255,0.38));
  }

  50% {
    filter:
      drop-shadow(0 0 18px rgba(255,255,255,0.85))
      drop-shadow(0 0 42px rgba(120,220,255,0.65));
  }
}

@keyframes diamondAuraPulse {
  0%, 100% {
    opacity: 0.34;
    transform: translateX(-50%) scale(0.92);
  }

  50% {
    opacity: 0.75;
    transform: translateX(-50%) scale(1.12);
  }
}

/* Valor Hall Diamante */

.diamond-card .donates-badge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

.diamond-card .diamond-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: -2px;

  padding: 10px 22px;

  border-radius: 10px 10px 999px 999px;
  color: #00273a;
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #d8f8ff,
      #7fe7ff,
      #d8f8ff,
      #ffffff
    );

  background-size: 260% 100%;

  animation: diamondBadgeMove 3s linear infinite;

  border: 1px solid rgba(255,255,255,0.75);

  font-size: 1rem;
  font-weight: 1000;

  text-shadow:
    0 0 10px rgba(255,255,255,0.75);

  box-shadow:
    0 0 16px rgba(180,240,255,0.85),
    0 0 34px rgba(0,170,255,0.38),
    inset 0 0 14px rgba(255,255,255,0.45);
}

.donates-ruby-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.donates-ruby-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;

  filter:
    drop-shadow(0 0 10px rgba(210, 130, 255, 0.9))
    drop-shadow(0 0 26px rgba(130, 0, 255, 0.7));

  animation:
    rubyTitleFloat 2.5s ease-in-out infinite,
    rubyTitleGlow 2s ease-in-out infinite;
}

@keyframes rubyTitleFloat {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes rubyTitleGlow {

  0%, 100% {

    filter:
      drop-shadow(0 0 10px rgba(210, 130, 255, 0.9))
      drop-shadow(0 0 26px rgba(130, 0, 255, 0.7));
  }

  50% {

    filter:
      drop-shadow(0 0 18px rgba(255, 220, 255, 1))
      drop-shadow(0 0 44px rgba(170, 0, 255, 1));
  }
}

.donates-diamond-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.donates-diamond-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;

  filter: none;

  animation:
    diamondTitleFloat 2.8s ease-in-out infinite;
}

@keyframes diamondTitleFloat {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes diamondTitleGlow {

  0%, 100% {

    filter:
      drop-shadow(0 0 10px rgba(170, 235, 255, 0.9))
      drop-shadow(0 0 26px rgba(0, 170, 255, 0.7));
  }

  50% {

    filter:
      drop-shadow(0 0 18px rgba(255,255,255,1))
      drop-shadow(0 0 44px rgba(0,170,255,1));
  }
}

/* Correção final: título Hall Diamante igual ao Rubi, sem card */

.diamond-section .donates-title-box {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
}

.diamond-section .donates-title-box h2 {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow:
    0 0 10px rgba(170, 235, 255, 0.9),
    0 0 26px rgba(0, 170, 255, 0.65) !important;
}

.diamond-section .donates-title-box p {
  background: transparent !important;
  box-shadow: none !important;
}

/* LivePix Diário sem card */

.daily-section .donates-title-box {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  padding: 0 !important;

  margin-bottom: 18px !important;
}

.daily-section .donates-title-box h2 {

  text-shadow:
    0 0 10px rgba(0, 255, 170, 0.85),
    0 0 26px rgba(0, 255, 170, 0.55);
}

/* LivePix Semanal sem card */

.weekly-section .donates-title-box {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  padding: 0 !important;

  margin-bottom: 18px !important;
}

.weekly-section .donates-title-box h2 {

  text-shadow:
    0 0 10px rgba(255, 215, 120, 0.85),
    0 0 26px rgba(255, 190, 0, 0.55);
}

/* Alinhar todos os cards do Hall Diamante */

.diamond-grid {
  align-items: stretch;
}

.diamond-card {
  min-height: 330px !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diamond-card .donates-card-inner {
  width: 100%;
  min-height: 285px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.diamond-card .donates-name {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
}

.diamond-card .donates-badge-box {
  margin-top: auto !important;
}

/* Alinhar todos os cards do Hall Rubi */

.ruby-grid {
  align-items: stretch;
}

.ruby-card {
  min-height: 330px !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ruby-card .donates-card-inner {
  width: 100%;
  min-height: 285px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ruby-card .donates-name {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
}

.ruby-card .donates-badge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin-top: auto !important;
}

/* Centralização LivePix Diário */

.daily-section .donates-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.daily-section .donates-title-box h2,
.daily-section .donates-title-box p {
  text-align: center;
}

/* Card temporário premium do Hall Rubi */

.ruby-placeholder-card {
  border: 1px solid rgba(255, 220, 255, 0.9) !important;
  box-shadow:
    0 0 28px rgba(230, 170, 255, 0.95),
    0 0 80px rgba(145, 0, 255, 0.75),
    0 0 130px rgba(90, 0, 180, 0.42),
    0 28px 60px rgba(0, 0, 0, 0.95) !important;
}

.ruby-placeholder-card .donates-name {
  font-size: 1.55rem !important;
  color: #ffffff !important;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 26px rgba(225, 150, 255, 1),
    0 0 52px rgba(150, 0, 255, 0.95) !important;
  animation: rubyPlaceholderTextPulse 2s ease-in-out infinite;
}

.ruby-placeholder-extra {
  margin-top: 16px;
  padding: 9px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(40, 0, 70, 0.95),
      rgba(160, 50, 255, 0.95),
      rgba(255, 210, 255, 0.95),
      rgba(160, 50, 255, 0.95),
      rgba(40, 0, 70, 0.95)
    );
  background-size: 280% 100%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 18px rgba(225, 160, 255, 0.9),
    0 0 44px rgba(140, 0, 255, 0.55),
    inset 0 0 14px rgba(255, 255, 255, 0.28);
  animation:
    rubyBadgeMove 2.2s linear infinite,
    rubyPlaceholderExtraPulse 2s ease-in-out infinite;
}

.ruby-placeholder-card .donates-avatar {
  width: 130px !important;
  height: 130px !important;
  animation:
    rubyImageFloat 2.3s ease-in-out infinite,
    rubyImageGlow 1.8s ease-in-out infinite;
}

@keyframes rubyPlaceholderTextPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes rubyPlaceholderExtraPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Correção definitiva alinhamento Rubi */

.ruby-card .donates-badge-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
}

.ruby-card .donates-badge,
.ruby-card .donates-fixed-value {

  width: 255px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

.ruby-card .donates-badge {

  border-radius:
    999px
    999px
    10px
    10px !important;

  margin-bottom: -2px !important;
}

.ruby-card .donates-fixed-value {

  border-radius:
    10px
    10px
    999px
    999px !important;

  margin-top: 0 !important;
}

/* ==================================================
   HALL RUBI — EFEITOS LENDÁRIOS
================================================== */

.ruby-card {
  position: relative;
  overflow: hidden;
}

/* FUMAÇA ROXA */

.ruby-card::before {
  content: "";

  position: absolute;

  width: 220%;
  height: 220%;

  top: -60%;
  left: -60%;

  background:
    radial-gradient(
      circle,
      rgba(180, 0, 255, 0.22),
      transparent 60%
    );

  filter: blur(45px);

  animation:
    rubySmokeMove 8s linear infinite;

  pointer-events: none;

  z-index: 0;
}

/* PARTÍCULAS */

.ruby-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1px),
    radial-gradient(circle, rgba(220,120,255,0.75) 1px, transparent 1px),
    radial-gradient(circle, rgba(170,0,255,0.85) 1px, transparent 1px);

  background-size:
    90px 90px,
    130px 130px,
    180px 180px;

  animation:
    rubyParticlesMove 14s linear infinite;

  opacity: 0.65;

  pointer-events: none;

  z-index: 1;
}

/* CONTEÚDO FICA NA FRENTE */

.ruby-card .donates-card-inner {
  position: relative;
  z-index: 2;
}

/* AURA INSANA */

.ruby-card .donates-card-inner::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: 20px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 120, 255, 0.42),
      rgba(140, 0, 255, 0.22),
      transparent 70%
    );

  filter: blur(20px);

  animation:
    rubyAuraBoss 2.5s ease-in-out infinite;

  z-index: -1;
}

/* BRILHO EXAGERADO */

.ruby-card {
  box-shadow:
    0 0 18px rgba(220,120,255,0.65),
    0 0 55px rgba(170,0,255,0.45),
    0 0 120px rgba(100,0,180,0.28),
    inset 0 0 40px rgba(255,255,255,0.04);
}

/* BORDA ENERGIA */

.ruby-card {
  border:
    1px solid rgba(255, 180, 255, 0.75);
}

/* RUBY PNG MAIS ABSURDA */

.ruby-card .donates-avatar {

  filter:
    drop-shadow(0 0 15px rgba(255,255,255,0.95))
    drop-shadow(0 0 38px rgba(210,0,255,0.95))
    drop-shadow(0 0 80px rgba(120,0,255,0.75));

  animation:
    rubyImageFloat 2s ease-in-out infinite,
    rubyImageGlow 1.6s ease-in-out infinite,
    rubyCrystalShake 5s ease-in-out infinite;
}

/* TEXTO LENDÁRIO */

.ruby-card .donates-name {

  letter-spacing: 1px;

  text-shadow:
    0 0 10px rgba(255,255,255,0.95),
    0 0 26px rgba(225,120,255,1),
    0 0 60px rgba(140,0,255,1);
}

/* BADGES MAIS INSANAS */

.ruby-card .donates-badge,
.ruby-card .donates-fixed-value {

  box-shadow:
    0 0 16px rgba(255,255,255,0.65),
    0 0 34px rgba(200,0,255,0.85),
    0 0 65px rgba(130,0,255,0.55),
    inset 0 0 18px rgba(255,255,255,0.25);
}

/* FLASH DE ENERGIA */

.ruby-card .donates-badge::before,
.ruby-card .donates-fixed-value::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.45),
      transparent
    );

  transform: translateX(-120%);

  animation:
    rubyEnergyFlash 2.5s ease-in-out infinite;
}

/* ANIMAÇÕES */

@keyframes rubySmokeMove {

  0% {
    transform:
      rotate(0deg)
      translateY(0);
  }

  100% {
    transform:
      rotate(360deg)
      translateY(-20px);
  }
}

@keyframes rubyParticlesMove {

  0% {
    background-position:
      0 0,
      0 0,
      0 0;
  }

  100% {
    background-position:
      0 -220px,
      0 -300px,
      0 -420px;
  }
}

@keyframes rubyAuraBoss {

  0%, 100% {

    opacity: 0.55;

    transform:
      translateX(-50%)
      scale(1);
  }

  50% {

    opacity: 1;

    transform:
      translateX(-50%)
      scale(1.18);
  }
}

@keyframes rubyCrystalShake {

  0%, 100% {
    transform:
      rotate(0deg);
  }

  25% {
    transform:
      rotate(1deg);
  }

  75% {
    transform:
      rotate(-1deg);
  }
}

@keyframes rubyEnergyFlash {

  0% {
    transform: translateX(-140%);
  }

  45% {
    transform: translateX(140%);
  }

  100% {
    transform: translateX(140%);
  }
}

/* Login Donates padronizado */

.donates-login-form {
  grid-template-columns: 1fr !important;
}

.donates-login-form input {
  width: 100%;
}

.donates-login-form button {
  width: 100%;
}

/* ==================================================
   OTIMIZAÇÃO MOBILE — TOP DONATES
   Mantém visual bonito, mas deixa leve no celular
================================================== */

@media (max-width: 768px) {

  .ruby-card::before,
  .ruby-card::after,
  .diamond-card::before,
  .diamond-card::after {
    animation: none !important;
    opacity: 0.18 !important;
    filter: blur(18px) !important;
  }

  .ruby-card,
  .diamond-card {
    animation: none !important;
    box-shadow:
      0 0 28px rgba(160, 70, 255, 0.28),
      0 18px 34px rgba(0, 0, 0, 0.65) !important;
  }

  .diamond-card {
    box-shadow:
      0 0 24px rgba(120, 220, 255, 0.22),
      0 18px 34px rgba(0, 0, 0, 0.65) !important;
  }

  .ruby-card .donates-avatar,
  .diamond-card .donates-avatar,
  .donates-ruby-icon,
  .donates-diamond-icon {
    animation: none !important;
    filter:
      drop-shadow(0 0 14px rgba(255,255,255,0.45)) !important;
  }

  .ruby-card .donates-card-inner::before,
  .ruby-card .donates-card-inner::after,
  .diamond-card .donates-card-inner::before,
  .diamond-card .donates-card-inner::after {
    animation: none !important;
    opacity: 0.25 !important;
    filter: blur(16px) !important;
  }

  .ruby-card .donates-badge,
  .ruby-card .donates-fixed-value,
  .diamond-card .donates-badge,
  .diamond-card .donates-fixed-value {
    animation: none !important;
    box-shadow:
      0 0 14px rgba(255,255,255,0.18),
      inset 0 0 10px rgba(255,255,255,0.12) !important;
  }

  .daily-section .donates-livepix-box::before,
  .daily-section .donates-livepix-box::after {
    animation: none !important;
    opacity: 0.15 !important;
  }

  .donates-livepix-box {
    box-shadow:
      0 0 18px rgba(0,255,180,0.08) !important;
  }

  .donates-livepix-frame {
    height: 560px;
  }

  .donates-card {
    min-height: 300px !important;
  }

  .ruby-card .donates-name,
  .diamond-card .donates-name {
    font-size: 1.25rem !important;
  }
}

/* LOGIN / ADMIN DONATES IGUAL AOS OUTROS SITES */

.donates-admin-overlay:not(.hidden){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  z-index:999999 !important;
}

.donates-admin-modal{
  width:95% !important;
  max-width:1050px !important;
  max-height:88vh !important;
  overflow-y:auto !important;
  position:relative !important;
  margin:0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(40,0,0,.96),
      rgba(8,8,8,.98)
    ) !important;

  border:1px solid rgba(255,0,0,.35) !important;
  border-radius:30px !important;
  padding:34px !important;

  box-shadow:
    0 0 45px rgba(255,0,0,.35),
    inset 0 0 18px rgba(255,255,255,.04) !important;
}

.donates-admin-modal h2{
  color:#ff2f2f !important;
  font-size:42px !important;
  font-weight:900 !important;
  text-align:left !important;
  margin-bottom:26px !important;
  padding-right:55px !important;
}

.donates-login-form{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
}

.donates-login-form input,
.donates-login-form button{
  width:100% !important;
}

@media(max-width:900px){
  .donates-admin-modal{
    width:100% !important;
    max-height:90vh !important;
    padding:22px !important;
  }

  .donates-admin-modal h2{
    font-size:34px !important;
  }
}