/* Игра-кликер «Ферма лицей-коинов». Общий стиль — из /style.css, здесь только своё. */

.farm-page { display: grid; gap: 1rem; }

.coin-chip {
  font-weight: 700; font-size: 0.95rem;
  background: var(--marker); color: var(--ink);
  border-radius: 999px; padding: 0.2rem 0.7rem;
  white-space: nowrap;
}
.coin-chip b { font-weight: 800; }

/* Счёт */
.score { gap: 0.75rem; }
.score-main { display: flex; align-items: center; gap: 0.75rem; }
.coin-big { font-size: 2.4rem; line-height: 1; }
.score-value {
  font-size: 2.1rem; font-weight: 800; line-height: 1.1;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.score-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; border-top: 1px dashed var(--line); padding-top: 0.75rem;
}
.stat { display: grid; justify-items: center; text-align: center; }
.stat b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.progress { display: grid; gap: 0.35rem; }
.progress-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
}
.progress-bar span {
  display: block; height: 100%; width: 0;
  background: var(--marker); border-right: 1px solid rgba(22, 33, 62, 0.25);
  transition: width 0.25s ease;
}

/* Кликер */
.clicker { justify-items: center; text-align: center; gap: 0.75rem; }
.coin {
  position: relative;
  width: 190px; height: 190px; max-width: 62vw; max-height: 62vw;
  border-radius: 50%;
  border: 4px solid #d9a300;
  background: radial-gradient(circle at 35% 30%, #ffe98a, #ffd23f 45%, #e8b400);
  color: #7a5a00;
  font-size: 4.6rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 0 #c79c00, 0 10px 18px rgba(22, 33, 62, 0.25);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.coin:hover { transform: translateY(-2px); }
.coin:active, .coin.press {
  transform: translateY(4px);
  box-shadow: 0 3px 0 #c79c00, 0 5px 10px rgba(22, 33, 62, 0.25);
}
.coin-hint {
  position: absolute; bottom: 0.9rem;
  font-size: 1rem; font-weight: 800; color: rgba(122, 90, 0, 0.75);
}
.clicker-lead { color: var(--muted); }

/* всплывающие «+1» */
.fly {
  position: absolute; z-index: 3;
  font-weight: 800; color: var(--blue-dark);
  pointer-events: none;
  animation: fly-up 0.8s ease-out forwards;
  text-shadow: 0 1px 0 #fff;
}
@keyframes fly-up {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to { opacity: 0; transform: translate(-50%, -70px) scale(1.35); }
}

/* Таблица лидеров */
.leaders { display: grid; gap: 0.4rem; }
.leader {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--sheet);
}
.leader .place {
  flex: none; width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  font-weight: 800; font-size: 0.9rem;
}
.leader.top-1 .place { background: var(--marker); border-color: #d9a300; }
.leader.top-2 .place { background: #e6e9f2; }
.leader.top-3 .place { background: #f0dcc4; }
.leader .who2 { display: grid; min-width: 0; flex: 1; }
.leader .who2 .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader .sum { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.leader.me { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47, 79, 216, 0.15); }

/* История переводов */
.transfers { display: grid; gap: 0.4rem; }
.transfer {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; border-bottom: 1px dashed var(--line);
}
.transfer:last-child { border-bottom: 0; }
.transfer .sign { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.transfer .sign.in { color: #1e7a3c; }
.transfer .sign.out { color: var(--danger); }
.transfer .who2 { display: grid; min-width: 0; flex: 1; }
.transfer .who2 .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 420px) {
  .score-value { font-size: 1.8rem; }
  .coin { width: 160px; height: 160px; font-size: 3.8rem; }
}

/* Сообщение об удачном переводе (в /style.css есть только .error) */
.ok-note { color: #1e7a3c; font-weight: 700; font-size: 0.95rem; }