/* ============================================================
   transfer.css - Tryb "Zgadnij zawodnika po historii transferów"
   Kwadraty (kluby) połączone strzałkami, w kolejności kariery.
   ============================================================ */

.transfer-header {
  text-align: center;
  margin-bottom: 16px;
}
.transfer-title-label {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #e2eaf3;
  margin-bottom: 8px;
}
.transfer-status-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.transfer-status-chip {
  display: inline-flex;
  align-items: center;
  background: var(--c-bg-2, #111d2e);
  border: 1px solid var(--c-border, #1e2f45);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.transfer-status-chip.wrong {
  color: #fca5a5;
  border-color: rgba(239,68,68,.3);
  background: rgba(239,68,68,.08);
}

/* ── Rząd klubów: zawija się do kolejnych linii (bez suwaka) ─────── */
.transfer-history-scroll {
  padding: 8px 0 16px;
  margin-bottom: 4px;
}
.transfer-history-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 0;               /* odstęp między liniami; poziomo odstęp robi strzałka */
}

/* Kafelek + strzałka za nim to jedna całość - zawijanie nigdy nie
   oddzieli strzałki od jej kafelka. */
.transfer-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Strzałka na końcu linii (ustawiane w JS: markRowEnds) wskazywałaby w
   pustkę - ukrywamy ją, ale zostawiamy miejsce, żeby układ się nie przeliczał. */
.transfer-item.row-end .transfer-arrow { visibility: hidden; }

.transfer-step {
  flex-shrink: 0;
}

.transfer-box {
  position: relative;
  width: 108px;
  height: 90px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 8px 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #e2eaf3;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.transfer-box-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Numer klubu w karierze (1 = pierwszy) - czytelna kolejność po zawinięciu. */
.transfer-box-num {
  position: absolute;
  top: 5px;
  left: 8px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #64748b;
  opacity: .8;
}
/* Uwaga: NIE nazywamy tego ".hidden" - strona ma globalną klasę
   narzędziową ".hidden { display:none }" używaną do chowania całych
   sekcji (patrz index.html <main class="hidden">) - kolizja nazw
   powodowała, że nieodkryty kafelek znikał zupełnie zamiast pokazać "?". */
.transfer-box.is-hidden {
  cursor: pointer;
  background: var(--c-bg-2, #111d2e);
  border: 2px dashed rgba(255,255,255,.22);
  color: #64748b;
}
.transfer-box.is-hidden:hover {
  border-color: var(--c-wisla, #c8102e);
  color: var(--c-wisla, #c8102e);
  transform: scale(1.04);
}
.transfer-box.is-hidden:active { transform: scale(.98); }
/* Zablokowany: teraz trzeba strzelać (serwer: can_reveal = false). */
.transfer-box.is-hidden.is-locked {
  cursor: not-allowed;
  opacity: .5;
}
.transfer-box.is-hidden.is-locked:hover {
  border-color: rgba(255,255,255,.22);
  color: #64748b;
  transform: none;
}
.transfer-box-q {
  font-size: 26px;
  font-weight: 800;
  color: inherit;
}
.transfer-box.revealed {
  background: linear-gradient(160deg, rgba(245,200,66,.10), var(--c-bg-2, #111d2e));
  border: 2px solid rgba(245,200,66,.35);
  box-shadow: 0 4px 14px rgba(245,200,66,.08);
}

.transfer-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  font-size: 22px;
  font-weight: 800;
  color: var(--c-wisla, #c8102e);
  opacity: .85;
}

/* ── Panel zgadywania ──────────────────────────────────────────── */
.transfer-guess-wrap {
  max-width: 420px;
  margin: 0 auto;
}
.transfer-hint {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  padding: 10px 0;
}

/* ── Bonus info po zakończeniu gry ────────────────────────────── */
.transfer-career-ended {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #94a3b8;
  background: var(--c-bg-2, #111d2e);
  border: 1px solid var(--c-border, #1e2f45);
  border-radius: 10px;
  padding: 8px 14px;
  display: inline-block;
}

@media (max-width: 480px) {
  .transfer-box { width: 88px; height: 78px; font-size: 11.5px; }
  .transfer-arrow { width: 22px; font-size: 17px; }
}