/* ============================================================
   drag-rank.css — Tap-to-rank interaction styles
   ============================================================ */

.rank-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}

.rank-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 7px 10px;
  user-select: none; touch-action: manipulation;
}

.rank-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal); color: white;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.rank-emoji { font-size: 22px; flex-shrink: 0; }
.rank-img   { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.rank-label { flex: 1; font-size: 13px; font-weight: 600; color: white; min-width: 0; }

/* Rank chips — tap a number to move the item to that position. */
.rank-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: flex-end; flex-shrink: 0; max-width: 56%;
}
.rank-chip {
  min-width: 40px; height: 40px; padding: 0 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
@media (hover: hover) {
  .rank-chip:hover { background: rgba(0,201,177,0.18); border-color: var(--teal); color: white; }
}
.rank-chip:active { transform: scale(0.92); }
.rank-chip.active {
  background: var(--teal); border-color: var(--teal); color: white;
}

/* ── 'drag' style — drag rows into order (desktop-oriented) ─────────────────── */
.rank-item.dragging { opacity: 0.55; }
.rank-item.drag-over {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal) inset;
}

/* ── 'sequential' style — tap to fill Rank slots, pool of unranked items ────── */
.seq-rank { display: flex; gap: 14px; align-items: flex-start; }
.seq-slots, .seq-pool { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.seq-slot {
  display: flex; align-items: center; gap: 8px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 10px; padding: 8px 10px; min-height: 42px;
  background: rgba(255,255,255,0.03);
}
.seq-slot.filled {
  border-style: solid;
  border-color: rgba(0,201,177,0.45);
  background: rgba(0,201,177,0.10);
  cursor: pointer; touch-action: manipulation;
}
.seq-rank-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal); color: white;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.seq-slot-label { flex: 1; font-size: 13px; font-weight: 600; color: white; min-width: 0; }
.seq-slot-empty { flex: 1; font-size: 12px; color: rgba(255,255,255,0.35); }
.seq-remove     { color: rgba(255,255,255,0.4); font-size: 13px; flex-shrink: 0; }

.seq-pool-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 9px 10px;
  color: white; cursor: pointer; touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
@media (hover: hover) {
  .seq-pool-item:hover { background: rgba(0,201,177,0.16); border-color: var(--teal); }
}
.seq-pool-item:active { transform: scale(0.98); }
.seq-emoji    { font-size: 20px; flex-shrink: 0; }
.seq-pool-img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.seq-pool-label { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; }
.seq-pool-done  { font-size: 12px; color: rgba(0,201,177,0.8); padding: 6px 2px; }

/* Mobile (and narrow viewports): stack slots above the pool. */
@media (max-width: 600px) {
  .seq-rank { flex-direction: column; gap: 10px; }
}