/* =========================================================================
   Destaques da Comunidade (lobby): banner, patrocinadores em carrossel,
   Top Coins, Top Reputação e Dona & Desenvolvedora. Classes dc-.
   Sempre noite roxa (como o banner), nos dois temas do site.
   ========================================================================= */

.dc { --dc-fundo: linear-gradient(180deg, #24093c 0%, #1a062d 100%); --dc-borda: rgba(255, 92, 180, 0.22); --dc-borda-forte: rgba(255, 92, 180, 0.5); --dc-texto: #fff0fb; --dc-texto-2: #cdb3d9; --dc-texto-3: #9d7bb0; display: flex; flex-direction: column; gap: 14px; color: var(--dc-texto); }
.dc:empty { display: none; }
/* Enquanto os dados não chegam: os cards no tamanho final, com um brilho passando */
.dc-esqueleto .dc-card { min-height: 318px; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%) 0 0 / 300% 100%, var(--dc-fundo); animation: dc-carrega 1.4s ease-in-out infinite; }
@keyframes dc-carrega { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
@media (max-width: 760px) { .dc-esqueleto .dc-card { min-height: 200px; } }
.dc-moeda { display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc21a 50%, #e07b00); box-shadow: inset 0 0 0 2px rgba(224, 123, 0, 0.5); }

/* ---------- Banner (arte em img/banner-comunidade.webp) ---------- */
.dc-banner { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 0, 30, 0.3); }
.dc-banner img { display: block; width: 100%; aspect-ratio: 2063 / 284; object-fit: cover; }
.dc-banner-seta { position: absolute; left: 94.1%; top: 35%; width: 4.2%; aspect-ratio: 1; border-radius: 50%; transition: box-shadow 0.2s; }
.dc-banner-seta:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }

/* ---------- Grade dos cards ---------- */
.dc-grade { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
.dc-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px; border-radius: 20px; border: 1px solid var(--dc-borda); background: var(--dc-fundo); box-shadow: 0 10px 26px rgba(20, 0, 30, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); color: var(--dc-texto); text-decoration: none; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.dc-topo:hover { transform: translateY(-2px); border-color: var(--dc-borda-forte); box-shadow: 0 14px 30px rgba(20, 0, 30, 0.32), 0 0 0 1px rgba(255, 92, 180, 0.12); }
.dc-cab { display: flex; align-items: center; gap: 12px; }
.dc-cab > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dc-cab b { font-weight: 800; font-size: 16px; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-cab small { font-size: 13px; color: var(--dc-texto-2); }
.dc-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.dc-ic svg { width: 100%; height: 100%; }
.dc-ic .dc-moeda { width: 30px; height: 30px; }
.dc-ver { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--dc-borda-forte); background: rgba(255, 92, 180, 0.08); color: var(--dc-texto); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 0.15s; }
.dc-ver:hover { background: rgba(255, 92, 180, 0.2); }
.dc-ver .ic { width: 16px; height: 16px; }

/* ---------- Patrocinadores ---------- */
.dc-patrocinio .dc-cab { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.dc-carrossel { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 10px; margin-top: 16px; }
.dc-seta { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--dc-borda); background: rgba(255, 255, 255, 0.04); color: var(--dc-texto); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.dc-seta:hover { background: rgba(255, 92, 180, 0.18); border-color: var(--dc-borda-forte); }
.dc-seta .ic { width: 16px; height: 16px; }
.dc-janela-pat { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.dc-janela-pat:active { cursor: grabbing; }
.dc-fita { display: flex; gap: 12px; width: max-content; padding: 4px 0; will-change: transform; user-select: none; }
.dc-pat { flex: none; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.035); transition: border-color 0.2s, background 0.2s; }
.dc-pat:hover { border-color: var(--dc-borda-forte); background: rgba(255, 92, 180, 0.07); }
.dc-pat img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.18); background: #2a0a3d; pointer-events: none; }
.dc-pat b { max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 15px; }
.dc-pat > span { font-weight: 600; font-size: 14px; color: var(--dc-texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-pat-topo { display: grid; place-items: end center; height: 22px; }
.dc-coroa { width: 30px; height: 21px; }
.dc-pat-num { font-size: 13px; font-weight: 700; color: var(--dc-texto-3); }
.dc-pat.p1 { border-color: rgba(255, 194, 26, 0.55); background: linear-gradient(180deg, rgba(255, 194, 26, 0.14), rgba(255, 194, 26, 0.03)); }
.dc-pat.p1 img { border-color: #ffc21a; }
.dc-pat.p1 > span { color: #ffd34d; }
.dc-pat.p2 img { border-color: #c9b6ff; }
.dc-pat.p3 img { border-color: #ff8a5c; }
.dc-pontos { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.dc-pontos i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); cursor: pointer; transition: width 0.25s, background 0.25s; }
.dc-pontos i.ativo { width: 18px; background: #ff5cae; }
.dc:not(.anda) .dc-pat[aria-hidden], .dc:not(.anda) .dc-pontos { display: none; }
.dc:not(.anda) .dc-seta { visibility: hidden; }
.dc:not(.anda) .dc-janela-pat { -webkit-mask-image: none; mask-image: none; cursor: default; }
.dc:not(.anda) .dc-fita { margin: 0 auto; }
.dc-sem { margin: auto 0; padding: 22px 10px; text-align: center; font-size: 14px; color: var(--dc-texto-2); }
.dc-sem a { color: #ff8fcd; font-weight: 700; }

/* ---------- Top Coins, Top Reputação, Dona ---------- */
.dc-topo .dc-cab b { font-size: 14.5px; white-space: normal; line-height: 1.15; }
.dc-topo .dc-cab small { font-size: 12px; }
.dc-perfil { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; text-align: center; }
.dc-foto { position: relative; display: grid; place-items: center; width: 90px; height: 90px; margin-top: 8px; }
.dc-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.7); background: #2a0a3d; }
.dc-coroa-foto { position: absolute; top: -17px; left: 50%; width: 32px; height: 22px; transform: translateX(-50%); z-index: 1; }
.dc-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 17px; }
.dc-pilula { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 0, 20, 0.35); font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-pilula .dc-moeda { align-self: center; width: 20px; height: 20px; }
.dc-pilula svg { align-self: center; width: 20px; height: 20px; }
.dc-pilula small { font-weight: 600; font-size: 13px; color: var(--dc-texto-2); }
.dc-coins { background: radial-gradient(90% 60% at 50% 70%, rgba(255, 170, 30, 0.12), transparent 70%), var(--dc-fundo); }
.dc-coins .dc-foto img { border-color: #ffc21a; box-shadow: 0 0 0 4px rgba(255, 194, 26, 0.12); }
.dc-coins .dc-pilula { color: #ffd34d; border-color: rgba(255, 194, 26, 0.3); }
.dc-rep { background: radial-gradient(90% 60% at 50% 70%, rgba(168, 85, 247, 0.16), transparent 70%), var(--dc-fundo); }
.dc-rep .dc-foto img { border-color: #a855f7; box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.14); }
.dc-rep .dc-pilula { color: #e9d5ff; border-color: rgba(168, 85, 247, 0.35); }
.dc-dona { background: radial-gradient(90% 60% at 50% 70%, rgba(255, 61, 154, 0.14), transparent 70%), var(--dc-fundo); }
.dc-dona .dc-foto img { border-color: #ff5cae; box-shadow: 0 0 0 4px rgba(255, 92, 174, 0.14), 0 0 18px rgba(255, 92, 174, 0.25); }
.dc-insignias { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dc-ins { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
.dc-ins .ic { width: 14px; height: 14px; }
.dc-ins.dona { color: #fff; background: linear-gradient(135deg, #ff5cb8, #d9268a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.dc-ins.dev { color: #ff9ad2; border: 1px solid rgba(255, 92, 180, 0.55); background: rgba(255, 92, 180, 0.08); }

/* ---------- Ver todos ---------- */
.dc-janela-fundo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(10, 0, 20, 0.7); backdrop-filter: blur(4px); animation: dc-entra 0.2s ease-out; }
@keyframes dc-entra { from { opacity: 0; } }
.dc-janela { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(80vh, 720px); border-radius: 20px; border: 1px solid rgba(255, 92, 180, 0.35); background: linear-gradient(180deg, #24093c, #18052a); color: #fff0fb; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.dc-janela header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.dc-janela header > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dc-janela header b { font-weight: 800; font-size: 17px; text-transform: uppercase; }
.dc-janela header small { font-size: 13px; color: #cdb3d9; }
.dc-fechar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #fff; cursor: pointer; }
.dc-fechar .ic { width: 18px; height: 18px; transform: rotate(45deg); }
.dc-todos { overflow-y: auto; padding: 8px 10px 12px; }
.dc-todo { display: grid; grid-template-columns: 36px 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; }
.dc-todo:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
.dc-todo-pos { display: grid; place-items: center; font-weight: 800; color: #9d7bb0; }
.dc-todo img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.dc-todo div { display: flex; flex-direction: column; min-width: 0; }
.dc-todo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dc-todo small { font-size: 12px; color: #9d7bb0; }
.dc-todo-valor { font-weight: 800; font-variant-numeric: tabular-nums; }
.dc-todo.p1 .dc-todo-valor { color: #ffd34d; }

/* ---------- Telas menores ---------- */
@media (max-width: 1280px) {
  .dc-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dc-patrocinio { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dc-banner img { aspect-ratio: auto; height: 118px; object-position: 0% 50%; }
  .dc-banner-seta { display: none; }
  .dc-grade { grid-template-columns: 1fr; gap: 12px; }
  .dc-card { padding: 16px; }
  .dc-carrossel { grid-template-columns: minmax(0, 1fr); }
  .dc-seta { display: none; }
  .dc-pat { width: 116px; }
  .dc-ver { padding: 8px 12px; font-size: 13px; }
  .dc-cab small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Os três cards de topo viram uma linha: foto à esquerda, nome e valor ao lado */
  .dc-perfil { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 16px; row-gap: 6px; margin-top: 14px; text-align: left; }
  .dc-foto { grid-row: 1 / 3; width: 72px; height: 72px; margin-top: 6px; }
  .dc-nome { align-self: end; font-size: 16px; }
  .dc-pilula { align-self: start; padding: 6px 12px; font-size: 16px; }
  .dc-insignias { justify-content: flex-start; }
}