/* ============================================================
   CaiuNaNet — engajamento: badges (VIP/nível/verificação), painel de
   presentes, animação de presente e ranking.
   ============================================================ */

/* ---------- badges ---------- */
.ubadges{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:1px}
.vipbadge{height:18px;width:auto;display:inline-block;vertical-align:middle}
.verifytag{height:17px;width:auto;display:inline-block;vertical-align:middle}
.lvlbadge{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;vertical-align:middle}
.lvlbadge img{width:100%;height:100%;object-fit:contain}
.lvlbadge b{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:850;
  color:#3a2600;text-shadow:0 1px 1px rgba(255,255,255,.5);line-height:1}
.dvip{display:inline-flex;align-items:center;margin-right:2px}

/* ---------- painel de presentes ---------- */
.giftsheet{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center}
.giftsheet[hidden]{display:none}
.gs-scrim{position:absolute;inset:0;background:rgba(4,4,6,.6);backdrop-filter:blur(3px);animation:gsfade .2s ease}
.gs-panel{position:relative;width:min(100%,560px);max-height:82vh;display:flex;flex-direction:column;
  background:var(--surface,#1a1a1a);border:1px solid var(--line-2,#2a2a2a);border-radius:20px 20px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.5);animation:gsup .28s cubic-bezier(.2,.9,.3,1.1)}
@media(min-width:640px){.giftsheet{align-items:center}.gs-panel{border-radius:20px}}
@keyframes gsfade{from{opacity:0}to{opacity:1}}
@keyframes gsup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.gs-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px}
.gs-head b{font-size:16px;font-weight:800}
.gs-bal{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  background:var(--surface-2,#242424);font-size:13px;font-weight:800;color:var(--acc,#f5c518)}
.gs-bal img{width:16px;height:16px}
.gs-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2,#242424);
  font-size:20px;color:var(--txt-2,#ccc)}
.gs-tabs{display:flex;gap:6px;padding:0 16px 8px;overflow-x:auto;scrollbar-width:none}
.gs-tabs::-webkit-scrollbar{display:none}
.gs-tab{flex:none;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;
  background:var(--surface-2,#242424);color:var(--txt-2,#bbb)}
.gs-tab.on{background:var(--acc,#f5c518);color:#1a1200}
.gs-grid{flex:1;min-height:120px;overflow-y:auto;display:grid;gap:8px;padding:8px 16px 12px;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));scrollbar-width:thin}
.gs-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 8px;border-radius:14px;
  border:1.5px solid transparent;background:var(--surface-2,#202020);transition:border-color .12s,background .12s}
.gs-item:hover{background:var(--surface-3,#2a2a2a)}
.gs-item.on{border-color:var(--acc,#f5c518);background:linear-gradient(160deg,rgba(245,197,24,.12),transparent)}
.gs-item img{width:56px;height:56px;object-fit:contain}
.gs-item .gn{font-size:10.5px;font-weight:600;color:var(--txt-2,#cfcfcf);text-align:center;line-height:1.15;
  max-height:26px;overflow:hidden}
.gs-item .gp{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--acc,#f5c518)}
.gs-item .gp img{width:12px;height:12px}
.gs-foot{display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2,#242424)}
.gs-qty{display:flex;align-items:center;gap:2px;background:var(--surface-2,#242424);border-radius:999px;padding:3px}
.gs-qty button{width:30px;height:30px;border-radius:50%;font-size:17px;font-weight:800;color:#fff}
.gs-qty i{min-width:34px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.gs-send{flex:1;height:46px;border-radius:13px;background:var(--acc,#f5c518);color:#1a1200;font-size:15px;
  font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.gs-send img{width:16px;height:16px}
.gs-send.need{background:var(--surface-3,#333);color:#fff}
.gs-send[disabled]{opacity:.5;pointer-events:none}
.gs-load{grid-column:1/-1;display:grid;place-items:center;padding:30px}
.gs-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.2);
  border-top-color:var(--acc,#f5c518);animation:gsspin .7s linear infinite;display:inline-block}
@keyframes gsspin{to{transform:rotate(360deg)}}

/* ---------- animação do presente ---------- */
.gift-fly{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none}
.gift-fly img{width:min(46%,220px);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5));
  animation:giftpop 2.2s cubic-bezier(.2,.8,.3,1) forwards}
.gift-fly b{position:absolute;bottom:22%;font-size:34px;font-weight:900;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8);animation:giftpop 2.2s ease forwards}
@keyframes giftpop{
  0%{opacity:0;transform:scale(.4) translateY(30px)}
  15%{opacity:1;transform:scale(1.05) translateY(0)}
  70%{opacity:1;transform:scale(1) translateY(-6px)}
  100%{opacity:0;transform:scale(1.05) translateY(-40px)}
}

/* ---------- ranking ---------- */
.rank{padding-bottom:40px}
.rank-hd{padding:22px var(--gut) 6px}
.rank-hd h1{font-size:clamp(22px,5vw,28px);font-weight:850;letter-spacing:-.03em}
.rank-hd p{margin-top:5px;font-size:13.5px;color:var(--txt-3,#9a9a9a)}
.rank-period{display:flex;gap:8px;padding:8px var(--gut) 14px}
.rank-period .rp{padding:7px 15px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--surface-2,#222);color:var(--txt-2,#bbb)}
.rank-period .rp.on{background:var(--acc,#f5c518);color:#1a1200}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;padding:14px var(--gut) 8px}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 14px;border-radius:18px;
  background:var(--surface,#1b1b1b);border:1px solid var(--line-2,#2a2a2a);position:relative;text-align:center}
.pod-1{order:2;background:linear-gradient(180deg,rgba(245,197,24,.18),transparent 60%),var(--surface,#1b1b1b);
  border-color:rgba(245,197,24,.5);transform:translateY(-8px)}
.pod-2{order:1;background:linear-gradient(180deg,rgba(200,200,210,.14),transparent 60%),var(--surface,#1b1b1b)}
.pod-3{order:3;background:linear-gradient(180deg,rgba(205,127,50,.16),transparent 60%),var(--surface,#1b1b1b)}
.pod .crown{position:absolute;top:-10px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:900}
.pod-1 .crown{background:linear-gradient(150deg,#f8d64e,#e0a500);color:#3a2600}
.pod-2 .crown{background:linear-gradient(150deg,#e8e8ee,#b8b8c2);color:#333}
.pod-3 .crown{background:linear-gradient(150deg,#e0a06a,#c07a34);color:#3a2200}
.pod .pav .av{width:64px;height:64px}
.pod-1 .pav .av{width:78px;height:78px}
.pod .pn{font-size:13.5px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .pc{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:850;color:var(--acc,#f5c518)}
.pod .pc img{width:15px;height:15px}
.rank-list{display:flex;flex-direction:column;padding:6px var(--gut) 0}
.rrow{display:flex;align-items:center;gap:12px;padding:11px 6px;border-top:1px solid var(--line-2,#222)}
.rrow .rpos{width:26px;text-align:center;font-size:15px;font-weight:850;color:var(--txt-3,#8f8f8f);font-variant-numeric:tabular-nums}
.rrow .rav .av{width:42px;height:42px}
.rrow .rnm{flex:1;min-width:0;display:flex;flex-direction:column}
.rrow .rnm b{font-size:14px;font-weight:750;display:inline-flex;align-items:center;gap:5px}
.rrow .rnm .rsub{font-size:11.5px;color:var(--txt-3,#8f8f8f)}
.rrow .rcoins{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:850;color:var(--acc,#f5c518);font-variant-numeric:tabular-nums}
.rrow .rcoins img{width:15px;height:15px}
.rank-me{margin:16px var(--gut) 0;padding:13px 16px;border-radius:14px;text-align:center;font-size:13px;
  background:linear-gradient(140deg,rgba(245,197,24,.12),transparent),var(--surface,#1b1b1b);
  border:1px solid var(--acc-line,rgba(245,197,24,.4))}
.rank-me b{color:var(--acc,#f5c518)}

/* ---------- perfil: progresso de nível + presentes recebidos ---------- */
.lvlprog{display:flex;align-items:center;gap:8px;margin-top:12px;max-width:340px}
.lvlprog .lvlbadge{width:26px;height:26px}
.lvlprog .lvlbadge b{font-size:10px}
.lvlbar{flex:1;height:8px;border-radius:999px;background:var(--surface-2,#242424);overflow:hidden}
.lvlbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f8d64e,#e0a500);transition:width .4s var(--ease)}
.lvlx{font-size:11px;font-weight:750;color:var(--txt-3,#9a9a9a);white-space:nowrap;font-variant-numeric:tabular-nums}

.pgifts{padding:14px var(--gut) 2px}
.pgifts-h{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:750;color:var(--txt-2,#cfcfcf);margin-bottom:9px}
.pgifts-h .mi{color:var(--acc,#f5c518);font-size:18px}
.pgift-row{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.pgift-row::-webkit-scrollbar{display:none}
.pgift{flex:none;position:relative;width:56px;height:56px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface-2,#202020);border:1px solid var(--line-2,#262626)}
.pgift img{width:46px;height:46px;object-fit:contain}
.pgift b{position:absolute;right:-3px;bottom:-5px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:850;
  background:var(--acc,#f5c518);color:#1a1200}