/* Tom de Jogos · camada do portal dentro dos jogos: painel de ranking, botão do Google e avisos.
   Usa as cores da marca (não as do jogo): o ranking é do Tom de Jogos e tem a mesma cara em todos os jogos. */
.tdj-rk, .tdj-aviso, .tdj-google {
  --tdj-carvao: #0B0D0F;
  --tdj-grafite: #202429;
  --tdj-branco: #F5F4EF;
  --tdj-cinza: #A5ADB5;
  --tdj-verde: #D7FF35;
  --tdj-coral: #FF6B4A;
  --tdj-linha: rgba(245, 244, 239, .12);
  --tdj-fonte: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
}

.tdj-rk {
  width: min(460px, calc(100% - 24px)); max-height: min(720px, calc(100svh - 24px)); padding: 0; margin: auto;
  border: 1px solid var(--tdj-linha); border-radius: 24px; background: var(--tdj-carvao); color: var(--tdj-branco);
  font-family: var(--tdj-fonte); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  display: none; flex-direction: column; overflow: hidden;
  user-select: text; -webkit-user-select: text; touch-action: auto;
}
.tdj-rk[open] { display: flex; animation: tdj-entra .32s cubic-bezier(.16, 1, .3, 1); }
.tdj-rk::backdrop { background: rgba(5, 6, 8, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes tdj-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } }

.tdj-rk-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0 22px; }
.tdj-rk-casa { display: block; padding: 8px 0; line-height: 0; border-radius: 6px; }
.tdj-rk-casa img { width: 112px; height: auto; }
.tdj-rk-fecha {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--tdj-cinza); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tdj-rk-fecha:hover { background: var(--tdj-grafite); color: var(--tdj-branco); }
.tdj-rk-fecha svg { width: 20px; height: 20px; }

.tdj-rk-cab { padding: 6px 22px 16px; border-bottom: 1px solid var(--tdj-linha); }
.tdj-rk-cab h2 { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.tdj-rk-sub { margin: 6px 0 0; color: var(--tdj-branco); font-weight: 600; }
.tdj-rk-quando { margin: 4px 0 0; color: var(--tdj-cinza); font-size: 13px; text-wrap: pretty; }

.tdj-rk-corpo { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px; outline: none; }
.tdj-rk-msg { margin: 18px 12px; color: var(--tdj-cinza); text-wrap: pretty; }
.tdj-rk-vazio { margin: 22px 12px 0; font-size: 20px; font-weight: 600; }
.tdj-rk-total { margin: 12px; color: var(--tdj-cinza); font-size: 13px; }
.tdj-rk-tenta {
  margin: 0 12px 16px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--tdj-linha);
  background: var(--tdj-grafite); color: var(--tdj-branco); font: inherit; font-weight: 600; cursor: pointer;
}

.tdj-rk-lista { list-style: none; margin: 0; padding: 0; }
.tdj-rk-lista > li {
  position: static; display: grid; grid-template-columns: 3.2ch 1fr auto; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 12px; border-radius: 14px;
}
.tdj-rk-lista > li + li { margin-top: 2px; }
.tdj-rk-lista .tdj-pos { color: var(--tdj-cinza); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.tdj-rk-lista .tdj-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.tdj-rk-lista .tdj-nome b { font-weight: 600; overflow-wrap: anywhere; }
.tdj-rk-lista .tdj-nome small { color: var(--tdj-cinza); font-size: 13px; }
.tdj-rk-lista .tdj-nome em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--tdj-carvao); background: var(--tdj-verde); padding: 1px 8px; border-radius: 999px; }
.tdj-rk-lista .tdj-val { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tdj-rk-lista .tdj-podio .tdj-pos { color: var(--tdj-branco); font-weight: 700; }
/* você: o único brilho do painel */
.tdj-rk-lista .tdj-voce { background: var(--tdj-grafite); box-shadow: inset 3px 0 0 var(--tdj-verde); }
.tdj-rk-lista .tdj-voce .tdj-val { color: var(--tdj-verde); }

.tdj-rk-pe { padding: 16px 22px 20px; border-top: 1px solid var(--tdj-linha); display: grid; gap: 12px; color: var(--tdj-cinza); font-size: 14px; }
.tdj-rk-pe:empty { display: none; }
.tdj-rk-pe p { margin: 0; text-wrap: pretty; }
.tdj-rk-pe b { color: var(--tdj-branco); font-weight: 600; }

/* botão do Google (padrão de marca do Google para fundo escuro) */
.tdj-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 18px 0 14px;
  border-radius: 999px; border: 1px solid #8E918F; background: #131314; color: #E3E3E3; text-decoration: none;
  font-family: var(--tdj-fonte); font-size: 15px; font-weight: 600; justify-self: start; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.tdj-google:hover { background: #1f1f20; border-color: #c4c7c5; }
.tdj-google svg { width: 20px; height: 20px; flex: none; }

.tdj-rk :focus-visible, .tdj-google:focus-visible { outline: 2px solid var(--tdj-verde); outline-offset: 2px; }

.tdj-aviso {
  position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 50;
  max-width: calc(100% - 32px); width: max-content; padding: 12px 18px; border-radius: 14px;
  background: var(--tdj-grafite); color: var(--tdj-branco); border: 1px solid var(--tdj-coral);
  font-family: var(--tdj-fonte); font-size: 14px; box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) { .tdj-rk[open] { animation: none; } }