/* Área de conta do jogador (/conta/ e /trofeus/): componentes próprios sobre os
   tokens de ui/tokens.css. O cabeçalho usa este arquivo em todo o hub; regras de página ficam
   restritas a .gpb-jogador para preservar a composição das demais páginas.
   Paleta de troféus definida pelo time (enviada por Murillo em 2026-10-19). A
   paleta vale só para as páginas do jogador; mova-a para ui/tokens.css se outra
   aplicação a usar. O texto sobre as peças usa o brilho de cada faixa. */
:root {
  --trofeu-bronze-sombra: #754125; --trofeu-bronze: #cd8b52; --trofeu-bronze-brilho: #f4c28f;
  --trofeu-prata-sombra: #647586; --trofeu-prata: #bccad6; --trofeu-prata-brilho: #f1f6fa;
  --trofeu-ouro-sombra: #966515; --trofeu-ouro: #f2c340; --trofeu-ouro-brilho: #fff1a0;
  --trofeu-diamante-sombra: #267c99; --trofeu-diamante: #77d9ed; --trofeu-diamante-brilho: #e5fcff;
}
[data-tier=bronze] { --sombra: var(--trofeu-bronze-sombra); --base: var(--trofeu-bronze); --brilho: var(--trofeu-bronze-brilho); }
[data-tier=prata] { --sombra: var(--trofeu-prata-sombra); --base: var(--trofeu-prata); --brilho: var(--trofeu-prata-brilho); }
[data-tier=ouro] { --sombra: var(--trofeu-ouro-sombra); --base: var(--trofeu-ouro); --brilho: var(--trofeu-ouro-brilho); }
[data-tier=diamante] { --sombra: var(--trofeu-diamante-sombra); --base: var(--trofeu-diamante); --brilho: var(--trofeu-diamante-brilho); }

.gpb-jogador { max-width: 1120px; margin: auto; padding: 24px 20px 40px; }
.gpb-jogador h2 { margin-top: 0; }
.gpb-jogador .eyebrow { margin: 0 0 var(--space-2); letter-spacing: .08em; text-transform: uppercase; }
.gpb-jogador .note { font-size: 13px; color: var(--muted); max-width: 65ch; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.gpb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.gpb-handle-tag { display: inline-block; margin-left: .2em; color: var(--muted); font-size: .55em; font-weight: 800; letter-spacing: 0; white-space: nowrap; }

/* Estado da página enquanto a conta é conferida e mensagens de ação. */
.gpb-status:empty { display: none; }
.gpb-status { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-5); border-left: 4px solid var(--accent); background: var(--surface); border-radius: var(--radius-small); }
.gpb-status[data-tone=erro] { border-left-color: var(--error); }
.gpb-carregando { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-7) 0; color: var(--muted); font-weight: 700; }
.gpb-giro, .gpb-conta__giro { flex: none; width: 20px; height: 20px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: gpb-giro 1s linear infinite; }
@keyframes gpb-giro { to { transform: rotate(1turn); } }

/* Botões próprios da área: contorno amarelo (ação secundária de jogo) e discreto. */
.gpb-contorno { background: transparent; color: var(--action); border-color: var(--action); }
.gpb-contorno:hover { background: var(--surface-raised); color: var(--action-hover); border-color: var(--action-hover); }
.gpb-discreto { background: transparent; color: var(--heading); border-color: var(--border); }
.gpb-discreto:hover { background: var(--surface-raised); color: var(--heading); }
.gpb-link { min-height: 48px; padding: var(--space-3) var(--space-2); background: transparent; border-color: transparent; color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.gpb-link:hover { background: transparent; color: var(--link-hover); border-color: transparent; }
button[aria-busy=true] { cursor: progress; }
.gpb-icone { flex: none; width: 22px; height: 22px; }

/* ---------- Cabeçalho: canto da conta compartilhado no hub ---------- */
.gpb-conta { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; margin-left: auto; }
.gpb-conta:empty { display: none; }
.gpb-conta__conferindo { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); color: var(--heading); font-size: 14px; font-weight: 700; }
.gpb-conta__google { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid #747775; border-radius: var(--radius); background: #fff; color: #1f1f1f; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.gpb-conta__google:hover { background: #f2f2f2; color: #1f1f1f; }
.gpb-conta__conectada, .gpb-conta__jogador { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 280px; padding: 4px 14px 4px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-inset); color: var(--heading); font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.25; }
.gpb-conta__conectada:hover, .gpb-conta__jogador:hover { background: var(--surface); color: var(--heading); border-color: var(--accent); }
.gpb-conta__conectada .g-logo { flex: none; margin-left: 8px; }
.gpb-conta__texto { display: grid; min-width: 0; }
.gpb-conta__texto strong { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.gpb-conta__texto strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.gpb-conta__email, .gpb-conta__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpb-conta__email { color: var(--muted); font-size: 12px; font-weight: 600; }
.gpb-conta__menu { position: relative; }
.gpb-conta__jogador { padding-left: 8px; }
.gpb-conta__jogador .gpb-avatar { margin: 0 2px; }
.gpb-conta__nome { min-width: 0; }
.gpb-conta__seta { flex: none; width: 9px; height: 9px; margin: -4px 2px 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gpb-conta__jogador[aria-expanded=true] .gpb-conta__seta { margin-top: 4px; transform: rotate(225deg); }
.gpb-conta__inicial { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-background); }
.gpb-conta__opcoes { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px; margin: 0; padding: var(--space-2); list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px #0008; }
.gpb-conta__opcoes a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-small); color: var(--heading); font-weight: 700; text-decoration: none; }
.gpb-conta__opcoes a:hover { background: var(--surface-raised); color: var(--heading); }
.gpb-conta__opcoes a[aria-current] { color: var(--action); }
.gpb-conta__aviso { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: 13px; font-weight: 700; }
.gpb-conta__aviso::before { content: "!"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--error); color: var(--on-action); font-size: 14px; font-weight: 900; }
@media (max-width: 959px) {
  .gpb-header .gpb-header-inner { column-gap: 12px; }
  .gpb-conta { order: 1; }
  .gpb-header-inner > .gpb-menu { order: 2; }
  .gpb-header-inner > .gpb-nav { order: 3; }
}
@media (max-width: 599px) {
  .gpb-conta__nome, .gpb-conta__email { display: none; }
  .gpb-conta__aviso { font-size: 0; gap: 0; }
  .gpb-conta__aviso::before { font-size: 14px; }
  .gpb-conta__texto strong { font-size: 0; gap: 0; }
  .gpb-conta__conectada { gap: 6px; }
  .gpb-conta__conectada, .gpb-conta__jogador { padding-right: 10px; }
}
@media (max-width: 479px) {
  .gpb-conta__conferindo { gap: 6px; padding: 0 4px; font-size: 13px; }
  .gpb-conta__google { gap: 8px; padding: 8px 12px; }
  .gpb-conta__google span { font-size: 0; }
  .gpb-conta__google span::after { content: "Entrar"; font-size: 14px; }
}
@media (max-width: 379px) {
  .gpb-header .gpb-header-inner { column-gap: 8px; }
  .gpb-conta__conferindo { font-size: 0; }
  .gpb-conta__google .g-logo { display: none; }
  .gpb-conta__google { padding: 8px; }
  .gpb-conta__google span::after { font-size: 13px; }
  .gpb-conta__conferindo { padding: 0 var(--space-2); }
  .gpb-conta__seta { display: none; }
}

/* ---------- Composição das páginas ---------- */
.gpb-trilha ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.gpb-trilha li + li::before { content: "/"; margin-right: var(--space-2); color: var(--muted); }
.gpb-trilha a { color: var(--muted); }
.gpb-trilha a:hover { color: var(--link-hover); }
.gpb-trilha [aria-current] { color: var(--heading); font-weight: 700; }
.gpb-titulo { margin: 0 0 var(--space-3); font-size: clamp(34px, 6vw, 56px); }
/* Pincelada verde sob a palavra final, como nas peças do hub. */
.gpb-pincel { position: relative; display: inline-block; z-index: 0; }
.gpb-pincel::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -6%; bottom: -.12em; height: .42em; background: url("/jogador/pincel.svg") center / 100% 100% no-repeat; opacity: .9; }
.gpb-subtitulo { margin: 0; color: var(--text); font-size: clamp(16px, 2vw, 18px); }
.gpb-secao { margin-top: var(--space-7); }
.gpb-secao__topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.gpb-secao__topo h2 { margin: 0; font-size: clamp(24px, 3.4vw, 34px); }
.gpb-secao__topo p { margin: 0; color: var(--muted); font-weight: 600; }

/* Cena com a pincelada verde/amarela do hub, esmaecida no azul da página. */
.gpb-cena { position: relative; isolation: isolate; }
.gpb-cena::before { content: ""; position: absolute; z-index: -1; inset: -24px -20px; background: url("/jogador/brasil-fundo-desktop.webp") 70% 40% / cover no-repeat; opacity: .5; mask-image: radial-gradient(ellipse 60% 70% at 55% 50%, #000 20%, transparent 75%); pointer-events: none; }
@media (max-width: 720px) { .gpb-cena::before { background-image: url("/jogador/brasil-fundo-mobile.webp"); mask-image: radial-gradient(ellipse 80% 55% at 50% 35%, #000 15%, transparent 75%); } }

/* Palco do avatar: reserva a borda que a moldura (120%) e as poses ocupam
   além da caixa, para patas, caudas e ornamentos nunca serem cortados. */
.gpb-palco { display: grid; place-items: center; flex: none; padding: calc(var(--palco, 128px) * .16); }
.gpb-palco .gpb-avatar { --avatar-size: var(--palco, 128px) !important; }

/* ---------- Medalhas, faixas e contagens ---------- */
.gpb-medalha { --tam: 72px; position: relative; display: grid; place-items: center; flex: none; width: var(--tam); height: var(--tam); border-radius: 50%; border: calc(var(--tam) * .06) solid var(--sombra, #9c7c00); background: radial-gradient(circle at 35% 30%, var(--brilho, #fff7b0), var(--base, var(--action)) 48%, var(--sombra, #9c7c00)); color: var(--sombra, #6b5500); box-shadow: 0 0 0 calc(var(--tam) * .05) color-mix(in srgb, var(--base, var(--action)) 35%, transparent), inset 0 2px 0 var(--brilho, #fff7b0); }
.gpb-medalha svg { width: 52%; height: 52%; }
.gpb-medalha[data-tier=diamante] { border-radius: 22%; transform: rotate(45deg) scale(.86); background: linear-gradient(100deg, var(--brilho), var(--base) 45%, var(--sombra)); }
.gpb-medalha[data-tier=diamante] svg { transform: rotate(-45deg); }
.gpb-medalha--mini { --tam: 30px; }
.gpb-medalha--grande { --tam: 112px; }
.gpb-faixa { justify-self: start; display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--base); color: var(--on-action); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.gpb-faixas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gpb-faixas li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius); }
.gpb-faixas .gpb-medalha { grid-row: 1 / 3; }
.gpb-faixas strong { color: var(--heading); font-size: 22px; font-weight: 900; line-height: 1.1; }
.gpb-faixas span:not(.gpb-medalha) { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; }
@media (max-width: 479px) { .gpb-faixas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Cartões de troféu ---------- */
.gpb-trofeus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--space-4); }
.gpb-trofeu { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.gpb-trofeu__arte { display: grid; place-items: center; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--base) 38%, transparent), transparent 62%), linear-gradient(160deg, var(--surface-raised), var(--background)); border-bottom: 3px solid var(--base); }
.gpb-trofeu__corpo { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.gpb-trofeu__jogo { color: var(--heading); font-size: 17px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.gpb-trofeu time { color: var(--muted); font-size: 13px; }
.gpb-trofeu[data-new] { outline: 3px solid var(--brilho); outline-offset: 3px; animation: gpb-conquista .6s ease-out; }
@keyframes gpb-conquista { from { transform: scale(.92); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } to { transform: none; } }
@media (max-width: 479px) {
  .gpb-trofeus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .gpb-trofeu .gpb-medalha { --tam: 56px; }
  .gpb-trofeu__corpo { padding: var(--space-2) var(--space-3) var(--space-3); }
  .gpb-trofeu__jogo { font-size: 15px; }
}

/* ---------- Estados: vazio, avisos, recompensa ---------- */
.gpb-vazio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); }
.gpb-vazio__arte { display: grid; place-items: center; flex: none; width: 128px; height: 128px; border-radius: 50%; color: var(--muted); background: radial-gradient(circle, var(--surface-raised) 55%, transparent 56%), conic-gradient(from 200deg, var(--accent), var(--action), var(--accent)); }
.gpb-vazio__arte svg { width: 60px; height: 60px; }
.gpb-vazio > div { flex: 1 1 260px; }
.gpb-vazio h3 { margin: 0 0 var(--space-2); font-size: clamp(22px, 3vw, 30px); }
.gpb-vazio p { margin: 0 0 var(--space-4); }

.gpb-aviso { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--error); border-radius: var(--radius); }
.gpb-aviso[data-tone=alerta] { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.gpb-aviso[data-tone=info] { border-left-color: var(--accent); }
.gpb-aviso__icone { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--error); color: var(--on-action); font-size: 22px; font-weight: 900; }
.gpb-aviso[data-tone=alerta] .gpb-aviso__icone { background: var(--warning); }
.gpb-aviso[data-tone=info] .gpb-aviso__icone { background: var(--accent); font-family: Georgia, serif; }
.gpb-aviso strong { display: block; color: var(--heading); font-size: 18px; line-height: 1.3; }
.gpb-aviso p { margin: var(--space-1) 0 0; }
.gpb-aviso .acoes { margin-top: var(--space-4); }
/* Serviço desligado ou fora do ar: ilustração do controle em pausa. */
.gpb-aviso--grande { flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); padding: var(--space-6); border-radius: var(--radius-large); }
.gpb-aviso--grande > div { flex: 1 1 280px; }
.gpb-aviso.gpb-aviso--grande .gpb-aviso__icone { position: relative; width: 136px; height: 136px; border-radius: var(--radius-large); background: radial-gradient(circle, var(--surface-raised), var(--surface-inset) 70%); color: var(--muted); }
.gpb-aviso--grande .gpb-aviso__icone svg { width: 96px; height: 96px; }
.gpb-aviso--grande .gpb-aviso__icone::after { content: ""; position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface); background: linear-gradient(90deg, transparent 33%, var(--heading) 33% 43%, transparent 43% 57%, var(--heading) 57% 67%, transparent 67%) center / 60% 50% no-repeat, var(--border); }
.gpb-aviso--grande[data-tone=erro] .gpb-aviso__icone::after { background-color: var(--error); }
.gpb-aviso--grande strong { font-size: clamp(22px, 3vw, 28px); }
#erro-login:not([hidden]) { margin-bottom: var(--space-5); }
.gpb-aviso + .gpb-aviso, .gpb-aviso + section, section + .gpb-aviso { margin-top: var(--space-5); }

/* Troféu esperando: destaque de recompensa com medalha da marca. */
.gpb-recompensa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-4) var(--space-5); background: linear-gradient(100deg, color-mix(in srgb, var(--action) 14%, var(--surface)), var(--surface) 55%); border: 1px solid color-mix(in srgb, var(--action) 45%, var(--border)); border-radius: var(--radius-large); }
.gpb-recompensa > div { flex: 1 1 200px; }
.gpb-recompensa strong { display: block; color: var(--heading); font-size: 20px; font-weight: 900; line-height: 1.25; }
.gpb-recompensa p { margin: var(--space-1) 0 0; }

/* Sua conta: discreta, no fim da página. */
.gpb-sua-conta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-7); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.gpb-sua-conta h2 { flex: 1 0 100%; margin: 0; font-size: 22px; }
.gpb-sua-conta dl { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); flex: 1 1 320px; margin: 0; }
.gpb-sua-conta dl div { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.gpb-sua-conta dt { display: flex; color: var(--muted); }
.gpb-sua-conta dd { margin: 0; overflow-wrap: anywhere; }
.gpb-sua-conta button { margin-left: auto; }
@media (max-width: 599px) { .gpb-sua-conta button { width: 100%; margin-left: 0; } }

@media (max-width: 479px) {
  .gpb-jogador { padding-top: 16px; }
  .gpb-vazio, .gpb-aviso { padding: var(--space-4); }
  .gpb-vazio__arte { width: 96px; height: 96px; }
  .gpb-vazio__arte svg { width: 44px; height: 44px; }
  .gpb-secao { margin-top: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .gpb-giro, .gpb-conta__giro { animation: none; border-top-color: var(--accent); border-right-color: var(--accent); } }