/* Project Hoof — /rating/ "Дикий Гон". Bulls leaderboard + my standing + tasks.
   Reuses base.css tokens (--gold/--gold-2/--ink) and the shared .subpage-hero. */

.rating-main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.1rem 5rem; }

.rating-gate { text-align: center; max-width: 40ch; margin: 5rem auto; }
.rating-gate h1 { font: 800 1.7rem 'Cinzel', serif; color: var(--gold-2, #ffe278); margin: 0 0 .6rem; }
.rating-gate p  { color: #b9c2dd; line-height: 1.6; margin: 0 0 1.4rem; }

.rating-hero { margin-bottom: 1.4rem; }

/* ---- My standing card ---- */
.rating-me {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(244,200,75,.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,32,60,.75), rgba(12,20,40,.6));
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  margin-bottom: 1.5rem;
}
.rating-me-coins { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.rating-coin { display: flex; align-items: baseline; gap: .4rem; }
.rating-coin-ico { font-size: 1.5rem; line-height: 1; align-self: center; }
.rating-coin-val { font: 800 1.8rem 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.rating-coin-bulls .rating-coin-val { color: var(--gold-2, #ffe278); }
.rating-coin-hs .rating-coin-val { color: #e2caa0; }
.rating-coin-label { font: 600 .78rem 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #97a2c2; }
.rating-me-ranks { display: flex; gap: .7rem; }
.rating-rankpill {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .5rem .95rem; border-radius: 12px;
  background: rgba(244,200,75,.08); border: 1px solid rgba(244,200,75,.22);
}
.rating-rankpill-k { font: 600 .68rem 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #97a2c2; }
.rating-rankpill-v { font: 800 1.2rem 'Manrope', sans-serif; color: var(--ink, #e8edff); font-variant-numeric: tabular-nums; }

/* ---- Two-column layout ---- */
.rating-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .rating-cols { grid-template-columns: 1fr; } }

.rating-col { min-width: 0; }

/* ---- Leaderboard ---- */
.rating-tabs { display: inline-flex; gap: .5rem; margin-bottom: 1rem; }
.rating-tab {
  background: transparent; border: 1px solid rgba(244,200,75,.28); color: #b9c2dd;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  font: 700 .82rem 'Manrope', sans-serif; letter-spacing: .04em; transition: all .15s;
}
.rating-tab:hover { color: var(--gold-2, #ffe278); border-color: rgba(244,200,75,.6); }
.rating-tab.is-active { background: linear-gradient(180deg, #f2cc6a, #c9a24a); color: #241a08; border-color: #8a5d1a; }

.rating-lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.rating-lb-row {
  display: grid; grid-template-columns: 2.4rem 34px 1fr auto; align-items: center; gap: .7rem;
  padding: .55rem .8rem; border-radius: 12px;
  background: rgba(20,32,60,.5); border: 1px solid rgba(244,200,75,.12);
}
.rating-lb-row.is-me { border-color: rgba(244,200,75,.55); background: rgba(40,52,80,.6); }
.rating-lb-rank { font: 800 1rem 'Manrope', sans-serif; color: #97a2c2; text-align: center; font-variant-numeric: tabular-nums; }
.rating-lb-row.top1 .rating-lb-rank { color: #ffd75e; }
.rating-lb-row.top2 .rating-lb-rank { color: #d9d9e6; }
.rating-lb-row.top3 .rating-lb-rank { color: #d19a63; }
.rating-lb-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(244,200,75,.35); background: #241a0c; }
.rating-lb-av-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brass, #8a6a2a); color: #1a1408; font: 800 14px 'Russo One', sans-serif;
}
.rating-lb-name { font: 600 .95rem 'Manrope', sans-serif; color: var(--ink, #e8edff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating-lb-val { font: 800 1rem 'Manrope', sans-serif; color: var(--gold-2, #ffe278); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rating-lb-val::after { content: ' 🐂'; font-size: .85em; }

/* ---- Side panels (tasks + journal) ---- */
.rating-panel {
  border: 1px solid rgba(244,200,75,.2); border-radius: 14px;
  background: rgba(16,26,51,.5); padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.rating-panel-h { font: 800 1rem 'Cinzel', serif; color: var(--gold-2, #ffe278); margin: 0 0 .8rem; letter-spacing: .02em; }

.rating-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rating-task { display: flex; align-items: center; gap: .6rem; }
.rating-task-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(244,200,75,.35); display: inline-flex; align-items: center; justify-content: center;
}
.rating-task.done .rating-task-check { background: linear-gradient(180deg, #6fbf6f, #3d8a3d); border-color: #2f6f2f; }
.rating-task.done .rating-task-check::after { content: '✓'; color: #eafbe4; font-size: .8rem; font-weight: 800; }
.rating-task.ready:not(.done) .rating-task-check { border-color: #f2cc6a; }
.rating-task-body { flex: 1 1 auto; min-width: 0; }
.rating-task-name { font: 600 .88rem 'Manrope', sans-serif; color: var(--ink, #e8edff); }
.rating-task-scope { font: 600 .68rem 'Manrope', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #8794b4; }
.rating-task-reward { font: 800 .85rem 'Manrope', sans-serif; color: var(--gold-2, #ffe278); white-space: nowrap; }
.rating-task-reward::after { content: ' 🐂'; font-size: .82em; }

.rating-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rating-jrow { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid rgba(244,200,75,.1); }
.rating-jrow:last-child { border-bottom: 0; }
.rating-jrow-amt { font: 800 .9rem 'Manrope', sans-serif; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.rating-jrow-amt.pos { color: #8fd08f; }
.rating-jrow-amt.neg { color: #e39a9a; }
.rating-jrow-amt.hs  { color: #e2caa0; }
.rating-jrow-label { flex: 1 1 auto; font: 500 .86rem 'Manrope', sans-serif; color: #c3cbe6; }
.rating-jrow-when { font: 500 .74rem 'Manrope', sans-serif; color: #7a86a6; white-space: nowrap; }

.rating-empty { color: #8794b4; font: 500 .9rem 'Manrope', sans-serif; padding: .6rem 0; }