/* Renk Sıralama — ball sort. */

.raf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 3vw, 20px);
  width: 100%;
  padding: 10px 0 4px;
}

.tup {
  --genislik: clamp(38px, 11vw, 52px);
  width: var(--genislik);
  display: flex;
  flex-direction: column-reverse;      /* blok 0 = en alt */
  justify-content: flex-start;
  gap: 3px;
  padding: 5px;
  border: 2px solid var(--cizgi-koyu);
  border-top: 0;
  border-radius: 6px 6px calc(var(--genislik) / 2) calc(var(--genislik) / 2);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform var(--gecis-hizli), border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
  /* Beş blok + boşluk + dolgu: tüp hep tam boy, yarısı boşken de. */
  min-height: calc(5 * (var(--genislik) - 10px) + 4 * 3px + 10px);
  touch-action: manipulation;
}

.tup.secili {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--parilti);
  transform: translateY(-8px);
}

.tup.tamamlandi { border-color: #16a34a; background: #f0fdf4; }

.blok {
  height: calc(var(--genislik) - 10px);
  border-radius: 4px;
  background: var(--renk);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.28);
  transition: transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Seçilen yığın havaya kalkıyor: hangi blokların taşınacağı, tüpün
   seçili olmasından çok daha net anlaşılıyor. */
.tup.secili .blok.kalkan { transform: translateY(-10px); }

.blok.dusen { animation: dusus 220ms cubic-bezier(0.3, 0.9, 0.4, 1); }
@keyframes dusus {
  from { transform: translateY(-26px); opacity: 0.35; }
  to { transform: translateY(0); opacity: 1; }
}

.seviye-serit { font-size: 0.85rem; color: var(--komur-yumusak); text-align: center; margin: 0; }