:root {
  --paper: #efebe4;
  --paper-2: #e6e1d8;
  --card: #f6f3ee;
  --ink: #151412;
  --ink-2: #4a4741;   /* потемнее — чтобы подписи читались и поверх ореолов */
  --line: rgba(21, 20, 18, .14);
  --up: #2f6b3f;
  --hit: #e9dcc0;
  --serif: "Noto Serif Display", "Times New Roman", serif;
  --sans: "Golos Text", system-ui, sans-serif;
  --gut: clamp(16px, 3.5vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- живой фон: серые ореолы плавают и меняют форму ---------- */
/* только transform — его телефон анимирует видеокартой, без нагрузки на страницу */
.lava { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.lava i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
  animation: 30s ease-in-out infinite alternate;
}
.lava i:nth-child(1) {
  left: -22vmax; top: -18vmax; width: 64vmax; height: 64vmax;
  background: radial-gradient(closest-side, rgba(120, 118, 114, .22), rgba(120, 118, 114, .08) 55%, transparent);
  animation-name: lava-a; animation-duration: 28s;
}
.lava i:nth-child(2) {
  right: -26vmax; top: 18vh; width: 58vmax; height: 58vmax;
  background: radial-gradient(closest-side, rgba(96, 96, 100, .22), rgba(96, 96, 100, .07) 55%, transparent);
  animation-name: lava-b; animation-duration: 34s;
}
.lava i:nth-child(3) {
  left: 4vw; bottom: -34vmax; width: 76vmax; height: 76vmax;
  background: radial-gradient(closest-side, rgba(150, 148, 144, .24), rgba(150, 148, 144, .09) 55%, transparent);
  animation-name: lava-c; animation-duration: 40s;
}
.lava i:nth-child(4) {
  left: 38vw; top: 30vh; width: 40vmax; height: 40vmax;
  background: radial-gradient(closest-side, rgba(110, 110, 112, .20), rgba(110, 110, 112, .07) 55%, transparent);
  animation-name: lava-d; animation-duration: 24s;
}
.lava i:nth-child(5) {
  right: 6vw; bottom: 8vh; width: 34vmax; height: 34vmax;
  background: radial-gradient(closest-side, rgba(88, 86, 84, .18), rgba(88, 86, 84, .06) 55%, transparent);
  animation-name: lava-e; animation-duration: 20s;
}
@keyframes lava-a {
  0%   { transform: translate(0, 0) scale(1, 1); }
  50%  { transform: translate(16vw, 24vh) scale(1.18, .88); }
  100% { transform: translate(4vw, 52vh) scale(.92, 1.12); }
}
@keyframes lava-b {
  0%   { transform: translate(0, 0) scale(1, 1); }
  50%  { transform: translate(-22vw, 30vh) scale(.86, 1.2); }
  100% { transform: translate(-8vw, -14vh) scale(1.14, .94); }
}
@keyframes lava-c {
  0%   { transform: translate(0, 0) scale(1, 1); }
  50%  { transform: translate(24vw, -36vh) scale(1.1, .9); }
  100% { transform: translate(-10vw, -58vh) scale(.94, 1.16); }
}
@keyframes lava-d {
  0%   { transform: translate(0, 0) scale(1, 1); }
  50%  { transform: translate(-30vw, -22vh) scale(1.3, .82); }
  100% { transform: translate(18vw, 34vh) scale(.84, 1.26); }
}
@keyframes lava-e {
  0%   { transform: translate(0, 0) scale(1, 1); }
  50%  { transform: translate(-40vw, -40vh) scale(.9, 1.24); }
  100% { transform: translate(-12vw, -70vh) scale(1.2, .9); }
}

h1, h2, p { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

/* ---------- top bar ---------- */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 14px var(--gut);
  border-bottom: 1px solid var(--line);
}
.top-side { min-width: 0; }
.top-side--end { justify-self: end; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 36px; height: 36px; flex: none; border-radius: 9px; }
.brand-name { font-weight: 500; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock { font-size: 14px; color: var(--ink-2); }
/* кнопка управления — маленькая круглая иконка; после входа тёмная */
.admin-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: rgba(246, 243, 238, .6); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.admin-btn:hover, body.is-admin .admin-btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut) 48px; }

/* ---------- hero ---------- */
.hero { padding: clamp(28px, 5vw, 64px) 0 0; }
.month { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); }
.month h1 {
  font: 300 clamp(48px, 9vw, 128px)/.95 var(--serif);
  letter-spacing: -.03em;
  text-transform: capitalize;
}
.month .year { color: var(--ink-2); }
.arrow {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer;
  font-size: 18px;
  transition: background .2s, border-color .2s, opacity .2s;
}
.arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arrow:disabled { opacity: .3; cursor: default; }

/* обратный отсчёт: крупные тонкие цифры на светлых подложках, секунды тикают */
.countdown { margin-top: 26px; text-align: center; }
.cd-label { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.cd-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 300px; margin: 0 auto; }
.cd-units[hidden] { display: none; }
.cd-unit {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px 12px; border-radius: 16px;
  background: rgba(246, 243, 238, .72);
  overflow: hidden;
}
.cd-unit b {
  display: block;
  font: 300 clamp(38px, 5.5vw, 64px)/.9 var(--serif);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.cd-unit b.is-tick { animation: cd-tick .45s var(--ease); }
@keyframes cd-tick { from { transform: translateY(-35%); opacity: 0; } }
.cd-unit span { font-size: 12px; color: var(--ink-2); }

/* ---------- kpis ---------- */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.kpi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px 22px 0;
}
.kpi + .kpi { padding-left: 20px; border-left: 1px solid var(--line); }
.kpi-label { font-size: 14px; color: var(--ink-2); }
.kpi-val {
  font: 300 clamp(30px, 3.4vw, 46px)/1.05 var(--serif);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.kpi-sub { font-size: 13px; color: var(--ink-2); }
.kpi--ink { background: var(--ink); color: var(--paper); padding-right: 20px; }
.kpi--ink .kpi-label, .kpi--ink .kpi-sub { color: rgba(239, 235, 228, .7); }
.kpi-val.is-bump { animation: bump .6s var(--ease); }
@keyframes bump {
  30% { transform: translateY(-3px); }
}

/* ---------- boards ---------- */
.grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(20px, 2.5vw, 32px);
  align-items: start;
}
.side { display: grid; gap: clamp(24px, 3vw, 40px); }
/* светлая подложка под рейтингом: ореолы видны вокруг, а под текстом всегда светло */
.grid .board {
  background: rgba(246, 243, 238, .78);
  border-radius: 18px;
  padding: 16px 20px 8px;
}
.board-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.board-head h2 { font: 400 28px/1.1 var(--serif); letter-spacing: -.01em; }
.board-note { font-size: 13px; color: var(--ink-2); text-align: right; }

.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 120px 112px;
  align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.row--head { font-size: 12px; color: var(--ink-2); padding: 10px 0; }
.c-num { text-align: right; white-space: nowrap; }
.rows .row { background: transparent; transition: background 1.2s; }
.row.is-hit { background: var(--hit); transition: background .15s; }

/* топ-3: мягкое свечение за местом и аватаркой — золото, серебро, бронза */
.rows .row[data-place="1"], .rows .row[data-place="2"], .rows .row[data-place="3"] { isolation: isolate; }
.rows .row[data-place]:not([data-place=""])::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 -12px; border-radius: 14px;
  background:
    radial-gradient(ellipse 150px 90% at 52px 50%, rgb(var(--glow) / .42), rgb(var(--glow) / .16) 45%, transparent 75%),
    linear-gradient(90deg, rgb(var(--glow) / .12), transparent 65%);
  pointer-events: none;
}
/* медальки вместо цифр 1–3 (эмодзи — на айфоне айфоновские) */
.medal { display: inline-block; font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(21, 20, 18, .18)); }
.rows .row:first-child .medal { font-size: 38px; }
.rows .row[data-place="1"] { --glow: 214 168 62; }   /* золото */
.rows .row[data-place="2"] { --glow: 158 164 172; }  /* серебро */
.rows .row[data-place="3"] { --glow: 190 120 62; }   /* бронза */

.rank { position: relative; font: 300 30px/1 var(--serif); }
.rank small {
  position: absolute; left: 0; top: 100%;
  font: 500 11px/1 var(--sans); color: var(--up);
  animation: fadeUp .5s var(--ease);
}
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ava {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 500;
}
.row:first-child .ava { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.who-text { min-width: 0; flex: 1; }
.name { display: block; font-weight: 500; line-height: 1.25; }  /* длинная фамилия уходит на вторую строку целиком */
.meter { display: block; height: 6px; margin-top: 8px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 3px; transition: width 1s var(--ease), background .4s; }
.row.is-done .meter i { background: var(--up); }
.plan-note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.row.is-done .plan-note { color: var(--up); font-weight: 500; }
.sum { font-weight: 600; }
.sum-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.deals-n { font-size: 12px; color: var(--ink-2); }
.muted { color: var(--ink-2); }

.rows .row:first-child .rank { font-size: 40px; }
.rows .row:first-child .name { font-size: 18px; }

/* летящая плашка «+2 000 ₽» */
.gain {
  position: absolute; right: 0; top: 2px;
  font-size: 12px; font-weight: 600;
  background: var(--ink); color: var(--paper);
  padding: 3px 8px; border-radius: 20px;
  pointer-events: none;
  animation: gain 1.8s var(--ease) forwards;
}
@keyframes gain {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: 1; transform: translateY(-4px); }
  75%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-18px); }
}

/* продажи — компактная сетка */
.rows--sales .row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.rows--sales .rank { font-size: 24px; }
.rows--sales .row:first-child .rank { font-size: 30px; }
.rows--sales .row:first-child .name { font-size: 16px; }
.deal { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.foot { margin-top: 48px; font-size: 13px; color: var(--ink-2); }
.offline { color: #a23a26; }

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .top { gap: 14px; }
  .clock { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { padding-left: 0; border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi--ink { padding-left: 16px !important; }
  .side { grid-template-columns: 1fr; }
  .row--head, .rows:not(.rows--sales) .row { grid-template-columns: 34px minmax(0, 1fr) 92px; gap: 10px; }
  .row--head > :nth-child(4),
  .rows:not(.rows--sales) .row > :nth-child(4) { display: none; }
  .rank { font-size: 24px; }
  .rows .row:first-child .rank { font-size: 30px; }
  .ava { width: 32px; height: 32px; font-size: 12px; }
  .board-head h2 { font-size: 24px; white-space: nowrap; }
  .grid .board { padding: 14px 12px 6px; border-radius: 14px; }
  .medal { font-size: 29px; }
  .rows .row:first-child .medal { font-size: 33px; }
  .countdown { margin-top: 20px; }
  .cd-unit { padding: 12px 4px 10px; border-radius: 14px; }
  .board-head { flex-wrap: wrap; row-gap: 2px; }
  .board-note { text-align: left; }
  .brand { gap: 10px; }
  .brand-logo { width: 32px; height: 32px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.row.empty { display: block; color: var(--ink-2); font-size: 14px; }

/* открыто не из Telegram */
.gate {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-content: center; gap: 12px;
  padding: 24px; text-align: center;
  background: var(--paper); color: var(--ink-2);
}
.gate-title { font: 300 40px/1.05 var(--serif); color: var(--ink); }
.gate-logo { width: 72px; height: 72px; border-radius: 18px; justify-self: center; }