/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  THE MASK CUP — RANKING                                              ║
   ║  Mesma linguagem das outras páginas (gamer.css). Pódio em ouro,      ║
   ║  prata e bronze; a linha do jogador logado fica destacada em teal.   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.rk { --gutter: clamp(16px, 4vw, 48px); --cut: 12px; --bronze: #C7875A; padding-bottom: clamp(64px, 8vw, 110px); } [data-theme="light"] .rk {/* tema-claro:auto */ --bronze: #8d5630; }
.rk-wrap { max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }

/* ═══════════════ TOPO ═══════════════ */
.rk-hero {
  padding: clamp(36px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); margin-bottom: 18px;
  background:
    radial-gradient(55% 120% at 50% 0%, rgba(217,169,76,.16), transparent 62%),
    radial-gradient(40% 100% at 90% 10%, rgba(79,163,157,.14), transparent 62%);
  border-bottom: 1px solid var(--border);
}
.rk-title { margin: 12px 0 8px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(46px, 7vw, 84px); line-height: .92; color: var(--silver-hi); }
.rk-sub { margin: 0; max-width: 600px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.rk-stats { display: flex; gap: 8px; margin-top: 20px; }
.rk-stats div {
  display: flex; flex-direction: column; min-width: 100px; padding: 10px 14px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  background: linear-gradient(155deg, #121418, #0B0C0F); background: linear-gradient(155deg, light-dark(#fefefe, #121418), light-dark(#f5f6f8, #0B0C0F)); box-shadow: inset 0 0 0 1px var(--border);
}
.rk-stats b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 30px; line-height: 1; color: var(--silver-hi); }
.rk-stats span { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-mute); }

/* ═══════════════ DESTAQUES ═══════════════ */
.rk-hl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 22px; }
.rk-hl:empty { display: none; }
.rk-hl-card {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 0; cursor: pointer; text-align: left; color: inherit;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  background: radial-gradient(120% 100% at 0% 0%, rgba(217,169,76,.10), transparent 60%), linear-gradient(155deg, #131519, #0B0C0F); background: radial-gradient(120% 100% at 0% 0%, rgba(217,169,76,.10), transparent 60%), linear-gradient(155deg, light-dark(#ffffff, #131519), light-dark(#f5f6f8, #0B0C0F));
  box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .15s, transform .15s;
}
.rk-hl-card:hover { box-shadow: inset 0 0 0 1px rgba(217,169,76,.45); transform: translateY(-2px); }
.rk-hl-icon { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; color: var(--gold-hi); background: rgba(217,169,76,.12); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.rk-hl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-hl-text small { font-family: 'Rajdhani', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-mute); }
.rk-hl-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Rajdhani', sans-serif; font-size: 15px; color: var(--silver-hi); }
.rk-hl-card > b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 22px; color: var(--gold-hi); }

/* ═══════════════ ABAS + BUSCA ═══════════════ */
.rk-bar { display: flex; align-items: center; gap: 12px; }
.rk-tabs {
  display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border);
}
.rk-tabs::-webkit-scrollbar { display: none; }
.rk-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; background: none; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim);
  transition: background .15s, color .15s;
}
.rk-tab:hover { color: var(--silver-hi); background: rgba(194,200,208,.05); background: light-dark(rgba(14,20,28,.053), rgba(194,200,208,.05)); }
.rk-tab.active { color: #06110F; color: light-dark(#ffffff, #06110F); background: linear-gradient(100deg, var(--teal), var(--teal-hi)); }
.rk-tab:focus-visible { outline: 1px solid var(--teal); outline-offset: 2px; }
.rk-search { flex: 0 0 220px; display: flex; align-items: center; gap: 8px; padding: 0 10px; align-self: stretch; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-mute); }
.rk-search input { width: 100%; padding: 9px 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14px; }
.rk-search:focus-within { box-shadow: inset 0 0 0 1px var(--teal); }
.rk-note { margin: 12px 0 26px; font-size: 12.5px; color: var(--text-mute); }

/* ═══════════════ PÓDIO (degraus) ═══════════════ */
.rk-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 0 0 22px; }
.rk-podium:empty { display: none; }
.rk-pod { --medal: var(--silver); --glow: rgba(194,200,208,.22); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.rk-pod.is-1 { --medal: var(--gold); --glow: rgba(217,169,76,.34); }
.rk-pod.is-3 { --medal: var(--bronze); --glow: rgba(199,135,90,.26); }
.rk-pod-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px 18px; text-align: center;
  transition: transform .25s;
}
/* Brilho atrás do jogador: some antes de chegar nas bordas (sem linha reta) */
.rk-pod-card::before {
  content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: 8%; bottom: 0;
  background: radial-gradient(closest-side, var(--glow), transparent);
  filter: blur(18px);
}
.rk-pod:hover .rk-pod-card { transform: translateY(-4px); }
.rk-crown {
  position: absolute; top: -8px; width: 46px; height: 32px; fill: var(--gold-hi);
  filter: drop-shadow(0 0 12px rgba(217,169,76,.8)); animation: rk-crown 2.6s ease-in-out infinite;
}
@keyframes rk-crown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.rk-pod-avwrap {
  position: relative; padding: 4px; margin-top: 10px;
  background: conic-gradient(from 180deg, var(--medal), transparent 40%, var(--medal) 60%, transparent 90%, var(--medal));
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(0 8px 24px var(--glow));
}
@media (prefers-reduced-motion: reduce) { .rk-crown { animation: none; } }
.rk-pod-av { display: block; width: 76px; height: 76px; object-fit: cover; background: var(--bg2); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.rk-pod.is-1 .rk-pod-av { width: 104px; height: 104px; }
.rk-pod-name { max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Rajdhani', sans-serif; font-size: 18px; color: var(--silver-hi); }
.rk-pod.is-1 .rk-pod-name { font-size: 22px; }
.rk-pod-tags { display: flex; gap: 4px; min-height: 18px; }
.rk-pod-val { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 40px; line-height: 1; color: var(--medal); text-shadow: 0 0 22px var(--glow); }
.rk-pod.is-1 .rk-pod-val { font-size: 54px; }
.rk-pod-card small { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-mute); }
.rk-pod-step {
  position: relative; display: grid; place-items: center; height: 64px; overflow: hidden;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 38%, #15171b), #0B0C0F 95%); background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 38%, light-dark(#ffffff, #15171b)), light-dark(#f5f6f8, #0B0C0F) 95%);
  box-shadow: inset 0 2px 0 var(--medal);
}
.rk-pod.is-1 .rk-pod-step { height: 104px; }
.rk-pod.is-2 .rk-pod-step { height: 80px; }
.rk-pod-step::before { content: ''; position: absolute; inset: 0; opacity: .08; background: repeating-linear-gradient(-52deg, #fff 0 1px, transparent 1px 12px); }
.rk-pod-step span { position: relative; font-family: 'Bebas Neue', sans-serif; font-size: 58px; line-height: 1; color: var(--medal); opacity: .9; }
.rk-pod.is-1 .rk-pod-step span { font-size: 78px; }

/* ═══════════════ SUA POSIÇÃO ═══════════════ */
.rk-me {
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 12px 16px; text-decoration: none;
  background: rgba(79,163,157,.10); box-shadow: inset 0 0 0 1px rgba(79,163,157,.45);
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal-hi);
}
.rk-me[hidden] { display: none; }
.rk-me b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: .5px; }
.rk-me-val { margin-left: auto; color: var(--text-dim); }

/* ═══════════════ LISTA ═══════════════ */
.rk-list { display: flex; flex-direction: column; gap: 4px; }
.rk-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px repeat(3, 72px); align-items: center; gap: 10px;
  padding: 10px 14px; text-decoration: none; color: inherit;
  background: linear-gradient(155deg, #111316, #0B0C0F); background: linear-gradient(155deg, light-dark(#fcfdfd, #111316), light-dark(#f5f6f8, #0B0C0F)); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .15s;
}
.rk-row { position: relative; overflow: hidden; }
.rk-row::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w, 0%);
  background: linear-gradient(90deg, rgba(79,163,157,.15), var(--teal-hi)); transition: width .6s var(--ease-out-expo, ease);
}
.rk-row:hover { box-shadow: inset 0 0 0 1px var(--border-hi); transform: translateX(3px); }
.rk-row { transition: box-shadow .15s, transform .15s; }
.rk-row.is-top10 .rk-pos { color: var(--silver-hi); }
.rk-row.is-me { background: linear-gradient(155deg, rgba(79,163,157,.14), #0B0C0F); background: linear-gradient(155deg, rgba(79,163,157,.14), light-dark(#f5f6f8, #0B0C0F)); box-shadow: inset 2px 0 0 var(--teal-hi), inset 0 0 0 1px rgba(79,163,157,.35); }
.rk-pos { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--text-dim); text-align: center; }
.rk-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-player > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Rajdhani', sans-serif; font-size: 16px; color: var(--silver-hi); }
.rk-av { width: 38px; height: 38px; flex: 0 0 auto; object-fit: cover; background: var(--bg2); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.rk-tags { display: flex; gap: 4px; }
.rk-tag { padding: 1px 6px; font-family: 'Rajdhani', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(194,200,208,.08); background: light-dark(rgba(14,20,28,.084), rgba(194,200,208,.08)); color: var(--text-dim); }
.rk-tag.is-gold { display: inline-flex; align-items: center; gap: 3px; background: rgba(217,169,76,.14); color: var(--gold-hi); }
.rk-tag.is-lv { background: rgba(74,144,226,.14); color: #6fb1ff; color: light-dark(#1061c2, #6fb1ff); }
.rk-tag.is-pro { background: rgba(217,169,76,.14); color: var(--gold-hi); }
.rk-tag.is-me { background: rgba(79,163,157,.18); color: var(--teal-hi); }
.rk-main, .rk-col { display: flex; flex-direction: column; align-items: flex-end; }
.rk-main b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 26px; line-height: 1; color: var(--teal-hi); }
.rk-col b { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 13.5px; color: var(--silver-hi); }
.rk-main small, .rk-col small { font-family: 'Rajdhani', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-mute); }
.rk-empty { padding: 40px 20px; text-align: center; color: var(--text-dim); line-height: 1.6; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border); }
.rk-more { display: flex; margin: 16px auto 0; }
.rk-more[hidden] { display: none; }

/* ═══════════════ CELULAR ═══════════════ */
@media (max-width: 760px) {
  .rk-bar { flex-direction: column; align-items: stretch; gap: 0; }
  .rk-search { flex-basis: auto; order: -1; margin: 0 0 8px; padding-block: 2px; }
  .rk-hl { grid-template-columns: repeat(5, 72%); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .rk-hl-card { scroll-snap-align: start; }
  .rk-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rk-pod-card { padding: 22px 4px 12px; }
  .rk-pod-av { width: 54px; height: 54px; }
  .rk-pod.is-1 .rk-pod-av { width: 68px; height: 68px; }
  .rk-crown { width: 34px; height: 24px; top: -4px; }
  .rk-pod-name, .rk-pod.is-1 .rk-pod-name { font-size: 14px; }
  .rk-pod-val { font-size: 28px; }
  .rk-pod.is-1 .rk-pod-val { font-size: 34px; }
  .rk-pod-tags { display: none; }
  .rk-pod-step { height: 44px; }
  .rk-pod.is-2 .rk-pod-step { height: 56px; }
  .rk-pod.is-1 .rk-pod-step { height: 72px; }
  .rk-pod-step span { font-size: 38px; }
  .rk-pod.is-1 .rk-pod-step span { font-size: 50px; }
  .rk-row { grid-template-columns: 32px minmax(0, 1fr) 70px; }
  .rk-row .rk-col { display: none; }
  .rk-stats div { flex: 1; min-width: 0; }
}

/* ═══════════════ CAMPEONATO × MIX ═══════════════ */
.rk-mode { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 12px; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border); }
.rk-mode button {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; background: none; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim);
}
.rk-mode button:hover { color: var(--silver-hi); }
.rk-mode button.is-on { color: #140D02; color: light-dark(#ffffff, #140D02); background: linear-gradient(100deg, var(--gold), var(--gold-hi)); }
.rk-tab[hidden] { display: none; }

/* ═══════════════ EM QUALIFICAÇÃO (sem o mínimo de mapas) ═══════════════ */
.rk-pending-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 6px; padding-top: 14px; border-top: 1px dashed var(--border-hi); }
.rk-pending-head strong { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--silver); }
.rk-pending-head span { font-size: 12.5px; color: var(--text-mute); }
.rk-row.is-pending { opacity: .72; }
.rk-row.is-pending:hover { opacity: 1; }
.rk-row.is-pending .rk-main b { color: var(--text-dim); }
.rk-tag.is-min { color: var(--text-dim); background: rgba(194,200,208,.06); background: light-dark(rgba(14,20,28,.063), rgba(194,200,208,.06)); box-shadow: inset 0 0 0 1px var(--border-hi); }

/* MaskPro: nick dourado e moldura */
.rk-row.is-pro .rk-player strong, .rk-pod.is-pro .rk-pod-name { background: linear-gradient(96deg, var(--gold-hi), var(--gold) 55%, var(--gold-hi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk-row.is-pro .rk-av, .rk-pod.is-pro .rk-pod-av { box-shadow: none; outline: 0; filter: drop-shadow(0 0 0 transparent); }
.rk-row.is-pro .rk-av { padding: 2px; background: linear-gradient(150deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep)); }
.rk-pod.is-pro .rk-pod-av { padding: 3px; background: linear-gradient(150deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep)); }