/* ============================================================
   BIG BENIS GAME — экран рейтинга
   Иерархия: топбар → заголовок → вкладки → подиум топ-3 →
   скроллируемый список (наша строка подсвечена) → док
   Зоны из layout.json набора: заголовок y 0.16–0.25, вкладки
   0.255–0.32, список 0.335–0.87 (~8 строк)
   ============================================================ */

.screen--ranking {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(6px, 1vh, 12px);
  padding: calc(var(--safe-top) + 1.4vh) 3% calc(var(--safe-bottom) + 12vh);
}

.ranking-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #060b16 url("../assets/ranking/ranking-hall.webp") center / cover no-repeat;
}

/* --- заголовок --- */
.rank-head { text-align: center; }
.rank-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  font: 400 clamp(24px, 7vw, 38px)/1 var(--font-display);
  color: #f3eee4;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 0 #2a3140, 0 8px 14px #000;
}
.rank-title img { height: 1.05em; width: auto; filter: drop-shadow(0 3px 4px #000); }

/* --- вкладки (активная — золотая/фиолетовая плашка из набора v2) --- */
.rank-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(5px, 1.4vw, 10px);
}
.rank-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 8px);
  min-height: clamp(34px, 4.8vh, 46px);
  background: url("../assets/ui/chip-9slice.svg") center / 100% 100% no-repeat;
  color: #9fa8bc;
  font: 400 clamp(12px, 3.1vw, 16px)/1 var(--font-display);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 3px #000;
  cursor: pointer;
}
.rank-tab img { height: 1.3em; width: auto; filter: drop-shadow(0 2px 2px #000); }
.rank-tab.is-active {
  background: none;
  border: 8px solid transparent;
  border-width: 7px 9px 8px 9px;
  border-image: url("../assets/ranking/tab-active-gold.webp") 55 72 62 72 fill / 7px 9px 8px 9px stretch;
  color: #5b3200;
  text-shadow: 0 1px 0 rgba(255, 240, 180, 0.6);
}
.rank-tab[data-board="league"].is-active {
  border-image-source: url("../assets/ranking/tab-active-purple.webp");
  color: #fff;
  text-shadow: 0 2px 3px #3b1470;
}
.rank-tab:active { transform: translateY(1px); }

/* --- подиум топ-3 --- */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: clamp(6px, 1.6vw, 12px);
  padding: 0 2%;
}
.podium-place {
  display: grid;
  justify-items: center;
  gap: clamp(3px, 0.6vh, 6px);
}
.podium-ava {
  position: relative;
  width: clamp(40px, 11vw, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: #0c1424;
}
.podium-ava > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.podium-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 clamp(10px, 2.7vw, 15px)/1 var(--font-display);
  color: #e9ecf2;
  text-shadow: 0 2px 3px #000;
}
.podium-length {
  font: 700 clamp(10px, 2.6vw, 14px)/1 var(--font-body);
  color: var(--gold-2);
  text-shadow: 0 2px 3px #000;
}
.podium-block {
  position: relative;
  width: 100%;
  border-radius: 8px 8px 4px 4px;
  border: 2px solid #3d4860;
  border-top-width: 4px;
  background: linear-gradient(180deg, #2b3650, #141c2e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 6px 12px rgba(0, 0, 0, 0.45);
}
.podium-block img {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 80%;
  width: auto;
  filter: drop-shadow(0 3px 4px #000);
}
.podium-place--1 .podium-block { height: clamp(56px, 9vh, 84px); border-top-color: var(--gold-2); }
.podium-place--2 .podium-block { height: clamp(42px, 6.8vh, 62px); border-top-color: #c7d0dd; }
.podium-place--3 .podium-block { height: clamp(34px, 5.4vh, 50px); border-top-color: #d08a4e; }
.podium-place--1 .podium-ava { border-color: var(--gold-2); }
.podium-place--2 .podium-ava { border-color: #c7d0dd; }
.podium-place--3 .podium-ava { border-color: #d08a4e; }

/* --- список --- */
.rank-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 8px);
  padding-bottom: 2px;
}
.rank-list::-webkit-scrollbar { display: none; }

.rank-row {
  flex: none;
  display: grid;
  grid-template-columns: 10% 12% minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 2.5%;
  min-height: clamp(44px, 6vh, 56px);
  padding: 0 2.5%;
  border: 10px solid transparent;
  border-width: 9px 12px 10px 12px;
  border-image: url("../assets/ranking/ranking-row-normal.webp") 65 90 70 90 fill / 9px 12px 10px 12px stretch;
  font-family: var(--font-display);
}
.rank-row--me {
  border-image-source: url("../assets/ranking/ranking-row-self.webp");
}
.rank-row--me .rank-name { color: #ffe9b0; }
.rank-pos {
  font-size: clamp(12px, 3.2vw, 17px);
  color: #9fa8bc;
  text-align: center;
  text-shadow: 0 2px 3px #000;
}
.rank-pos-medal {
  height: clamp(24px, 4.2vh, 34px);
  width: auto;
  justify-self: center;
  filter: drop-shadow(0 2px 3px #000);
}
.rank-ava {
  width: 100%;
  max-width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: contain;
  background: #0c1424;
  border: 2px solid rgba(255, 255, 255, 0.18);
  justify-self: center;
}
.rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12px, 3.3vw, 17px);
  color: #e9ecf2;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 3px #000;
}
/* кружок лиги (заменил медали Kenney) */
.rank-league {
  width: clamp(9px, 2.5vw, 13px);
  height: clamp(9px, 2.5vw, 13px);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 2px 3px #000;
}
.rank-league--gold { background: linear-gradient(180deg, #ffe27a, #e0a400); }
.rank-league--silver { background: linear-gradient(180deg, #e8eef6, #9fb0c4); }
.rank-league--bronze { background: linear-gradient(180deg, #e6a978, #b06a34); }
.rank-length {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 700 clamp(11px, 3vw, 15px)/1 var(--font-body);
  color: #e9ecf2;
  text-shadow: 0 2px 3px #000;
  white-space: nowrap;
}
.rank-length img { height: 1em; width: auto; filter: drop-shadow(0 1px 2px #000); }
.rank-length.is-up { color: var(--green); }
.rank-length.is-down { color: var(--red); }

/* --- карточка приглашения: плашка строки + своя золотая кнопка --- */
.rank-invite {
  flex: none;
  min-height: clamp(56px, 8vh, 74px);
  border: solid transparent;
  border-width: 9px 12px 10px 12px;
  border-image: url("../assets/ranking/ranking-row-normal.webp") 65 90 70 90 fill / 9px 12px 10px 12px stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 3%;
  padding: 1% 1.5% 1% 2.5%;
  text-align: left;
  cursor: pointer;
}
.rank-invite-text { display: grid; gap: clamp(1px, 0.4vh, 4px); }
.rank-invite b {
  font: 400 clamp(13px, 3.5vw, 18px)/1 var(--font-display);
  color: #f3eee4;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 3px #000;
}
.rank-invite small { font: 700 clamp(10px, 2.6vw, 13px)/1 var(--font-body); color: #9aa3b5; }
.rank-invite small mark { color: var(--green); background: none; }
.rank-invite-btn {
  width: clamp(42px, 6.4vh, 54px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 10px solid transparent;
  border-image: url("../assets/ui/button-primary-normal.webp") 90 fill / 10px stretch;
}
.rank-invite-btn img { height: clamp(20px, 3.4vh, 30px); width: auto; filter: drop-shadow(0 2px 2px rgba(90, 50, 0, 0.55)); }
.rank-invite:active .rank-invite-btn { border-image-source: url("../assets/ui/button-primary-pressed.webp"); }
.rank-invite:active { transform: translateY(1px); }

/* разные оттенки одного аватара, пока нет портретов игроков */
.hue-1 { filter: hue-rotate(70deg) saturate(0.9); }
.hue-2 { filter: hue-rotate(160deg) saturate(0.85); }
.hue-3 { filter: hue-rotate(250deg) saturate(0.9); }
.hue-4 { filter: grayscale(0.55); }

@media (max-height: 700px) {
  .rank-title { font-size: clamp(20px, 6vw, 30px); }
  .podium-place--1 .podium-block { height: clamp(42px, 7vh, 60px); }
  .podium-place--2 .podium-block { height: clamp(32px, 5.2vh, 46px); }
  .podium-place--3 .podium-block { height: clamp(26px, 4vh, 38px); }
}