/* F440 — рейтинг. По прототипу владельца «leaderboard-prototype.html»
   (23.09.2026), на токенах приложения. Лиг нет (решение владельца):
   подиум, таблица участников, своя карточка, неделя и правила. */

.bd-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.bd-top .icon-btn { border-radius: 15px }
.bd-ttx { flex: 1; min-width: 230px }
.bd-ttx h1 { margin: 0 0 4px; font-size: 29px; font-weight: 700; letter-spacing: -.03em }
.bd-ttx p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted) }
.bd-timer { display: inline-flex; align-items: center; gap: 11px; padding: 9px 17px 9px 12px; border-radius: var(--r-pill); flex: none;
  background: color-mix(in srgb, var(--panel-2) 75%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
.bd-timer .bd-tic { width: 26px; height: 26px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--brass-wash); border: 1px solid var(--brass-edge); color: var(--brass) }
.bd-timer .bd-tic .bd-ico { width: 13px; height: 13px }
.bd-timer b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.02em }
.bd-timer span > span { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-3) }
@media (max-width: 700px) { .bd-ttx h1 { font-size: 24px } }

.bd-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.bd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start }
@media (max-width: 1080px) { .bd-cols { grid-template-columns: 1fr } }
.bd-main, .bd-side { display: flex; flex-direction: column; gap: 16px; min-width: 0 }

/* Стеклянные панели — тот же рецепт, что у остальных разделов. */
.bd-w, .bd-pd, .bd-mecard {
  border: 1px solid var(--glass-edge); border-radius: 24px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--panel-2) 82%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--glass-shadow);
}
.bd-w { padding: 20px; position: relative; overflow: hidden }
.bd-wh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px }
.bd-wh h3 { margin: 0; flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -.015em }
.bd-wh > .bd-ico { color: var(--accent-ink) }
.bd-m { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-3) }
.bd-empty, .bd-none { margin: 0; padding: 20px; font-size: 13.5px; line-height: 1.55; color: var(--muted) }
.bd-empty { border-radius: 24px; border: 1px dashed var(--line-2) }

/* ── Подиум ────────────────────────────────────────────────────── */
.bd-podium { display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: 12px; align-items: end }
@media (max-width: 620px) { .bd-podium { grid-template-columns: 1fr; align-items: stretch } }
.bd-pd { position: relative; overflow: hidden; padding: 20px 16px 16px; text-align: center; transition: transform .3s var(--ease-bounce) }
@media (hover: hover) { .bd-pd:hover { transform: translateY(-4px) } }
.bd-pd::before { content: ''; position: absolute; top: -90px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; border-radius: 50%; pointer-events: none }
.bd-pd > * { position: relative }
.bd-pd.g1 { padding-top: 26px; border-color: var(--brass-edge); background: linear-gradient(170deg, var(--brass-wash), color-mix(in srgb, var(--panel) 90%, transparent) 58%) }
.bd-pd.g1::before { background: radial-gradient(circle, color-mix(in srgb, var(--brass) 22%, transparent), transparent 70%) }
.bd-pd.g2::before { background: radial-gradient(circle, rgba(190, 200, 195, .1), transparent 70%) }
.bd-pd.g3::before { background: radial-gradient(circle, rgba(190, 140, 90, .1), transparent 70%) }
.bd-rk { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 12px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted) }
/* Золото, серебро и бронза — постоянные цвета, в обеих темах: латунь
   светлой темы темнее, и тёмная цифра на ней не читалась. */
.bd-pd.g1 .bd-rk { background: #D9B44A linear-gradient(145deg, #F0D98A, #D9B44A); color: #2A1D00; border-color: transparent; box-shadow: 0 7px 18px color-mix(in srgb, var(--brass) 35%, transparent) }
.bd-pd.g2 .bd-rk { background: #9BA8A2 linear-gradient(145deg, #E6EDE9, #9BA8A2); color: #1A1F1C; border-color: transparent }
.bd-pd.g3 .bd-rk { background: #A06B41 linear-gradient(145deg, #D9A273, #A06B41); color: #2A1A0C; border-color: transparent }
.bd-pav { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 19px; display: grid; place-items: center; font: 700 20px var(--font-mono);
  color: var(--on-accent); background: var(--accent) linear-gradient(145deg, var(--lime), var(--accent));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 2px 0 rgba(255, 255, 255, .35) }
.bd-pd.g1 .bd-pav { width: 66px; height: 66px; border-radius: 22px; font-size: 24px }
.bd-pd h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bd-xp { font-size: 24px; font-weight: 700; letter-spacing: -.04em; color: var(--accent-ink);
  background-image: var(--grad-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.bd-pd.g1 .bd-xp { font-size: 29px; color: var(--brass); background-image: var(--grad-num-brass) }
.bd-xl { font-size: 8.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-3) }

/* ── Таблица ───────────────────────────────────────────────────── */
.bd-filt button { padding: 7px 14px; font-size: 12px; font-weight: 600 }
.bd-filt button.on, .bd-mode button.on { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent) }
.bd-rows { display: flex; flex-direction: column; gap: 5px }
.bd-rw { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 13px; border-radius: 18px; border: 1px solid transparent; transition: background .24s }
@media (hover: hover) { .bd-rw:hover { background: color-mix(in srgb, var(--accent) 5%, transparent) } }
.bd-rrk { width: 30px; flex: none; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted-3) }
.bd-rw.is-top .bd-rrk { color: var(--brass) }
.bd-av { width: 38px; height: 38px; flex: none; border-radius: 13px; display: grid; place-items: center; font: 700 13px var(--font-mono);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted) }
.bd-nm { flex: 1; min-width: 0 }
.bd-nm b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bd-nm span { font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-3) }
.bd-bar { width: 150px; flex: none; height: 6px; border-radius: var(--r-pill); background: var(--panel-3); overflow: hidden }
@media (max-width: 820px) { .bd-bar { display: none } }
.bd-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-wash-2), var(--accent));
  transform-origin: left; animation: bd-grow 1s var(--ease-bounce) backwards }
@keyframes bd-grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.bd-rxp { width: 76px; flex: none; text-align: right; font-size: 15px; font-weight: 700; letter-spacing: -.03em }
.bd-rxp u { text-decoration: none; margin-left: 3px; font-size: 9.5px; font-weight: 600; color: var(--muted-3) }
.bd-rw.is-me { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent); border-color: var(--accent-edge) }
.bd-rw.is-me::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 26px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--lime), var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent) }
.bd-rw.is-me .bd-rrk { color: var(--accent-ink) }
.bd-rw.is-me .bd-av { background: var(--accent) linear-gradient(145deg, var(--lime), var(--accent)); color: var(--on-accent); border-color: transparent }
.bd-rw.is-me .bd-bar i { background: linear-gradient(90deg, var(--accent), var(--lime)) }
.bd-rw.is-me .bd-rxp { color: var(--accent-ink) }
.bd-gap { padding: 2px 13px; color: var(--muted-3) }

/* ── Своя карточка ─────────────────────────────────────────────── */
.bd-mecard { position: relative; overflow: hidden; padding: 20px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), color-mix(in srgb, var(--panel) 90%, transparent) 60%); border-color: var(--accent-edge) }
.bd-mecard::before { content: ''; position: absolute; top: -110px; right: -40px; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-wash-2), transparent 70%); pointer-events: none }
.bd-mecard > * { position: relative }
.bd-mtop { display: flex; align-items: center; gap: 14px; margin-bottom: 16px }
.bd-mbig { font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--accent-ink);
  background-image: var(--grad-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.bd-mbig u { text-decoration: none; margin-left: 3px; font-size: 15px; -webkit-text-fill-color: var(--muted) }
.bd-mt { flex: 1; min-width: 0 }
.bd-mt b { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere }
.bd-mt span { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--brass) }
.bd-gap2 { padding: 13px 14px; border-radius: 14px; background: color-mix(in srgb, var(--stage) 55%, transparent); border: 1px solid var(--line) }
.bd-gt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px }
.bd-gt span { font-size: 12px; color: var(--muted) }
.bd-gt b { font-size: 14px; font-weight: 700; color: var(--accent-ink) }
.bd-mnote { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted) }
.bd-mnote b { color: var(--text); font-weight: 600 }

.bd-p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted) }
.bd-tg { border-color: var(--brass-edge); background: linear-gradient(165deg, var(--brass-wash), color-mix(in srgb, var(--panel) 90%, transparent)) }
.bd-tg .bd-wh > .bd-ico { color: var(--brass) }
.bd-check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; padding: 12px 13px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--stage) 55%, transparent); border: 1px solid var(--line) }
.bd-check input { width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer }
.bd-check span { font-size: 13px; line-height: 1.5 }
.bd-check a { color: var(--accent-ink) }
.bd-field { display: grid; gap: 7px; margin-bottom: 14px }
.bd-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3) }
.bd-mode { flex-wrap: wrap; border-radius: 16px }
.bd-mode button { flex: 1 1 auto }
.bd-mode button { padding: 7px 12px; font-size: 12px; font-weight: 600 }
.bd-mode button:disabled { opacity: .45; cursor: default }
.bd-small { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted) }
.bd-err { margin: 0 0 12px; font-size: 12.5px; color: var(--bad-ink) }
.bd-wide { width: 100%; min-height: 46px; margin-bottom: 10px; border-radius: var(--r-pill); justify-content: center }
.bd-consent .btn--solid, .tg-open { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-weight: 700;
  border-color: transparent; background: var(--accent) linear-gradient(135deg, #2AE06D, var(--accent) 62%, #0E6B33); color: var(--on-accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22) }
.bd-consent .btn--solid:disabled { background: var(--panel-3); color: var(--muted); box-shadow: none }
.tg-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.bd-swrow { display: flex; align-items: center; gap: 14px; margin-bottom: 15px }
.bd-st { flex: 1; min-width: 0 }
.bd-st b { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 600 }
.bd-st span { font-size: 11.5px; line-height: 1.45; color: var(--muted) }

/* ── Неделя ────────────────────────────────────────────────────── */
.bd-week { display: flex; align-items: flex-end; gap: 6px; height: 86px; margin: 18px 0 12px }
.bd-wd { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; height: 100% }
.bd-wb { position: relative; width: 100%; border-radius: 6px 6px 3px 3px; transform-origin: bottom; background: linear-gradient(180deg, var(--accent), var(--accent-wash));
  animation: bd-rise .7s var(--ease-bounce) backwards; transition: filter .2s }
@keyframes bd-rise { from { transform: scaleY(0) } to { transform: scaleY(1) } }
.bd-wd.is-today .bd-wb { background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 25%, transparent)); box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 24%, transparent) }
.bd-wd.is-zero .bd-wb { background: var(--hatch-nodata) }
.bd-wd.is-future .bd-wb { opacity: .5 }
@media (hover: hover) { .bd-wd:hover .bd-wb { filter: brightness(1.2) } .bd-wd:hover .bd-wv { opacity: 1 } }
.bd-wv { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--text); opacity: 0; transition: opacity .18s; white-space: nowrap }
.bd-wl { font-size: 9.5px; font-weight: 600; text-transform: uppercase; color: var(--muted-3) }
.bd-wd.is-today .bd-wl { color: var(--accent-ink) }
.bd-wsum { display: flex; gap: 9px; padding-top: 13px; border-top: 1px solid var(--line) }
.bd-wsum > div { flex: 1; text-align: center }
.bd-wsum b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.03em }
.bd-wsum b.is-lime { color: var(--accent-ink) }
.bd-wsum span { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3) }

/* ── Правила ───────────────────────────────────────────────────── */
.bd-rl { display: flex; gap: 12px; padding: 11px 0 }
.bd-rl + .bd-rl { border-top: 1px solid var(--line) }
.bd-n { width: 24px; height: 24px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--accent-ink) }
.bd-rl p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted) }
.bd-rl b { color: var(--text); font-weight: 600 }

@media (prefers-reduced-motion: reduce) { .bd-bar i, .bd-wb { animation: none } }

/* ── Окно участия ─────────────────────────────────────────────────
   Общий модальный лист приложения в оформлении рейтинга: стекло,
   зелёное свечение сверху, две кнопки вместо одной «Понятно». */
.sheet--board .sheet-in { position: relative; overflow: hidden; max-height: 92vh; overflow-y: auto; padding: 24px 22px calc(22px + env(safe-area-inset-bottom));
  border-color: var(--accent-edge); border-radius: 24px 24px 0 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 55%);
  box-shadow: var(--glass-shadow-hi) }
@media (min-width: 640px) { .sheet--board .sheet-in { border-radius: 24px } }
.sheet--board .sheet-in::before { content: ''; position: absolute; top: -120px; right: -60px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-wash-2), transparent 70%); pointer-events: none }
.sheet--board .sheet-in > * { position: relative }
.sheet--board #shTitle { font-size: 21px; font-weight: 700; letter-spacing: -.02em }
.sheet--board #shText { font-size: 13.5px; line-height: 1.6; color: var(--muted) }
/* Своя пара кнопок в теле окна; общая «Понятно» спрятана, но по-прежнему
   срабатывает на Esc — как «Не сейчас». */
.sheet--board .acts { display: none }
.bd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px }
.bd-acts .btn { flex: 1 1 160px; min-height: 46px; border-radius: var(--r-pill) }
.bd-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; border-color: transparent;
  background: var(--accent) linear-gradient(135deg, #2AE06D, var(--accent) 62%, #0E6B33); color: var(--on-accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22) }
.bd-cta:disabled { background: var(--panel-3); color: var(--muted); box-shadow: none }
.bd-join { border-color: var(--accent-edge); background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), color-mix(in srgb, var(--panel) 90%, transparent)) }

/* ── Виджет на «Тренажёрах» ─────────────────────────────────────── */
.hbd-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px }
.hbd-rw { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent }
.hbd-rw.is-me { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent-edge) }
.hbd-rw .bd-av { width: 32px; height: 32px; border-radius: 11px; font-size: 12px }
.hbd-rk { width: 24px; height: 24px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted) }
.hbd-rk.g1 { background: #D9B44A linear-gradient(145deg, #F0D98A, #D9B44A); color: #2A1D00; border-color: transparent }
.hbd-rk.g2 { background: #9BA8A2 linear-gradient(145deg, #E6EDE9, #9BA8A2); color: #1A1F1C; border-color: transparent }
.hbd-rk.g3 { background: #A06B41 linear-gradient(145deg, #D9A273, #A06B41); color: #2A1A0C; border-color: transparent }
.hbd-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hbd-xp { flex: none; font-size: 13.5px; font-weight: 700; letter-spacing: -.02em }
.hbd-xp u { text-decoration: none; margin-left: 2px; font-size: 9px; color: var(--muted-3) }
.hbd-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted) }
.hbd-me b { color: var(--accent-ink); font-size: 14px }
.hbd-none { margin-bottom: 12px }