/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  THE MASK CUP — LINGUAGEM VISUAL GAMER v1                            ║
   ║                                                                      ║
   ║  Referência: a tela de RANKING, que o cliente aprovou.               ║
   ║  O que ela faz e o resto do site não fazia:                          ║
   ║    • profundidade por CAMADAS DE LUZ (brilhos radiais, não sombras)  ║
   ║    • gradientes multicoloridos em vez de fundos chapados             ║
   ║    • linhas/LEDs que dão sinal de "sistema vivo"                     ║
   ║                                                                      ║
   ║  Somado ao pedido: cantos CHANFRADOS (não arredondados), formas      ║
   ║  geométricas na composição e mescla de ouro + teal + prata.          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   1. CANTO CHANFRADO — a base da linguagem angular
   Substitui o border-radius por cortes em 45°, como painel de HUD.
═══════════════════════════════════════════════════════════════ */
.g-cut {
  --cut: 16px;
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
  border-radius: 0 !important;
}
.g-cut-sm { --cut: 10px; }
.g-cut-lg { --cut: 26px; }

/* Chanfro só no canto superior direito + inferior esquerdo (mais dinâmico) */
.g-cut-alt {
  --cut: 18px;
  clip-path: polygon(
    0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))
  );
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. PAINEL — o card padrão do site novo
   Camadas: gradiente de base + brilho de canto + borda de luz.
═══════════════════════════════════════════════════════════════ */
.g-panel {
  --cut: 16px;
  position: relative;
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
  background:
    /* brilho superior esquerdo (teal) */
    radial-gradient(120% 90% at 0% 0%, rgba(79,163,157,.13), transparent 52%),
    /* brilho inferior direito (ouro) */
    radial-gradient(110% 80% at 100% 100%, rgba(217,169,76,.10), transparent 55%),
    /* base metálica */
    linear-gradient(155deg, #14161A 0%, #0C0D10 55%, #08090B 100%);
  border: 0;
  isolation: isolate;
  transition: transform .4s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
              filter .4s ease;
}

/* Contorno luminoso desenhado por trás (clip-path não aceita border) */
.g-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: inherit;
  background: linear-gradient(150deg,
      rgba(217,169,76,.42) 0%,
      rgba(194,200,208,.16) 38%,
      rgba(79,163,157,.42) 100%);
  padding: 1px;
  opacity: .34;
  transition: opacity .4s ease;
}
.g-panel > * { position: relative; z-index: 1; }

.g-panel:hover { transform: translateY(-5px); }
.g-panel:hover::before { opacity: .95; }

/* Variante dourada — campeões, MaskPro, conquistas */
.g-panel.gold {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(217,169,76,.18), transparent 55%),
    radial-gradient(110% 80% at 100% 100%, rgba(166,122,40,.12), transparent 58%),
    linear-gradient(155deg, #17140C 0%, #0E0C08 58%, #08090B 100%);
}
.g-panel.gold::before {
  background: linear-gradient(150deg,
      rgba(242,212,147,.55) 0%, rgba(217,169,76,.2) 45%, rgba(166,122,40,.5) 100%);
}

/* Variante "ao vivo" — vermelho */
.g-panel.live {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(217,100,92,.16), transparent 52%),
    linear-gradient(155deg, #18100F 0%, #0D0A0A 58%, #08090B 100%);
}
.g-panel.live::before {
  background: linear-gradient(150deg,
      rgba(217,100,92,.5) 0%, rgba(194,200,208,.14) 50%, rgba(79,163,157,.34) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   3. BRILHO DE CHÃO — o truque de profundidade do ranking
═══════════════════════════════════════════════════════════════ */
.g-floor { position: relative; }
.g-floor::after {
  content: ''; position: absolute;
  bottom: -18px; left: 50%; transform: translateX(-50%);
  width: 72%; height: 44px; pointer-events: none;
  background: radial-gradient(ellipse, var(--teal-glow) 0%, transparent 70%);
  filter: blur(14px); opacity: .55;
}
.g-floor.gold::after {
  background: radial-gradient(ellipse, var(--gold-glow) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════
   4. FAIXA DIAGONAL — geometria na composição
═══════════════════════════════════════════════════════════════ */
.g-stripes {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background: repeating-linear-gradient(
      -52deg, var(--silver) 0 1px, transparent 1px 13px);
}

/* Marca de canto: triângulo que preenche o chanfro */
.g-notch {
  position: absolute; top: 0; right: 0;
  width: 0; height: 0; pointer-events: none;
  border-top: 26px solid var(--teal);
  border-left: 26px solid transparent;
  opacity: .5; transition: opacity .35s ease;
}
.g-notch.gold { border-top-color: var(--gold); }
.g-panel:hover .g-notch { opacity: 1; }

/* Traço vertical de acento na lateral do card */
.g-edge-mark {
  position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; pointer-events: none;
  background: linear-gradient(180deg,
      transparent, var(--teal) 22%, var(--gold) 78%, transparent);
  opacity: .65; transition: opacity .35s ease, top .35s ease, bottom .35s ease;
}
.g-panel:hover .g-edge-mark { opacity: 1; top: 8%; bottom: 8%; }

/* ═══════════════════════════════════════════════════════════════
   5. HEXÁGONO — moldura para avatares e ícones
═══════════════════════════════════════════════════════════════ */
.g-hex {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0 !important;
}
.g-hex-frame {
  position: relative; display: inline-grid; place-items: center;
  padding: 2px;
  background: linear-gradient(150deg, var(--gold), var(--teal));
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.g-hex-frame > * {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   6. RÓTULOS E BADGES ANGULARES
═══════════════════════════════════════════════════════════════ */
.g-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 11px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  background: linear-gradient(100deg, var(--teal-deep), rgba(44,102,99,.25));
  color: var(--teal-hi);
}
.g-tag.gold {
  background: linear-gradient(100deg, var(--gold-deep), rgba(166,122,40,.22));
  color: var(--gold-hi);
}
.g-tag.live {
  background: linear-gradient(100deg, #8F3A34, rgba(143,58,52,.22));
  color: #E88C85;
}

/* Título de seção com barra geométrica */
.g-sec-title {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1; color: var(--silver-hi);
}
.g-sec-title::before {
  content: ''; width: 5px; height: 1em; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--gold), var(--teal));
  clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
}

/* ═══════════════════════════════════════════════════════════════
   7. LED DE STATUS — sinal de "sistema vivo" (vindo do ranking)
═══════════════════════════════════════════════════════════════ */
.g-led {
  width: 6px; height: 6px; flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: g-led-pulse 2.4s ease-in-out infinite;
}
@keyframes g-led-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════
   8. FUNDO MESCLADO — a "mesclagem de cores" pedida
   Três halos que se sobrepõem, dando cor sem poluir o texto.
═══════════════════════════════════════════════════════════════ */
.g-mesh { position: relative; isolation: isolate; }
/* inset horizontal DEVE ser 0: com valor negativo o halo ultrapassa a
   largura da tela e cria barra de rolagem lateral. Só o vertical pode
   extrapolar, porque a página já rola nesse eixo. */
.g-mesh::before {
  content: ''; position: absolute; inset: -10% 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 12% 22%, rgba(217,169,76,.10), transparent 62%),
    radial-gradient(42% 50% at 88% 30%, rgba(79,163,157,.12), transparent 66%),
    radial-gradient(50% 44% at 50% 96%, rgba(194,200,208,.05), transparent 70%);
  filter: blur(6px);
}

/* Linha divisória com degradê da marca */
.g-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
      transparent, var(--gold) 22%, var(--silver-hi) 50%, var(--teal) 78%, transparent);
  opacity: .34;
}

/* ═══════════════════════════════════════════════════════════════
   9. BOTÃO ANGULAR
═══════════════════════════════════════════════════════════════ */
.g-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
  background: linear-gradient(100deg, var(--teal-deep), var(--teal));
  color: #04100F;
  transition: transform .3s var(--ease-out-expo, ease), filter .3s ease;
}
.g-btn:hover { transform: translateY(-2px); filter: brightness(1.14); }
.g-btn.gold { background: linear-gradient(100deg, var(--gold-deep), var(--gold)); color: #140D02; }
.g-btn.ghost {
  background: transparent; color: var(--silver);
  box-shadow: inset 0 0 0 1px var(--border-hi);
}
.g-btn.ghost:hover { color: var(--silver-hi); box-shadow: inset 0 0 0 1px var(--teal); }

/* ═══════════════════════════════════════════════════════════════
   ACESSIBILIDADE
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .g-panel:hover, .g-btn:hover { transform: none; }
  .g-led { animation: none; opacity: .8; }
}

/* Em telas pequenas o chanfro encolhe, senão come o conteúdo */
@media (max-width: 560px) {
  .g-cut, .g-panel { --cut: 11px; }
  .g-cut-lg { --cut: 16px; }
}