/* ============================================================
   Winners (app/winners.html)
   Pre-launch state: no finished contests yet, so the screen
   explains where and when results will be published — no
   invented winners.
   ============================================================ */

.winners-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 44px 20px 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
}
.winners-empty .empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold-faint);
  border: 1px solid rgba(244, 176, 33, 0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  margin-bottom: 4px;
}
.winners-empty .empty-icon svg { width: 26px; height: 26px; }
.winners-empty p { font-size: 14px; color: var(--muted); max-width: 340px; line-height: 1.55; }

/* current contest context */
.winners-now {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}
.winners-now p { flex: 1; min-width: 220px; font-size: 13px; color: var(--muted); }
.winners-now p b { color: var(--txt); }
.winners-now .btn { flex: none; }

/* simple process context — when results become available */
.winners-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.w-step { display: flex; gap: 12px; align-items: flex-start; }
.w-dot {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.w-dot svg { width: 14px; height: 14px; }
.w-step.gold .w-dot {
  background: var(--gold-faint);
  border-color: rgba(244, 176, 33, 0.45);
  color: var(--gold);
}
.w-step b { display: block; font-size: 13.5px; font-weight: 700; }
.w-step span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* skeleton while loading */
.sk-line { height: 16px; width: 60%; margin-bottom: 10px; }

@media (min-width: 768px) {
  .winners-empty { padding: 56px 24px 44px; }
  .winners-timeline { flex-direction: row; }
  .w-step { flex: 1; }
}