/* =====================================================================
   BATALHA PARTY — Rodada 42: janelas "Ranking" e "Check-in" do botão Abrangente do lobby (js/ui/screen-board.js).
   Moldura = a do Centro de tarefas (css/tasks.css: .tk-backdrop/.tk-wrap/.tk-panel/.tk-ribbon/.tk-close).
   Conteúdo do Ranking idêntico à foto de referência: abas laranja (ativa) e roxa, faixa laranja com Posição / Jogador /
   Patente / Pontos, linhas brancas com o bloco da posição inclinado (1st amarelo, 2nd azul-acinzentado, 3rd bronze, 4+
   turquesa listrado), foto do jogador com borda roxa, nome no meio, patente (ícone + nome em itálico) e pontos dourados
   com contorno; embaixo, fixa, a linha roxa do próprio jogador. Palco fixo 1280x720 escalado: sem media queries.
   ===================================================================== */
.overlay.rankboard, .overlay.checkin { position: absolute; inset: 0; }

/* ---------------------------------------------------------------- RANKING */
.rb-wrap { width: 1040px; height: 600px; }
.rb-panel { background: #f8f1e1; }
.rb-tabs { position: absolute; left: 16px; right: 16px; top: 46px; height: 50px; display: flex; gap: 6px; z-index: 1; }
.rb-tab {
  flex: 1; height: 50px; border: 0; padding: 0 12px; cursor: pointer; border-radius: 14px 14px 0 0; font-family: inherit;
  font-size: 23px; font-weight: 900; letter-spacing: .2px; color: #fff; white-space: nowrap;
  background: linear-gradient(#a487ff 0%, #8a66f0 45%, #6c47d8 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .15);
  -webkit-text-stroke: 1.2px #2e1478; paint-order: stroke fill; text-shadow: 0 2px 0 #2e1478;
  transition: filter .12s;
}
.rb-tab:hover { filter: brightness(1.08); }
.rb-tab.on {
  background: linear-gradient(#fff07a 0%, #ffd23c 40%, #ffaa22 100%);
  -webkit-text-stroke: 1.3px #8a3d00; text-shadow: 0 2px 0 #8a3d00; cursor: default;
}
/* faixa laranja dos títulos das colunas (mesma grade das linhas) */
.rb-head, .rb-row { display: grid; grid-template-columns: 168px 60px minmax(0, 1fr) 250px 170px; align-items: center; }
.rb-head {
  position: absolute; left: 16px; right: 16px; top: 96px; height: 38px; z-index: 1; border-radius: 0 0 10px 10px;
  background: linear-gradient(#ffd24f 0%, #ffbf32 55%, #ffa524 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 rgba(160, 80, 0, .25);
  font-size: 18px; font-weight: 900; color: #6b2f00; text-align: center;
}
.rb-head .c-pos { grid-column: 1; }
.rb-head .c-player { grid-column: 2 / 4; }
.rb-head .c-rank { grid-column: 4; }
.rb-head .c-val { grid-column: 5; }
/* lista com rolagem entre a faixa e a linha do jogador */
.rb-list { position: absolute; left: 16px; right: 10px; top: 140px; bottom: 78px; overflow-x: hidden; overflow-y: auto; padding-right: 6px; }
.rb-list::-webkit-scrollbar { width: 10px; }
.rb-list::-webkit-scrollbar-track { background: transparent; }
.rb-list::-webkit-scrollbar-thumb { background: #d9c9a3; border-radius: 5px; border: 2px solid #f8f1e1; }
.rb-msg { padding: 60px 20px; text-align: center; font-size: 20px; font-weight: 800; color: #9a7a4a; }
.rb-msg.err { color: #c0392b; }
.rb-row {
  position: relative; height: 58px; margin-bottom: 7px; background: #fff; border-radius: 10px; overflow: hidden;
  border: 2px solid #ece3cf; box-shadow: 0 3px 0 rgba(120, 90, 40, .16);
}
/* bloco da posição: cor por colocação, borda direita inclinada */
.rb-pos {
  align-self: stretch; display: flex; align-items: center; justify-content: center; padding-right: 18px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  font-size: 32px; font-weight: 900; font-style: italic; letter-spacing: -.5px;
}
.rb-row.r1 .rb-pos { background: linear-gradient(90deg, #fff27a 0%, #ffe21a 45%, #ffd000 100%); color: #e0590b; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.rb-row.r2 .rb-pos { background: linear-gradient(90deg, #dbe6fb 0%, #bccdf0 50%, #a2b8e6 100%); color: #4c5f88; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.rb-row.r3 .rb-pos { background: linear-gradient(90deg, #fbd9b0 0%, #f2bd86 50%, #e7a161 100%); color: #8a461a; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.rb-row.rn .rb-pos {
  background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .38) 0 7px, rgba(255, 255, 255, 0) 7px 17px), linear-gradient(90deg, #c4f6f7 0%, #95e6ea 55%, #6fd5dc 100%);
  color: #2d7b86; font-style: normal; font-size: 30px;
}
/* foto do jogador: moldura roxa */
.rb-av { width: 48px; height: 48px; border-radius: 10px; border: 3px solid #7b58da; background: #3b2a6b; overflow: hidden; box-shadow: 0 2px 0 rgba(40, 10, 90, .35); }
.rb-av img, .rb-av .ico { display: block; width: 100%; height: 100%; object-fit: cover; }
.rb-name { padding: 0 12px; text-align: center; font-size: 20px; font-weight: 800; color: #1d1d24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-rank { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.rb-rank .ico { flex: none; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25)); }
.rb-rn { font-size: 21px; font-weight: 900; font-style: italic; color: #1c2752; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-val {
  text-align: center; font-size: 29px; font-weight: 900; letter-spacing: .3px; color: #ffb300;
  -webkit-text-stroke: 1.5px #6b3300; paint-order: stroke fill; text-shadow: 0 2px 0 #6b3300;
}
/* linha do próprio jogador, fixa embaixo: roxa, posição num bloco mais claro listrado, textos brancos com contorno */
.rb-mebar { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: 1; background: linear-gradient(#8f6bff 0%, #7448e8 45%, #5a2fcc 100%); box-shadow: 0 -3px 0 rgba(60, 20, 140, .35), inset 0 2px 0 rgba(255, 255, 255, .3); }
.rb-mebar .rb-row.me { height: 74px; margin: 0 16px 0 16px; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.rb-row.me .rb-pos {
  background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .16) 0 8px, rgba(255, 255, 255, 0) 8px 18px), linear-gradient(90deg, #a98cff 0%, #9572ff 100%);
  color: #fff; font-style: normal; font-size: 32px; -webkit-text-stroke: 1.2px #2e1478; paint-order: stroke fill; text-shadow: 0 2px 0 #2e1478;
}
.rb-row.me .rb-av { border-color: #ffd24f; }
.rb-row.me .rb-name, .rb-row.me .rb-rn { color: #fff; -webkit-text-stroke: 1.1px #2e1478; paint-order: stroke fill; text-shadow: 0 2px 0 #2e1478; }
.rb-row.me .rb-rn { font-size: 24px; }
.rb-row.me .rb-val { font-size: 31px; }

/* ---------------------------------------------------------------- CHECK-IN */
.ci-wrap { width: 1000px; height: 500px; }
.ci-sub { position: absolute; left: 0; right: 0; top: 56px; text-align: center; font-size: 21px; font-weight: 800; color: #7a5420; }
.ci-days { position: absolute; left: 26px; right: 26px; top: 100px; height: 270px; display: flex; gap: 12px; align-items: stretch; }
.ci-msg { margin: auto; font-size: 20px; font-weight: 800; color: #9a7a4a; }
.ci-msg.err { color: #c0392b; }
.ci-day {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px;
  border-radius: 16px; border: 3px solid #e3c47c; background: linear-gradient(#fffaf0 0%, #fff0c9 60%, #ffe3a1 100%);
  box-shadow: 0 4px 0 rgba(150, 100, 20, .22), inset 0 2px 0 rgba(255, 255, 255, .8);
}
.ci-dn { font-size: 26px; font-weight: 900; color: #7a3d00; -webkit-text-stroke: .6px #fff; paint-order: stroke fill; }
.ci-dt { font-size: 15px; font-weight: 800; color: #a07a40; }
.ci-rw { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 19px; font-weight: 900; color: #5a3a10; text-align: center; line-height: 1.6; }
.ci-rw .ico { vertical-align: middle; }
.ci-none { color: #b49a6a; }
.ci-item { display: flex; align-items: center; gap: 6px; font-size: 21px; }
.ci-item b { font-weight: 900; color: #5a3a10; }
.ci-day.before { opacity: .5; filter: grayscale(.5); }
.ci-state { min-height: 34px; font-size: 18px; font-weight: 900; display: flex; align-items: center; }
.ci-state.now { color: #ff7a00; }
.ci-state.miss { color: #b0453a; }
.ci-stamp {
  min-height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px 0 6px; border-radius: 999px;
  background: linear-gradient(#5fe07a, #2fb24c); border: 2px solid #1d7a32; color: #fff; font-size: 17px; font-weight: 900;
  -webkit-text-stroke: .8px #1d6a2c; paint-order: stroke fill; box-shadow: 0 2px 0 rgba(0, 60, 20, .35);
}
.ci-stamp .ico { width: 26px; height: 26px; }
.ci-day.done { border-color: #57c46a; background: linear-gradient(#f4fff2 0%, #dff7d6 60%, #c9efbd 100%); }
.ci-day.missed { filter: grayscale(.75); opacity: .62; }
.ci-day.future { opacity: .9; }
.ci-day.is-today { border-color: #ff9a1f; transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 3px #ffd24f, 0 0 20px rgba(255, 170, 30, .85), 0 6px 0 rgba(150, 90, 10, .3); z-index: 1; }
.ci-day.is-today.done { border-color: #2fb24c; box-shadow: 0 0 0 3px #8ef0a0, 0 0 18px rgba(60, 200, 90, .7), 0 6px 0 rgba(20, 100, 40, .3); }
.ci-foot { position: absolute; left: 30px; right: 30px; bottom: 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ci-streak { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 900; color: #7a5420; }
.ci-next { font-size: 21px; font-weight: 900; color: #7a5420; font-variant-numeric: tabular-nums; }
.ci-off { font-size: 20px; font-weight: 900; color: #b0453a; }
.ci-btn {
  height: 60px; padding: 0 34px; border-radius: 16px; border: 3px solid #a85a00; cursor: pointer; font-family: inherit;
  font-size: 26px; font-weight: 900; color: #fff; background: linear-gradient(#ffd75a 0%, #ffb52b 50%, #ff9418 100%);
  -webkit-text-stroke: 1.3px #8a3d00; paint-order: stroke fill; text-shadow: 0 2px 0 #8a3d00;
  box-shadow: 0 5px 0 #a85a00, inset 0 2px 0 rgba(255, 255, 255, .45); transition: transform .1s, filter .1s;
  animation: ciPulse 1.4s ease-in-out infinite;
}
.ci-btn:hover { filter: brightness(1.06); }
.ci-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a85a00; }
.ci-btn:disabled { filter: grayscale(.6); cursor: default; animation: none; }
@keyframes ciPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ---------------------------------------------------------------- lobby: botões em cima do "Abrangente" e do "Ranking" (rodada 43) */
.lobby .ov-pop {
  position: absolute; bottom: 92px; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border-radius: 18px; background: linear-gradient(#7c52e6, #5a30c4); border: 3px solid var(--ink, #16102b);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .35), 0 12px 26px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .25);
  transform-origin: 50% 100%; animation: ovPop .16s ease-out;
}
.lobby .ov-pop[hidden] { display: none; }
.lobby .ov-pop::after {   /* setinha apontando para o botão (Abrangente ou Ranking) */
  content: ''; position: absolute; left: var(--ov-arrow, 50%); bottom: -14px; margin-left: -12px; width: 24px; height: 14px;
  background: #5a30c4; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.lobby .ov-btn {
  display: flex; align-items: center; gap: 10px; min-width: 176px; height: 52px; padding: 0 16px 0 10px; border-radius: 14px; cursor: pointer;
  border: 2px solid rgba(0, 0, 0, .35); font-family: inherit; font-size: 21px; font-weight: 900; color: #fff;
  background: linear-gradient(#ffcf4d 0%, #ffad26 55%, #ff8f17 100%);
  -webkit-text-stroke: 1.1px #7a3500; paint-order: stroke fill; text-shadow: 0 2px 0 #7a3500;
  box-shadow: 0 4px 0 rgba(120, 50, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .4); transition: transform .1s, filter .1s;
}
.lobby .ov-btn.cyan { background: linear-gradient(#7fe3ff 0%, #3fb6f0 55%, #2192d6 100%); -webkit-text-stroke-color: #0d4b7a; text-shadow: 0 2px 0 #0d4b7a; box-shadow: 0 4px 0 rgba(10, 60, 110, .55), inset 0 2px 0 rgba(255, 255, 255, .4); }
.lobby .ov-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lobby .ov-btn:active { transform: translateY(2px); }
.lobby .ov-btn .ico { flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
@keyframes ovPop { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- URL DE PROMOÇÃO (rodada 45, js/ui/screen-social.js)
   Mesma moldura do Centro de tarefas; texto marrom, campos brancos com o botão Copiar amarelo, quadros claros e os
   blocos "Sua rede" / "Últimas comissões" como cartões brancos. */
.overlay.referral { position: absolute; inset: 0; }
.rf-wrap { width: 1040px; height: 600px; }
.rf-panel { background: #f8f1e1; }
.rf-body {
  position: absolute; left: 0; right: 0; top: 46px; bottom: 10px; overflow-x: hidden; overflow-y: auto; padding: 6px 30px 12px;
  color: #5a3a1a;
}
.rf-body::-webkit-scrollbar { width: 10px; }
.rf-body::-webkit-scrollbar-track { background: transparent; }
.rf-body::-webkit-scrollbar-thumb { background: #d9c9a3; border-radius: 5px; border: 2px solid #f8f1e1; }
.rf-loading { padding: 160px 0; text-align: center; font-size: 20px; font-weight: 800; color: #9a7a4a; }
.rf-intro { margin: 2px 6px 12px; text-align: center; font-size: 18px; font-weight: 800; line-height: 1.3; color: #7a5326; }
.rf-intro .ico { vertical-align: -4px; }
.rf-fields { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; }
.rf-lbl { margin: 0 0 5px 4px; font-size: 15px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: #8a6234; }
.rf-box {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 14px; background: #fff;
  border: 2px solid #e6d9bd; border-radius: 12px; box-shadow: inset 0 2px 0 rgba(120, 90, 40, .08), 0 3px 0 rgba(120, 90, 40, .12);
}
.rf-input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0; font-family: inherit;
  font-size: 20px; font-weight: 900; color: #4a2d0e; text-overflow: ellipsis;
}
.rf-field.code .rf-input { letter-spacing: 2px; }
.rf-field.link .rf-input { font-size: 17px; }
.rf-copy {
  flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; border-radius: 10px; cursor: pointer;
  border: 2px solid #a85a00; font-family: inherit; font-size: 18px; font-weight: 900; color: #fff;
  background: linear-gradient(#ffd75a 0%, #ffb52b 50%, #ff9418 100%);
  -webkit-text-stroke: 1px #8a3d00; paint-order: stroke fill; text-shadow: 0 2px 0 #8a3d00;
  box-shadow: 0 4px 0 #a85a00, inset 0 2px 0 rgba(255, 255, 255, .45); transition: transform .1s, filter .1s;
}
.rf-copy:hover { filter: brightness(1.06); }
.rf-copy:active { transform: translateY(3px); box-shadow: 0 1px 0 #a85a00; }
.rf-copy .ico { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.rf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
.rf-tile {
  height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 14px; background: linear-gradient(#fffaf0, #fff0d2); border: 2px solid #ecd8ad; box-shadow: 0 3px 0 rgba(150, 110, 40, .18);
}
.rf-tile .v {
  display: flex; align-items: center; gap: 6px; font-size: 30px; font-weight: 900; line-height: 1.05; color: #ff9a12;
  -webkit-text-stroke: 1.2px #7a3a00; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(122, 58, 0, .35);
}
.rf-tile.earn .v { font-size: 25px; }
.rf-tile .v .ico { -webkit-text-stroke: 0; }
.rf-tile .k { font-size: 15px; font-weight: 900; color: #8a6234; }
.rf-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rf-block { min-width: 0; padding: 10px 14px 8px; background: #fff; border: 2px solid #ece3cf; border-radius: 14px; box-shadow: 0 3px 0 rgba(120, 90, 40, .14); }
.rf-btitle { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 19px; font-weight: 900; color: #5a3a1a; }
.rf-net { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 58px; align-items: center; gap: 10px; height: 38px; border-bottom: 2px solid #f2e9d6; }
.rf-net:last-child { border-bottom: 0; }
.rf-lvl {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex: none;
  background: linear-gradient(#a487ff, #6c47d8); border: 2px solid #3a1f8a; color: #fff; font-size: 15px; font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3);
}
.rf-net .nm { font-size: 17px; font-weight: 900; color: #5a3a1a; }
.rf-net .ct { font-size: 15px; font-weight: 800; color: #9a7a4a; white-space: nowrap; }
.rf-net .pc { text-align: right; font-size: 19px; font-weight: 900; color: #ff8a00; -webkit-text-stroke: .6px #7a3a00; paint-order: stroke fill; }
.rf-empty { margin: 0; padding: 58px 10px; text-align: center; font-size: 17px; font-weight: 800; color: #a58a5e; }
.rf-commlist { max-height: 196px; overflow-y: auto; padding-right: 4px; }
.rf-comm { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; border-bottom: 2px solid #f2e9d6; }
.rf-comm:last-child { border-bottom: 0; }
.rf-comm .t1 { font-size: 15px; font-weight: 900; color: #5a3a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-comm .t1 .from { font-size: 13px; font-weight: 800; color: #9a7a4a; }
.rf-comm .t2 { font-size: 13px; font-weight: 800; color: #a58a5e; }
.rf-comm .val { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 900; color: #27a33a; white-space: nowrap; }